Categories
Modern JavaScript

Best of Modern JavaScript — Fills, Modules, and Numbers

Spread the love

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at the core features of JavaScript.

Array.prototype.fill

Since ES6, arrays have the fill instance method that lets us fill the array with the value we want.

For instance, we can write:

const arr = new Array(3).fill(undefined);

Then arr would be [undefined, undefined, undefined] .

Before ES6, there’s no good equivalent.

However, we can use apply as a hack to do the same thing:

var arr = Array.apply(null, new Array(3));

Then we get the same result.

However, there’s no way to fill it with any other value other than undefined .

fill treats holes as if they’re elements.

ES6 Modules

Modules are another great feature of modern JavaScript.

It’s introduced with ES6.

Before ES6, there were no native modules.

There’re various module systems like CommonJS.

In CommonJS, we can export multiple items in a module.

For instance, we can write:

math.js

function add(x, y) {  
  return x + y;  
}

function square(x) {
return x * x;
}

function diag(x, y) {  
  return sqrt(square(x) + square(y));  
}

module.exports = {
add: add,
square: square,
diag: diag,
};


We put our functions in the `module.exports` object to export them.

Then we can import them by writing:

var add = require(‘math’).add;
var diag = require(‘math’).diag;


We import the `math` module and get the properties from the module.

Also, we can require the whole module:

var meth = require(‘math’)


With ES6, we can use the `export` and `import` keywords to export and import modules items respectively.

For example, we can write:

`math.js`

export function add(x, y) {
return x + y;
}

export function square(x) {  
  return x \* x;  
}

export function diag(x, y) {
return sqrt(square(x) + square(y));
}


We just put the `export` keyword in front of our functions to export them.

To import them items, we can write:

import { add, diag } from 'math';


We import the `add` and `diag` functions from `math.js` with the the `import` keyword and curly brackets.

The imports with curly brackets are called named imports.

### Single Exports

With CommonJS, we do single exports by assign a value to `module.exports` :

`foo.js`

module.exports = function() {
//···
};


Then we can require it by writing:

var foo = require(‘foo’);


With ES6, we can use the `export default` keywords to do a single export.

For example, we can write:

`foo.js`

export default function() {
//···
}


Then we can import it by writing:

import foo from ‘foo‘;


### Numbers and Math

ES5 introduced hexadecimal numbers.

For instance, we can write:

0x1F


to write the hex form of decimal 31.

With ES6, binary numbers are introduced.

For example, we can write:

0b11


to write the binary number 3.

We can also write octal numbers by writing:

0o11


to write the decimal number 9 in octal form.

### Conclusion

ES6 or later have a native module system, which previous versions lack.

It also introduced useful array methods and new types of numbers.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *