7 ES6 Features all JavaScript Programmers Should Learn to Use

The EMCAScript2015 (ES6) came with a whole new set of fetaures and syntax.

In this article, we will take a look at some very useful ones.

1. Destructuring Assignment (Objects and Arrays)

• Access and store multiple elements from an array or object in just one line of code

let oldArray = [1, 2, 3];
let first = oldArray[0]; // first = 1
let second = oldArray[1]; // second = 2
let third = oldArray[2]; // third = 3


let newArray = [1, 2, 3];
let [first, second, third] = newArray;
// The same operation reduced to just one line

const oldMe = {
    name: "kingsley",
    sex: "male",
    age: 21
};

const oldName = oldMe.name; // "kingsley"
const oldSex = oldMe.sex; // "male"
const oldAge = oldMe.age; // 21


const newMe = {
    name: "kingsley",
    sex: "male",
    age: 21
};

{ name, sex, age } = newMe; 

// Refactored to just one single line

2. Default Parameter

• Set a default parameter for a function which will be used when one is not defined.

/* BEFORE */

function withoutDefault(param1, param2) {
    if (param2 === undefined) {
        param2 = "second string";
    }

    console.log(param1, param2);
}


withoutDefault("first string", "second string");
// "first string" and "second string"



/* WITH DEFAULT PARAMETER */

function withDefault(param1, param2 = "second string") {
    console.log(param1, param2);
}


withDefault("first string");
// "first string" and "second string"



withDefault("first string", "second string");
// Outputs: "first string" and "second string"

3. MODULES

• Share code across multiple files

// capitalize.js

function capitalize(word) {
    return word[0].toUpperCase() + word.slice(1);
}

export { capitalize }; // Exports the function


// warn.js

import { capitalize } from './capitalize'; // Imports the function

function warn(name) {
    return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!

4. ENHANCED OBJECT LITERAL

• Create an object, supply it properties and methods all in a very short and dynamic way.

var name = "kingsley";
var sex = "male";
var age = 21;

// Using Object Literal Enhancement

var me = {name, sex, age};
console.log(me);


/*
   {
     name: "kingsley",
     sex: "male",
     age: 21
   }

var name = "kingsley";
var sex = "male";
var age = 21;

// Function

let sayName = function (){
  console.log(`I am ${this.name}!`);
}

// With Object Literal Enhancement

var me = {name, sex, age, sayName};


me.sayName();

// "I am kingsley!"

5. PROMISE

• Nest callbacks in a simple and clean way.

const successPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('successful!');
  }, 300);
});

// CONTINUATION AFTER 3 SECONDS
successPromise
.then(value => { console.log(value) })  // "successful!"
.catch(error => { console.log(error) })


--------------------------------------------------------

const failPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('oops!, something went wrong');
  }, 300);
});

// CONTINUATION AFTER 3 SECONDS
failPromise
.then(value => { console.log(value) }) 
.catch(error => { console.log(error) }) // oops, something went wrong

6. TEMPLATE LITERALS

• Dynamically construct string from variables

let name = "kingsley"
let age = 21
let blog = "ubahthebuilder.tech"

function showBlog() {
console.log(`My name is ${name}, I am ${age} years old and I blog at ${blog}`);
} 

showBlog();

// "My name is kingsley, I am 21 years old and I blog at ubahthebuilder.tech"

7. ARROW FUNCTIONS

• Write shorter function syntax

let sayName = () => {
  return "I am Kingsley";
}

let sayName2 = (name) => `I am ${name}`;
let sayName3 = name => `I am ${name}`; // You can remove the brackets

let sayNameAge = (name, age) => `I am ${name}, and I am ${age} years old`
// If argument is more than one, you must wrap in parenthesis

YOU MAY ALSO LIKE:

• User Authentication vs User Authorization: The Difference?

• Prototypal Inheritance Explained

Comments

[Jon Randy 🎖️]

In your section on modules, you have omitted the file extension on the import filename - this code will not work