JavaScript ES6 Basics
By: Lochana Vishwajith
Tags: Spread, Maps, JavaScript, ES6

What is ES6?

ES6 stands for ECMA Script 6 which was introduce in 2015. It also known as ECMAScript 2015. It is a significant update to the JS(Java Script) which gives new syntaxes and new features to make your code more readable and understandable. ES6 brings many new features like arrow functions, class destruction, modules, spread operator and more.

Let’s take a look about basics of ES6.

01. CONST and LET

The main difference between CONST and LET is, CONST is immutable. It means once a variable is declared using CONST, the value cannot be changed. But LET value can be changed any time. In other words LET is mutable.

Once an object is created using the CONST key word, property values of the objects can be changed even the object has been created using CONST.

And an array can be updated even the array has been declared using CONST keyword.

02. Arrow functions

Arrow functions make our code more readable, structured and understandable. It provide us to write function expression in shorter way compared to the ES5.

Line 22–24 : It indicates a normal function

Line 26 : In this line shows an arrow function. Since it has only one parameter, no need to have () around the name parameter. Since it has only one line, no need to have {}.

Line 28–31 : In this line also shows an arrow function which accepts two parameters.

Line 33 : Call the arrow function which is defined in line 26

Line 34 : Call the arrow function which is defined from line 28–31

03. Foreach

Foreach loop is used to iterate through an array.

04. Filter

Filter is used to return an array and filter things out. If we want to delete something using redux we use this method.

‘people’ is an array which stores 3 objects. The people array is immutable. So that we cannot change the state directly.

Assume that you want to delete Saman which has id is equal to 1. In order to do that, we have to create another array without Saman. In order to remove Saman we use filter method.

Line 62 : In this line we create an array named as people2. Then we call the filter() method on the people array and return objects to the new array without the object which id equals to 1.(person1 => person.id !== 1 is an arrow function which has only one parameter and one line)

05. Spread

The spread operator is used to copy elements or objects to other place from one place. This reduces the repetition of objects and elements in the code.

Line 70 : create an array with 3 elements

Line 71 : define an array named as arr2 and copy the elements in the arr1 into arr2 array and add one extra element. Now arr2 array has 4 elements(1,2,3,4). (…arr1 is the spread operator).

Line 74 : filter the element 2 and save other elements in arr3

Line 77 : define an object called p1

Line 82 : define an object called p2

Line 83 : copy the attributes of the p1 object into p2 object

Line 84 : add another attribute called email to the p2 object. Now p2 object has all 3 attributes: name, age and email

06.Destructuring

Destructuring is used to assign the properties of an array or object to variables by using a syntax.

Line 93 : create an object called profile which stores myName , adddress , and array of hobbies

Line 102 : fetch the property called myName in profile object

Line 105 : fetch the property called myName, address and hobbies in profile object

Line 108 : fetch the property called street which is inside of address object in profile object

07. Classes & Sub classes

In ES6 we can use class keyword to create classes.