ES6 Arrow Functions in JavaScript

Arrow functions are new alternative way to create functions in JavaScript. Arrow function expression were introduced in ES6.

Arrow functions actually allow us to create shorter function syntax compared to regular functions. Also Arrow function do not have their own binding of this for all the difference of regular and arrow functions read Difference between ES6 Arrow functions and Regular functions in JavaScript

Regular functions

function hello(name) {
  console.log(name);
}

We also write function as like below

const hello = function(name) {
  console.log(name);
}

Convert regular function to Arrow function

Time to convert your regular function to Arrow function expression

// removed function and added Arrow after argument
const hello = (name) => { 
  console.log(name);
}

Yes, now we created Arrow function. No more need to add function keyword in your JavaScript functions.

Different type of Arrow function declaration

Now again we going to short function expression.

Arrow Function without argument

const hello = () => { 
  console.log("Welcome");
}

Arrow Function with One argument

const hello = (name) => { 
  console.log(name);
}

// You may omit the parentheses for single argument

const hello = name => { 
  console.log(name);
}

Arrow Function with multiple argument

const hello = (a, b, c, d) => { 
  console.log(a);
}

Arrow function get more shorter if your function just return a value

Arrow Function with return value

const hello = name => name;

const hello = () => "Welcome";

That’s equal to

const hello = name => { 
  return name;
}

const hello = () => { 
  return "Welcome";
}