Welcome Guest! (App Version 3.1)

websitnero logo name

Arrow Function

Arrow Function

Arrow Function is the new tool from ES6. There are various benefits of using arrow function - 1) It has shorter syntax 2) The scope is consistance to context from where it was called, etc.

Also, when the function does only little change then the code is even one liner.

To understand look at the following differences:

Old Function:

alpha = function(age){
  age = age+10;
  return age;
}

Arrow Function:

alpha = age => age+10

Explaination:When there is only one parameter in the function that is passed, you don't even need braces around it. And if return is simple entry that can be written in one single line, you don't even need to write return keyword. Here "age+10" is in same line as arrow function starts and ends, so you don't need to write keyword 'return', the compiler will assume it and compile to ES5.

Arrow Function with No (zero) parameters

In case there is no parameter to be passed to arrow function, you still have to put a bracket that has to be empty, but you cannot skip it. Look at the following example:

Old Function:

function alpha(){
  return ("good morning");
}
console.log(alpha());

Output: "good morning"

Arrow Function:

alpha = () => "good morning";
console.log(alpha());

Output: "good morning"

Arrow Function with 1 parameter

When there is only one parameter then the brackets may be removed (it is optional, the bracket can be put or removed).

Old Function:

alpha = function(age){
  return age + 3;
}

Arrow Function:

alpha = (age) => age+3;
OR ...
alpha = age => age+3;

Arrow Function with 2 or more parameters

In such a case you would need to definitely put brackets and put parameters or arguments inside them.

Old Function:

alpha = function(a, b, c){
  return (a + b - c);
}

Arrow Function:

alpha = (a, b, c) => (a + b - c);

Arrow Function having multiple lines

Sometimes the function is bigger and it cannot be just adjusted into 1 line. In such a case arrow function will split into mutliple lines and return keyword will be required if you want the function to return something. Unlike the earlier case, if the function is spreading into multiple lines you cannot escape the return (can only do so in case arrow function is one liner) and have to use the keyword to return something.

Look at the following example to understand it better:

alpha = (name, age) => {
  if (age >= 18) {
    return (name + " can vote");
  }
  else{
    return (name + " cannot vote");
  }
}
console.log(alpha ("John", 29));
console.log(alpha ("Rosy", 17));

Output: "John can vote" and "Rosy cannot vote"

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.