Learning the Arrow Function Game.
Understand what arrow functions are and when it’s best to use them.
When Javascript ES6 was released in June 2015, it brought the introduction of arrow functions to the developer game. While there are many similarities between ES5 functions and ES6 arrow functions in this blog we will compare and contrast the two.
What is an arrow function?
Like a traditional function in Javascript, an arrow function will allow you to take in an input, perform some task or calculate a value, then return an output where there is an obvious relationship between the input and output.
Basic Syntax of an arrow function
- One parameter input, and one simple expression. No return statement is needed here.
- Multiple parameter inputs require parenthesis, still, with a simple expression no return statement is needed
- Multi-line statements require a code block body and a return statement
Traditional ES5 Function VS. ES6 Arrow Function
See the syntax below for the arrow function helloCat VS. the ES5 function heloOtherCat.
One of the major differences in the two functions type is of course syntax. From our above example see the ES6 arrow function helloCat() is cleaner and more concise, with less code.
Take a look at another example comparing the two functions type. See how concise and clean the numbersES6() arrow function is.
Scope
- ES6 Arrow functions take their values from their surroundings, their lexical scope
- ES5 functions take their scope from their context
Conclusion
Thank you for reading and I hope this gave you some clearer ideas of what arrow functions are and how they can be syntactically written.
