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
{}
andreturn
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)
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.
Nice concise overview.
Thank you! I'll keep sharing my tidbits here.
I loved the markdown editor on this platform!
Thanks for sharing Meggie! I was thinking the same thing the markdown editor is amazing!
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.