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