DEV Community

Cover image for 7 ES6 Features all JavaScript Programmers Should Learn to Use
Kingsley Ubah
Kingsley Ubah

Posted on β€’ Originally published at ubahthebuilder.tech

13 5

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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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
   }
Enter fullscreen mode Exit fullscreen mode
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!"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

YOU MAY ALSO LIKE:

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (1)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ β€’

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