JavaScript ES6 Features

JavaScript has progressed a ton in recent years. If you are learning JavaScript in 2022 and you have not touched ES6, you’re missing out on an easier way to read and write JavaScript. 😋

We as developers must be trying to use the best tools and features in our disposition to make our job easy and efficient.

What is ES6?? 🧐

ES6 is just a syntactical change in JavaScript.
ECMAScript is the standard that the JavaScript programming language uses. ECMAScript provides the specification on how JavaScript programming language should work.
JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6) is the newer version of JavaScript that was introduced in 2015.

Why ES6?? 😋

It brings many engrossing features that were absent in the earlier versions, such as ES5. For example, let and const kind features.
ES6 makes the coding process faster as the developer has to write fewer lines of code, which will run faster.

In this blog, we will discuss some of the best and most popular ES6 features that we use everyday in JavaScript coding.

Now let’s discuss some New ES6 features 🤩

let and const
Arrow function
Template Literals
Multi-line Strings
Spread Operator
Import and Export Statements
Default parameter
*Destructuring*

Let’s Start 😍 😍 😍

1. let and const

const variable can not be re-assigned, it will give an error. Which means const variables are immutable.
let variables can be changed and re-assigned a new value, they are blocked scope i.e. the scope of the variable is only within the blocks.

let value=19;
value=18;

2. Arrow function

Arrow functions are the same as the regular functions but with a better syntax that is more readable and structured.
It provides a more concise syntax for writing function expressions by removing the "function" and "return" keywords.
Arrow functions are defined using the arrow (⇒) notation.

//ES5
function myFunction(){
      console.log("hello");
}
//ES6
const myFunction = () => {
     console.log("hello");
}

3. Template Literals

Template literals (template strings) allow you to use strings or embedded expressions in the form of a string.
It is a simple way of string concatenation.
For concatenation, earlier for ES5 we use (+) operator but in ES6 they are enclosed in
```
backticks **` `**
```
We can use a new syntax ${PARAMETER} inside of the back-ticked string.

EXAMPLE

ES5

let myName = 'pankaj';
console.log("My name is " + myName); // My name is pankaj

ES6

let myName = 'pankaj';
console.log(`My name is ${myName}`); // My name is pankaj
//string substitution

var greeting = `\`hello\` World!`;

4. Multi-line Strings

ES6 also provides Multi-line Strings.
You can create multi-line strings by using back-ticks(`).
Before ES6, you use the following technique to create a multi-line string by manually including the newline character ( \n) in the string and (+) plus operator.

Example

ES5

let message=`Before ES6, you use the following technique to create 
             a multi-line string by manually including the newline 
             character ( **\n**) in the string and (+) plus operator.`

ES6

let message='Before ES6, you use the following technique to create \n' 
           + 'a multi-line string by manually including the newline\n' 
           + 'character ( **\n**) in the string and (+) plus operator.'

The output of both these programs will be the same.

output
             Before ES6, you use the following technique to create 
             a multi-line string by manually including the newline 
             character ( **\n**) in the string and (+) plus operator.

5. Spread Operator

ES6 provides a new operator called spread operator that consists of three dots (...)
Spread Syntax (...) allows an iterable such as an array or a string to be expanded in other variables.
The spread operator allows you to spread out elements of an iterable object such as an array , map, or set.

Example

Copy Array Using Spread Operator

const arr1 = ['a', 'b'];
const arr2 = [...arr1, 'c', 'd', 'e'];

console.log(arr2); 
//  Output:
//  ["a", "b", "c", "d", ""]

6. Import and Export Statements

With the help of ES6, we can create modules in JavaScript. In a module, there can be classes, functions, variables, and objects as well.
To make all these available in another file, we can use export and import.
Using import and export statements make the JavaScript application more easy and dynamic.
These statements allow you to create re-usable code and you can separate file so that the code is not clustered.
As the name suggests export lets you export the file/module to another JavaScript file.
import lets you import that module into the JavaScript file.

Example

'.src/function'
export function double(n){
    return n*2;
}

import {double} from '.src/function'; //import double function 
console.log(double(5));//10

You can re-use the function in different components in this way.

7. Default parameter

In JavaScript, a parameter has a default value of undefined. It means that if you don’t pass the arguments into the function, its parameters will have the default values of undefined.
So to reduce error you can give initial or default value to the parameter.
But, in ES5, OR operator had to be used.

Example

function say(message) {
    console.log(message);
}

say(); // undefined

function say(message='Hi') {
    console.log(message);
}

say(); // 'Hi'
say('Hello') // 'Hello'

The default value of the message paramater in the say() function is ’Hi’.

8. Destructuring

Destructuring is one of the most popular features of ES6.
The destructuring assignment is an expression that makes it easy to extract values from arrays, or properties from objects, into distinct variables.

ES5

// assigning object attributes to variables
const person = {
    name: 'pankaj',
    age: 21,
    gender: 'male'    
}

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // pankaj
console.log(age); // 21
console.log(gender); // male

ES6

// assigning object attributes to variables
const person = {
    name: 'pankaj',
    age: 21,
    gender: 'male'    
}

// destructuring assignment
let { name, age, gender } = person;

console.log(name); // pankaj
console.log(age); // 21
console.log(gender); // male

Was this article helpful for you? Let me know in the comments section if you have any questions or thoughts! I would love to hear them. 😊

ES6 Features: write less, do more

Comments

Javascript Basics

JavaScript Array Methods Detailed Review of forEach() ,map , filter() and reduce()

More from this blog

Say No to Create React App!

Getting Started with NodeJs

Best Practice To Manage Folder Structure For React.js

JavaScript Array Methods Detailed Review of forEach() ,map , filter() and reduce()

What is ES6?? 🧐

Why ES6?? 😋

Now let’s discuss some New ES6 features 🤩

1. let and const

2. Arrow function

3. Template Literals

4. Multi-line Strings

5. Spread Operator

6. Import and Export Statements

7. Default parameter

8. Destructuring

Command Palette

Comments

Javascript Basics

JavaScript Array Methods Detailed Review of forEach() ,map , filter() and reduce()

More from this blog

What is ES6?? 🧐

Why ES6?? 😋

Now let’s discuss some New ES6 features 🤩

1. let and const

2. Arrow function

3. Template Literals

4. Multi-line Strings

5. Spread Operator

6. Import and Export Statements

7. Default parameter

8. *Destructuring*

8. Destructuring