Dynamic Import
Now, you can import a file dynamically.
import { max } from '../math.js';const nums = [1, 2, 3];
max(...nums); // 3
This has been the way we could import a file. And the JavaScript engine reads the modules in the file and bring them into the file where those modules are called. But now, you can do this as follows.
const numbs = [1, 2, 3];if (numbs.length) {
const math = '../math';
import(math)
.then(module => {
module.max(...numbs);
})
}
A dynamic import returns a promise. Which means you can write it this way as well.
const math = '../math.js';
const module = await import(math);
module.max(...numbs);
Why this feature is good is that you can use a dynamic import in a regular JavaScript code like the example above.
Here’s the browser support for Dynamic Import.
- Chrome: 63
- Edge: No Support
- Firefox: 67
- IE: No Support
- Opera: 50
- Safari: 11.1
BigInt
When you had to add two numbers that are too big enough to cause an overflow, weren’t you suffered?
Number.MAX_VALUE * 2 // Infinity
BigInt is a savior in this case.
You can make a BigInt by calling BigInt() with parenthesis or 2n with ‘n’ at the end of a number.
const num = 2;
const bigNum = BigInt(num);bigNum; // 2n
bigNum === 2n; // true
You can also add, subtract, multiply and divide it.
const bigN = BigInt(10);bigN + bigN; // 20n
bigN * 3n; // 30n
bigN - BigInt('55'); // 45n
bigN / 3n; // 3n
Note that bigN / 3n returns 3n , not 3.33333n . Because as you also can assume from its name, it only handles the integers. So bigN / 3n is similar to Math.floor(10 / 3) .
However, unfortunately, you can’t make a BigInt with a float number. And also, you can’t use a BigInt and a Number together, either.
BigInt(3.3);
// Uncaught RangeError BigInt('3.3');
// Uncaught SyntaxErrorBigInt(1) + 1;
// Uncaught TypeError
// Cannot mix BigInt and other types
Instead, the only allowed case to mix the operations is when you compare the size of the operations.
BigInt(1) < 2 // true
And a BigInt can be evaluated like a Number if it’s in if condition.
function print(n) {
if (BigInt(n)) {
console.log('hi');
} else {
console.log('bye');
}
}print(1); // hi
print(0); // bye
Here’s the browser support for BigInt
- Chrome: 67
- Edge: No Support
- Firefox: 68
- IE: No Support
- Opera: 54
- Safari: No Support
Promise.allSettled
This is quite similar to Promise.all , but there’s a significant difference between them. Promise.all waits for all the promises being fulfilled or an any promise being rejected. On the other hand, Promise.allSettled doesn’t care about that. What it cares is to know if all the promises are done, whichever their status is. So every input promise could be fulfilled or rejected, but it doesn’t matter to Promise.allSettled . Just all of them have to be done.
The example is from Tomas Dostal
This might be quite useful when you want to do some works before some action, for example, getting all of the required data before the user sees the list page. But the user could see the empty items because the fetch might be failed.
Here’s the browser support for Promise.allSettled.
- Chrome: 76
- Edge: No Support
- Firefox: 71
- IE: No Support
- Opera: Unknown
- Safari: Unknown
globalThis
This is lit. It’s dead simple and easy to use.
globalThis refers to the global this context on which your running context is. If you’re on Browsers, globalThis will be this , if you’re on Node, globalThis will be global . Hence no need to think about the different environmental issues anymore.
// worker.js
globalThis === self// node.js
globalThis === global// browser.js
globalThis === window
And this is how it works under the hood, but don’t use it in your code!
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};
Here’s the environmental support for gloablThis.
- Chrome: 71
- Edge: No Support
- Firefox: 65
- IE: No Support
- Opera: No Support
- Safari: 12.1
- Node: 12
Conclusion
There are many fun new features in javascript 2020. Most of them, however, don’t support the old browsers and they aren’t always stable in every environment. So you should consider what environments you should support at your service.