Javascript(ES6) Arrow Functions in a simple way:

wardov — Thu, 04 Jun 2020 16:29:11 +0000

Before digging into the code, we will start with the pros and cons of arrow functions.

Pros:

Keeping track of this keyword without using bind method
Making code concise
Shorter Presentation: what We mean by it is the fact that the Presentation of the code is shorter in volume, and for readability, it's a fantastic add-on to javascript.

Cons:

Confusing Rules and Syntax
Make code difficult to read Let's talk about the choice of const over let in the definition of a variable or function. Why? The simple reason is that with const we keep the value of the function untouchable. We will begin the discussion with the first example by creating an anonymous function(which has no name) in the old javascript syntax:

const sayHello = function(firstName,lastName){
return "Hello, " + firstName + " " + lastName }
console.log(sayHello("HoussameEddine","WARDI")) //Hello, HoussameEddine WARDI

Now, let's talk about Arrow Functions ES6 syntax with this example:

The first rule when we work with arrow functions, we remove the function keyword.
The second rule, we add the fat arrow symbol => between the function arguments and the body.
The third rule, if we have one line only in the body we can remove the curly braces and the "return" keyword. So, the final result will be as this:

const sayHello = (firstName,lastName) => "Hello, " +firstName+ " " +lastName

It gives us the same result, but you guessed that the code was concise and short.
Example 2:

const getStudentInfos = () => ({ age : 28,
fullName: "WARDI HoussameEddine"
})

We wanted in this example to return an object in the ES6 syntax , so, we conclude that we must add parentheses to the returned object as we saw in the last example.

Conclusion:

We saw in this article a great extent to javascript(ES6) that is Arrow functions and its pros and cons also;
some real examples of this new feature.
Thanks for reading the article, and if you have any questions related to the subject, LEAVE A COMMENT!

DEV Community: wardov

Javascript(ES6) Arrow Functions in a simple way:

Pros:

Cons:

Conclusion: