ES6 Arrow Functions

#es6 #javascript #webdev #codenewbie

They are next-generation JavaScript syntax for creating functions.

Normal JavaScript function syntax:

function myFunc() {
    ...
}

ES6 fat arrow function syntax:

const myFunc = () => {
    ...
}

Why we prefer ES6 arrow functions?

They can shorten the JavaScript function syntax, since:

Omits function keyword
Solves a lot of issue with this keyword in JavaScript.
- this keyword is important when we add method to an Object.
- Arrow Functions bind their context and not change in runtime so this actually refers to the originating context.

Practice time!

function printMyName(name) {
    console.log(name);
}
printMyName('Meggie'); //Meggie

Rewritten as:

const printMyName = (name) => {
    console.log(name);
}
printMyName('Meggie'); //Meggie

We can also shorten the syntax more!

How?

If we’re passing only one argument, we can omit the parenthesis too to shorten the syntax.

const printMyName = name => {
  console.log(name);
}
printMyName('Meggie');

Similarly, see another function -

const multiplyNum = num => {
    return num*2
}
console.log(multiplyNum(5)); //10

If there’s only one line of code returning something, we can omit the curly braces {} and return keyword too, and bring the whole code in one line!

const multiplyNum = num => num*2;
console.log(multiplyNum(5)); //10

Conclusion

ES6 arrow functions are a new cool way to write JavaScript functions in less lines of code.

Top comments (6)

raddevus • May 12 '21

Nice article.

Here's maybe the main reason to implement an arrow function => Ability to define the function at the same place it is called.
This creates a good shortcut because there are many times when you have to pass a function to a method and instead of moving to another section in your code and typing up the function definition and then coming back to that place where you will call the function, you can simply define and call the function in the same location in your code.

Makes Code More Readable / Discovering Intent

This can also make the code easier to read because a reader of the code (who is attempting to determine what the code does) doesn't have to slide down to the function definition (away from the place where it is called) -- but can instead simply read what the function does right at the same place where it is called.