7 ES6 Features all JavaScript Programmers Should Learn to Use
Tags: javascript, webdev
Published: 2021-08-19 15:05:54

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

```js
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
```

```js
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.

```js
/* 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

```js
// 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.

```js
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
   }
```

   
```js
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.

```js
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

```js
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

```js

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?](https://ubahthebuilder.tech/user-authentication-vs-user-authorization-what-do-they-mean-in-back-end-web-development)

- [Prototypal Inheritance Explained](https://ubahthebuilder.tech/what-are-object-prototypes-explaining-prototype-inheritance-in-a-simple-way)