Hello Javascript: Basic ES6 features
So, what’s new with the ES6 features that you must know in JavaScript.
Let’s see them here without wasting much of your time.
The ES6 provides us so many cool features which are good for developers life. I will explain to you a few features which I like during development. I am sure you will also like if you will be understood properly.
let and Const
ES5 provides us var for declaring the variable in JavaScript but ES6 provides use let and const, 2 new identifier for variable declaration. They both have block scope. Now the question is,
what is the difference between const and let?
So as name suggests, const means constant which means if we are assigning a variable with const keyword we can’t reassigned and re-declare it in the same scope.
If we are assigning a variable with let keyword, it can be reassigned but can’t be re-declared in the same scope.
Arrow Function-(=>)
Syntax-:
An arrow function is the new syntax of writing function in JavaScript, which is also called fat arrow function. This function makes our code more neat and clean.
Let's see ES5 syntax
ES6 syntax
now, we know syntax difference !!
If we are using one argument in our function we do not need the braces.
example:
If we are using more than one argument we need braces.
example:
No binding & Conclusion of this:
If we are using arrow function, we do not need to bind a function with this keyword.
In ES5 function, this keyword is bound with different values based on the calling of the function. With arrow functions, however, this is functionally bound. It means that it uses this context from the code that contains the arrow function.
Destructuring -
Destructuring is also a very powerful concept of ES6 It is a new syntax for accessing the value from object and array.
Object Destructuring-
lets we have an object
If we want to access the name and surname of the person object we need to do something like this-
But in destructuring, you can do something like this-
Lets see one more example with nested object-
Array Destructuring-
ES5 way of accessing values from an array-
Now we will look same example with destructuring.
During destructuring, we do not need to create two different variables for accessing 2 different values. Destructuring makes our code more readable.
Spread Operator:
The spread operator is also a great feature of ES6. The syntax of the spread operator looks like (…value). Now, what is this operator and where we can use it?
As the name suggested spread, When {…} comes in a function call, it expands or spread an Array into a list.
Maybe it’s not making sense right now, we will see some examples for better understanding.
Now we will see the same example with spread operator.
Now spread operator make sense right?
Let's see we want to add 5 numbers of an array:
If we call same function with spread operator will look like
Lets check one more example -
If you want to add 2 arrays in JavaScript, then there are various methods to do that, one of them is concat.
Example:
Same thing we can do with spread operator
So, finally we know some of the concepts of ES6 in JavaScript. More things are coming up in this in our latest posts exclusively for you.
Thanks!
Be Updated
Be Attentive
I Write
You Share
Writenshare
