Javascript ES6 features

Introduction

What is ES6?

JavaScript ES6 also known as ECMAScript 2015 or ECMAScript 6 is the newer version of JavaScript introduced in 2015. ECMAScript is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers. ES2022 will be the upcoming release.

Why ES6?

ES6 brings major changes to syntax to make code more readable.
ES6 introduces us to many great features like arrow functions, template strings, let and const for variable declaration, etc.
ES6 is a feature-rich advancement to ES5 and is 100% backward compatible. Code written in ES5 can be switched to ES6 features with ease.

ES6 Features

Lets dive into the most used ES6 features now.

let and const for varioable declaration Prior to ES6,variables had to be declared using var keyword only.
- You can’t reassign another value to the constant variable. This is a good way to write less error-prone code.
- Variables declared using const is immutable except when it used with objects.
```
var age; //valid
const birthdate; //error
```
The variables declared using let are block-scoped. This means variables are accessible within a particular block denoted by {}.
```
let year = 2022;
{
  let month = 6;
  console.log(month)
}
console.log(month) //not accessible since month is inside a block ({})
```

Arrow functions

The arrow function makes code more readable, more structured
In ES5, functions and function expressions are created as shown below

    /** traditional function */
    var printName(name) {
        return "Hello" + name;
    }

    /** traditional function expression */
    var compensation = function(age) {
        return age > 25 ? 50000 : 100000;
    }

in ES6, it can be written as below

    let greet = (name) => "Hello " + name;
    let compensation = (age) => age > 25 ? 50000 : 100000

Template literals
- Template literals are enclosed by backticks (``) instead of double or single quotes
- Template literals is very useful when we want to interpret variables and embedded expressions inside an expression with strings or concatenate strings without using + operator.
- Expressions/variables to be evaluated is placed in ${expression}, ${variable}
```
//ES5
    var price = 2000;
    console.log("The price is Rs." + price)
```
```
//ES6
const price = 2000;
console.log(`The price is Rs.${price}`) // The price is Rs.2000
```

Destructuring Destructuring in JavaScript is a simplified method of extracting multiple properties from an array/object.

Object destructuring

    const country = {
        name: "India",
        capital: "Delhi",
    }

Suppose we want the value of the country name, then in ES5

    const countryName = country.name;

In ES6

    const {name} = country;

Note: If you assign a variable that is not identical to the key, it will return undefined.

    const {myName} = country; //myName is undefined

To rename variable, we can use colon along with key name as shown below

    const {name: myName} = country; // India

Array destructuring The syntax is same as an object but instead of curly braces, square brackets are used for an array

    const categories = ["Shoes","Shirts","Goggles"];
    const [category1, category2, category3] = categories;
    //category1 = "Shoes", category2 = "Shirts", category3 = "Goggles"

Default parameters in functions

Suppose you missed passing argument to a function, the parameter will be undefined. So, to avoid undefined getting into code and giving unpredictable results, we can initialize values to parameters value using = as shown below

    const myAge = (name, age) => {
       return `${name}'s age is ${age}`; //age is undefined
    }

    console.log(myAge("Meghana")); //Meghana's age is undefined

With default parameters, even though the second parameter is missed in function invocation, 22 is taken as the default value

    const myAge = (name, age = 25) => {
       return `${name}'s age is ${age}`; //age is undefined
    }
    console.log(myAge("Meghana")); //Meghana's age is 22

Rest parameter and spread syntax Rest parameter represents an indefinite number of arguments as an array.

Rest parameter - Remaining arguments are passed using ... syntax.

    const printShoeDetails = (name, price, ...restParams) => {
        console.log(name, price); //Adidas, 8000
        console.log(restParams); // ["Black", 7.5, 2022]
    }

    printShoeDetails("Adidas", 8000, "Black", 7.5, 2022)

Spread syntax - Spread syntax ... used to copy the items into a single array

    const array1 = [1,2,3]
    const array2 = [4,5,6]
    const array3 = [...array1, ...array2] // [1,2,3,4,5,6]

To array3, a copy of array1 values and array2 values are unpacked and copied together.

Conclusion

ES6 gives rich and easy-to-use features and makes code more readable. There are plenty of other features in ES6 related to Promises, Classes. exports and imports as well.

Until next time :)

Meghana S K's Blog