Categories
Javascript

The Ingenious Way To Define Functions Using Arrow Functions : JavaScript

Arrow functions are introduced in ES2015 in JavaScript to provide a simple and concise way to create function. They are used as an alternative to function expression

Arrow functions were introduced in ES2015 in JavaScript. They provide a simple and concise way to use functions. In other words, the arrow functions are more or less used as an alternative to function expressions.

Template For Arrow Function

let func = (arg1, arg2, arg3..) => expression

Arrow function as name suggests, use arrow like expression ‘=>’ for function definition. The arrow functions are used as a replacement to the old way of function expression. Most of us are aware of the old way that is generally used by developers to define a function. To explain this concept in detail, let’s consider below code that shows the old template of function definition :-

let func = function(arg1, arg2,..) {
      expression;
}

Various Ways To Implement Arrow Function

Let’s create a simple arrow function which returns the square of the value “val” passed as a function argument :-

let square = (val) => {
    return val*val;
}

From the above code we can easily infer the function argument “val” passed in circular parenthesis and the subsequent arrow function. In addition to that, we can further optimize this code by removing the circular parenthesis if function takes only one argument.

let square = val => {
    return val*val;
}

Let’s further simplify the above mentioned approach. As evident, the function defined by us only has one expression. Whenever such a scenario occurs, we don’t need to use the return keyword explicitly. In other words, the arrow function will inherently know to return the evaluated expression value.

let square = val => val*val

Moreover, if we have no requirement to send a function argument then we can simply avoid providing an argument. That is the arrow function doesn’t take any arguments hence we can simply use empty parenthesis ().

let greet = () => {
    console.log('Hello World!');
}

Multiline arrow function

Most of the times we have functions that expand to multiple lines. Until now we have defined functions that had only one expression. But lucky for us, we can write the any number of expressions and logic in the arrow function. And so, we can use the same template which expands to multiline expressions exactly the same way.

In order to get a better understanding, please refer below illustration :-

let add = arr => {
    let result = 0;
    for (const num of arr) {
        result += num;
    }
    return result;
}
add([1, 2, 3, 4, 5]) // 15

Arrow functions As Callbacks

Have you ever used arrow functions as callbacks ?

Whenever we need to provide a callback to a function, we generally define a function within the {} curly braces. However, with arrow functions in the picture; we can easily use them as callback functions.

To demonstrate this concept let’s refer the below code. Here, the filter() function takes a callback. In short, the callback function is executed on every element of the array and the result is returned.

Below example helps us find the even numbers from an array :-

let arr = [23, 12, 45, 10, 35, 40]
// using function expression
let evenNumber1 = arr.filter(function(num){
    return num % 2 == 0;
})
// using arrow function

let evenNumber = arr.filter(num => num % 2 == 0)
console.log(evenNumber1); // [12 10 40]

console.log(evenNumber2); // [12 10 40]

Conclusion

To conclude, the arrow functions were introduced as an easy alternative to the commonly used function expressions.

As evident from the above code, using arrow function proves to be more elegant and concise.

Although there are some facts that should be considered whenever you choose to implement arrow functions :-

  • Firstly, it is better to use arrow functions only when your code has a simple logic.
  • Secondly, don’t use arrow function if your function is complicated or it calls other functions to accomplish the task.
  • Lastly, using anonymous function makes it difficult to debug your code. Since they don’t have a name and getting information from call stack is difficult as well.

Hope you have enjoyed reading this article.

Good Luck and Happy Coding.

Let the author know what's in your mind !!

This site uses Akismet to reduce spam. Learn how your comment data is processed.