Javascript(ES6) Arrow Functions in a simple way:

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!

Comments

[Mike Talbot ⭐]

So I'm not convinced with defining functions with const you claim it's shorter - but that's because you've define the function version in a very odd way in your example.

const sayHello = (firstName,lastName) => { // 41 characters

Compared with

function sayHello(firstName,lastName) { // 39 characters

Plus I know the second one is a function. The first one is a const, not hoisted so I have to start caring about order and reading deep into the line to realise it is a function.

For me, the reason to use an arrow function is for capturing this or for defining an anonymous inline function:

   someArray.filter(a=>a.id.startsWith('$')) // this IS shorter and clearer

[wardov]

It's just a simplistic way to present an anonymous function the goal was to explain the arrow functions without talking about it in very detailed way but thanks for the reply.

[dan-simiyu]

Thanks for sharing