Interesting Features Introduced in ES6

We know the javascript before ES6 and after ES6 are very different. ES6 was one of the significant updates in javascript.

Firstly, let us understand what ES6 is?

1. ES stand for ECMAScript
2. Javascript is updated regularly with new features, so keep track of each version they are defined with ESx
3. ES6 update was one of the major updates as it came with many new features which made the life of developers easy

Features Introduced in ES6

1. Variable (let & const)
2. Template Literals
3. Array Methods
4. For/of loop
5. Default parameters
6. Destructuring

let us discuss these

Variables (let & const)

Before ES6, we used to define variables in JS using the var keyword, which had its advantages and disadvantages.

• let allows you to declare a variable which is block scope and can be reassigned within its scope

  block scope - Scope in which the variable can access, in JS lines b/t { } are considered block scope

• const is used to declare the repeated fixed values in the code. They are generally declared in all Caps.

let radius = 10;
const pi = 3.14;

• In the above snippet, radius can be reassigned in its scope, but pi cannot be reassigned

Template Literals

Template literals allowed coders to embed a variable directly into a string instead of string concatenation. Syntax: wrap the strings in ` and wrap the variables in ${ }

Before ES6

var name = "Srikar";
console.log("Greetings " + name + "!");

After ES6

let name = "Srikar";
console.log(`Greetings ${name}!`);

Array methods

ES6 introduced many array methods which are abstractions of commonly used functions. Some of them are:

1. .map()
2. .findIndex()
3. .find()

there are many more checkout mdn, Javascript info

.map( )

The map method allows us to iterate over all elements and perform operations on each element and return a new array with updated elements.

let arr = [1,2,3,4,5,6];
console.log(arr.map( (value) => value + 1))
// output: [2, 3, 4, 5, 6, 7]

.findIndex( )

As the name suggests, findIndex method is used to find the index of an element in an array. findIndex takes a function as a parameter and returns the index of the first element which satisfies the function condition.

const evenNumber = (num) => num%2===0;
console.log([1,2,3,5,6,7,8].findIndex(evenNumber));
// output: 1
console.log([1,3,5,7].findIndex(evenNumber));
// output: -1

.find( )

Find method is very similar to findIndex method. It takes a function as a parameter and returns the first value which satisfies the function condition. If no element is found, it returns undefined.

const evenNumber = (num) => num%2===0;
console.log([1,2,3,5,6,7,8].find(evenNumber));
// output: 2
console.log([1,3,5,7].find(evenNumber));
// output: undefined

For/of

For/of is a way of writing a for loop to access the values of an array or object.

Before ES6

let arr = [1,2,3]
for(var i = 0;i < 3; i++){
    console.log(arr[i]);
}

After ES6

let arr = [1, 2, 3];
for(let i of arr){
    console.log(i);
}

Default Parameters

Suppose we want functions to be dynamic and want to assign a default value to them. Default parameters can only be given to the end parameters only, i.e., a mandatory parameter cannot occur after a parameter with a default value.

syntax:

function areaOfCircle(radius, pi=3.14){
   // code
}
function fun1 (param1, param2, param3 =10, param4 = 20){
    //code
}

Destructuring

Destructuring is a way to assign a nested value of an array or object to a variable.

In arrays:

let arr = [1, 2, 3, 4]
const [a, b] = arr;
console.log(a,b); // 1, 2
const [,, c, d, e] = arr;
console.log(c, d, e); // 3, 4 ,undefined

In Objects:

let obj = {
name: "Srikar",
address : {
city: "Bangalore" 
}
}
const {name , address :{city}} = obj;
console.log(name, city)

Conculsion:

ES6 is one of the significant updates to JS, and many features were added to it. You can check them out here

Resources:

1. mdn
2. javascript.info
3. devdocs
4. tc39