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:
Top comments (1)
In your section on modules, you have omitted the file extension on the import filename - this code will not work