ES6 in my daily life

5 minute read

ES2015/ES6 has been around for more than two years with all the exciting feature and syntax. After working with TypeScript and Angular 2 in a project for more than a year, there are the features that I often apply in my code.

Template literals

It provides the syntax for constructing strings. Basically, it helps us to:

  • Write multiple lines of string
  • Interpolate JavaScript into your string using ${}
//basic literal string creation
`This is a pretty little template string.`

// Multiline strings
`in ES5 this is
 not legal.`

//construct string without the need to concat
const promise = fetch('/api/v1/users/${userId}', {
    method: 'post',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(body)
})

Destructuring

It provides a better way to unpack value from arrays, or properties from an object into a variable.

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

Default Parameter

It allows formal parameters to be initialized with default values if no value or undefined is passed.

//es5
//function multiply(a, b) {
//  b = (typeof b !== 'undefined') ?  b : 1;
//  return a * b;
//}

//es6
function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5, 1); // 5
multiply(5);    // 5

… (spread operator and rest parameters)

These provide a convenient way to shove any unnamed arguments passed to your function into an array, or do the inverse by calling a function with arguments extracted from an array.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
//append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);

//with spread syntax this becomes:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

My useful tips collection :)

1. Swap variable

Using array destructive syntax

let a = 'world', b = 'hello'
[a, b] = [b, a]
console.log(a) // -> hello
console.log(b) // -> world

2. Concat/merge array

I often use spread operator to extract array value instead of concat function.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

//old es5 way
const result = arr1.concat(arr2, arr3);

//another old es5 way 
const result = [].concat(arr1, arr2, arr3);

//new es6 way
const result = [...arr1, ...arr2, ...arr3];

3. Default variable with ||

You will find it sometimes very very helpful.

//old es5 way
function doSomething(options){
    options = options || {};
}

//new es6 way
function doSomething(options = {}){
    //todo
}

4. Time testing

Ever wonder what’s faster: Looping with an i++ or looping with an i– ? Just use console’s timing method to test

var a = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
console.time('testing with i++');
for (var i = 0; i < a.length; i++){
}
console.timeEnd('testing with i++'); //testing with i++: 0.010009765625ms


console.time('testing with i--');
for (var i = a.length - 1; i >= 0; i--){
}
console.timeEnd('testing with i--'); //testing with i--: 0.0107421875ms

To learn ES6

Starting with the release of ES2015, the language has continued to evolve at a rapid pace. We saw there is the tons of feature of ES2017 on the way, such as async/await function. So hurry up and digest the ES 2015 before it become outdated.

Leave a Comment