Best of Modern JavaScript — More Core Features

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.

Function Expressions to Arrow Functions

Since ES6, arrow functions let us create functions that are shorter and don’t bind to its own this .

This makes creating new functions easier and cleaner.

For instance, instead of writing:

function Button() {
  var _this = this;
  var button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    console.log('clicked');
    _this.handleClick();
  });
}

Button.prototype.handleClick = function () {
  //···
};

We create the _this variable and set it to this outside the function so that we can use it in the click listener.

This isn’t ideal since we can easily confuse different values of this from different levels.

With arrow functions, we can write:

function Button() {
  const button = document.getElementById('button');
  button.addEventListener('click', () => {
    console.log('clicked');
    this.handleClick();
  });
}

We just pass in arrow function and we can use the this value from the Button function.

We don’t have to set the Button ‘s this to a variable before using it.

Arrow functions are great for callbacks that return an expression.

For instance, instead of writing:

var arr = [1, 2, 3];
var cubes = arr.map(function (x) { return Math.pow(x, 3) });

We write:

const arr = [1, 2, 3];
const cubes = `arr.map(x` `=>` `x` `** 3);`

It’s much shorter and cleaner.

Multiple Return Values

With modern JavaScript, we can handle multiple return values with ease.

We can return an object or array and destructure the entries into variables.

Before ES6, there’s no destructuring assignment, So we’ve to write something like:

var matchObj =
  /^(ddd)-(ddd)-(dddd)$/
  .exec('222-112-2222');
var areaCode = matchObj[1];
var officeCode = matchObj[2];
var stationCode = matchObj[3];

With ES6 or later, we can write:

const matchObj =
  /^(ddd)-(ddd)-(dddd)$/
  .exec('222-112-2222');
const [_, areaCode, officeCode, stationCode] = matchObj;

We used destructuring to assign each entry to a variable.

This lets us saves many lines of code.

Multiple Return Values via Objects

We can also return an object and destructure the properties into variables.

For instance, we can write:

const obj = {
  foo: 'bar'
};

const {
  writable,
  configurable
} =
Object.getOwnPropertyDescriptor(obj, 'foo');

We get the writable and configurable properties from the getOwnPropetyDescriptor method and assigned to variables.

From for and forEach() to for-of

The for-of loop can loop through any iterable object.

It’s less versatile than for , but faster and more versatile than forEach .

forEach are only available with arrays and Nodelists.

To use a for loop, we write:

var arr = ['a', 'b', 'c'];
for (var i = 0; i < arr.length; i++) {
  var letter = arr[i];
  console.log(letter);
}

With forEach , we can write:

var arr = ['a', 'b', 'c'];
arr.forEach(function(letter) {
  console.log(letter);
});

With for-of, we can write:

const arr = ['a', 'b', 'c'];
for (const [index, letter] of arr.entries()) {
  console.log(index, letter);
}

As we can see, we can use destructuring with the for-of loop.

This isn’t available with other loops or forEach .

Since arr.entries() returns an array with each entry being an array with the index and entry, we can get them both with destructuring.

Conclusion

Modern JavaScript has great features including destructuring and the for-of loop.