DEV Community

Cover image for ES6 Arrow Functions
Meggie
Meggie

Posted on

ES6 Arrow Functions

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.
Happy Comic Face

Top comments (6)

Collapse
 
raddevus profile image
raddevus

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.

Collapse
 
thepracticaldev profile image
dev.to staff

Nice concise overview.

Collapse
 
hellomeghna profile image
Meggie • Edited

Thank you! I'll keep sharing my tidbits here.
I loved the markdown editor on this platform!

Collapse
 
afewminutesofcode profile image
Aaron

Thanks for sharing Meggie! I was thinking the same thing the markdown editor is amazing!

Collapse
 
pawan profile image
Pawan Mall

Using it lot of time in my code and it is really a time saviour

Some comments may only be visible to logged-in visitors. Sign in to view all comments.