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…


This content originally appeared on DEV Community and was authored by Kingsley Ubah

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:


This content originally appeared on DEV Community and was authored by Kingsley Ubah


Print Share Comment Cite Upload Translate Updates
APA

Kingsley Ubah | Sciencx (2021-08-19T15:05:54+00:00) 7 ES6 Features all JavaScript Programmers Should Learn to Use. Retrieved from https://www.scien.cx/2021/08/19/7-es6-features-all-javascript-programmers-should-learn-to-use/

MLA
" » 7 ES6 Features all JavaScript Programmers Should Learn to Use." Kingsley Ubah | Sciencx - Thursday August 19, 2021, https://www.scien.cx/2021/08/19/7-es6-features-all-javascript-programmers-should-learn-to-use/
HARVARD
Kingsley Ubah | Sciencx Thursday August 19, 2021 » 7 ES6 Features all JavaScript Programmers Should Learn to Use., viewed ,<https://www.scien.cx/2021/08/19/7-es6-features-all-javascript-programmers-should-learn-to-use/>
VANCOUVER
Kingsley Ubah | Sciencx - » 7 ES6 Features all JavaScript Programmers Should Learn to Use. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/19/7-es6-features-all-javascript-programmers-should-learn-to-use/
CHICAGO
" » 7 ES6 Features all JavaScript Programmers Should Learn to Use." Kingsley Ubah | Sciencx - Accessed . https://www.scien.cx/2021/08/19/7-es6-features-all-javascript-programmers-should-learn-to-use/
IEEE
" » 7 ES6 Features all JavaScript Programmers Should Learn to Use." Kingsley Ubah | Sciencx [Online]. Available: https://www.scien.cx/2021/08/19/7-es6-features-all-javascript-programmers-should-learn-to-use/. [Accessed: ]
rf:citation
» 7 ES6 Features all JavaScript Programmers Should Learn to Use | Kingsley Ubah | Sciencx | https://www.scien.cx/2021/08/19/7-es6-features-all-javascript-programmers-should-learn-to-use/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.