DEV Community

Catchthembodies
Catchthembodies

Posted on

Gettin Started With (Arrow)=> Functions

Image description
Arrow Function! are an amazing and new way to write functions in the Javascript Language. Arrow functions are different from the tradition functions in many ways, including the way their scope is determined and how their syntax is expressed. This incredible way of approaching functions was added in 2015, is a new way to write anonymous function expression and is very similar to Lambda function in other languages, like Python. In this post, I will show you how to use arrow functions and when to use them. Personally, I try to use them whenever I get the chance since it just makes your so much cleaner and easier to interpret. A normal function would look something like this:

var sum = function(a, b) {
return a - b;
}
sum (2,1) // result = 3

Where as an arrow function would appear in your code as:

const sum = (a, b) => a - b;
sum(2,1) // result = 3

Arrow function can also be written in one-liners which is just incredible and makes the code more readable. Also when the function only has one line it automatically has a default return.

Two Main Benefits of Using Arrow Functions

  • A much shorter syntax than your typical functions
  • There is no bing of this

Arrow Functions Parameters

With Arrow function parameters, you must realize that the number of parameters affects the syntax of the arrow function. For example, if I have:

0 parameters:
() => { statements }
Since we had 0 parameters, we end up using an empty parenthesis. Where as:

1 parameter:
parameter => { statements }
If we only have one parameter, we can just leave out the parenthesis around the parameter from the arrow function.

2+ parameters:
(param1, param2, paramN) => { statements }

Arrow Function Return

Arrow functions have a built-in to short the return syntax: “If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword. This tells the arrow function to return the statement.” (https://codeburst.io/javascript-understand-arrow-function-syntax-ab4081bba85b?source=social.tw)
Lets look at how to use the benefit of arrow function when returning, this is a function expression:
let greet = function(parameters){
return expression }

This function expression is shortened to:
let greet = (parameters)=> expression

Main Takeaways:

  • Arrow functions are useful to many developers and is one of the most used features of Javascript since it can help the developer to finish the same task with very minimal code.
  • Arrow function end up providing different syntax for different number of parameters. (no parameter, 1 parameter, 2+ parameters)
  • If we return a single-line of code from arrow function, discarding out the brackets and return keyword will end up with the remaining statement.

Conclusion

To conclude this blog, I would like to say that arrow function are an amazing asset to a developer, planning on utilizing map/reduce/filter functions. It also handles well with Promises and Callbacks.

Top comments (0)