ES6 & ES7 & ES8 Features

ES6 & ES7 & ES8 Features

1- ) Arrow Functions

Arrow functions allows us to do more things with less code.

Arrow

In the above example, we didn’t use any curly brackets nor return statement.

But we returned the sum of two arguments.

2- ) Default Params

Default params allows us to use a default value if an argument is not given when the function is called.This way we can handle error.

Arrow

Arrow

3-) Destructuring Arrays

Array destructuring allows us to give indexes a name. We can use that name to access that index’s value and change it.

Arrow

4-) Destructuring Objects

Object destructuring allows us to store an object’s property’s value to a variable without giving the property’s name.

Our variable’s name must be the same with the property’s name.

Arrow

Arrow

We can also use that value with a different name as shown in the above example.

5-) For of Loop

With for of loop we can use every element in an array in order.

Arrow

But it is not built for changing the current element.

6-) Import & Export

Import and export allow us to use variables that are declared in another file.

The variable must be exported first. Only then it can be imported.

Arrow

7-) Includes

Include operation lets us decide whether an array has an element or not.

Arrow

😎 Let & Const

If we want to change the variable we must declare it as let. If it’s going to stay

the same value we initialize, we must declare it a const.

However, when dealing with arrays and objects, even if it’s a constant, we can change the property value by array methods( push, pop etc..) or we can change the properties of object by simply calling object.attribute = value, but we can not reassign the whole object.

Arrow

Arrow

In the above examples, I tried to reassign the constant object and array. Then i got error.If it was let instead of const, we could easily reassign it.

Arrow

9-) Object Literal

Object literal is similar to destructuring object.If the variable and the property has the same name we dont need to mention the name two times. It will still give us the same result.

Arrow

Arrow

10-) PadStart & PadEnd

PadStart and PadEnd is used for adding certain characters to a string’s end or start, until the new string reaches a certain amount of characters.We can specify the amount. If we dont give any character set to fill with, it will fill the string with spaces.

Arrow

Arrow

11-) Rest

In a function, if we have more than 1 argument and we want to see them as an array, we can use the rest operator.And it gives us the arguments in order.

Arrow

12-) Spread

Spread operation lets us concatenate arrays easily.

Arrow

13-) Template Literals

Template literals allows us to modify the string without worrying about newLines and tabs.

They are displayed exactly the way you write them.

Arrow

In the above example, I skipped a line before and after the firstName.This way I created a blank line without writing “\n”.

Thank you for reading. Hope I could help you understand some stuff.

We will publish another document like this about classes, async&await, set.

So follow us at linkedin and here to be updated 🙂