# ES6 Features: write less, do more

<aside>
💡 “So if you want to go fast, if you want to get done quickly, if you want your code to be easy to write, make it easy to read.” **-By** **Robert C. Martin**

</aside>

**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.

<aside>
💡 **ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming language. ES2015 is often called ES6.**

</aside>

## 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.

<aside>
💡 In simple terms, ES6 can be said as a version update of JavaScript, where some new syntax and features have been introduced.

</aside>

## 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 🤩

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***** 

**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.

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

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

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

**ES6**

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

<aside>
💡 ***Note:*** If you require backticks inside of your string, it can be escaped using the backslash character **\** as follows:

</aside>

```jsx
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**

```jsx
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**

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

```jsx
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**

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

<aside>
💡 The thumb rule is, in order to **import** something, you first need to **export** it.

</aside>

**Example**

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

```jsx
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**

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

say(); // undefined
```

```jsx
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**

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

```jsx
// 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
```

<aside>
📌 **SUMMARY: Woo! That’s almost all the awesome new ES6 features I use on a regular basis. ES6 is awesome. It’s definitely worth it to take a bit of your time and learn about them, so you can understand what everyone else is writing about.                                      I Hope, you learned something new from this article.                                                                                       Thank you for reading this blog….!!!**

</aside>

**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.** 😊