ES6 JS Features
Introduction
In this article, I will try to explain ES6 features which are also my favorite. When we learn something new, we need to use it more often to understand the concept better. In this period, it is possible to have uncertainty or even forget some specific parts. At least I live these moments in my learning process, and I often go back to the documents to review them again. I intended to make this article as simple as to understand the new concept with code snippets, and I tried to make it like a handbook.
Let and Const
We use variables to store data inside and to use them later.
let and const is a new way to define variables in JS.
Before ES6 we were using var. And still, It works, we can even use var to declare variables but not ideal anymore.
All variables which are declared with varare “hoisted” which means they are raised to the top of the function scope. While we use var, hoisting can be tricky if we are not aware of how it works.
In the below code, toDoWhenIsHungry prints out undefined, because both variables are hoisted at the beginning of function’ s scope, and we do not have access toDoWhenIsHungry inside the else block.
Actually, the previous code will be looking like below after it is hoisted.
Variables declared with let and consteliminates this issue, because they are scoped to the block, not to the function. With this behavior, variables can’t be accessed till to they have been declared.
If we use the same sample with constdeclaration, the output will be as below,
Rules
- Variables declared with
letcan be reassigned but can not be redeclared in the same scope. - Variables declared with
constcan not be reassigned and can not be redeclared in the same scope.
Spread operator
Shortly, the spread operator gives us the ability to expand iterable objects into elements and it is written with three ... consecutive dots.
When we have a function with multiple arguments, the spread operator comes in handy.
Below we have a simple function to print out multiple characters of a string, instead of hardcoding all arguments we can use spread operator.
On the other hand, we can use spread operator for array literals,
Another magical simplicity in object literals;
- We can get a copy of an object with the spread operator.
- We can go just one level deep, which means this won’t work on nested objects.
- We can get a key-value pair of an array.
- We can overwrite the main object’s property while we are creating a new one, but the order is essential while we are doing this, you can find out the difference in below code,
String Template Literals
Template literals are a new way to concatenate the strings.
We use backticks ` `instead of single or double quotes, and if we need to add an expression, we use ${expression} . With this method, it is easier to build the string blocks, and it boosts code readability.
Rest Parameters
The rest parameter is a new syntax which lets us use instead of multiple arguments as an array. Also, it is used with three... consecutive dots like in the spread operator.
Destructuring
The destructuring is a new way to extract data to the variables from arrays and objects. We have already been doing that in ES5, but now we can do the same with less code.
In the below snippet you can find out what we can do more with destructuring arrays and objects.
Lastly, I should mention the destructuring parameters. I had difficulties in getting used to it, but I think in the end it will make your life easier.
Conclusion
I hope that I achieve my primary purpose to make a helpful and straightforward article; I will update this article and add more features. Meanwhile, I drop below helpful links for the other useful ES6 features.
