why we use arrow function in javascript code example

Example 1: js anonymous function es6

// (param1, param2, paramN) => expression

// ES5
var multiplyES5 = function(x, y) {
  return x * y;
};

// ES6
const multiplyES6 = (x, y) => { return x * y };

Example 2: javascript arrow function

// Non Arrow (standard way)
let add = function(x,y) {
  return x + y;
}
console.log(add(10,20)); // 30

// Arrow style
let add = (x,y) => x + y;
console.log(add(10,20)); // 30;

// You can still encapsulate
let add = (x, y) => { return x + y; };

Example 3: arrow function javascript

//If body has single statement
let myFunction = (arg1, arg2, ...argN) => expression

//for multiple statement
let myFunction = (arg1, arg2, ...argN) => {
    statement(s)
}
//example
let hello = (arg1,arg2) => "Hello " + arg1 + " Welcome To "+ arg2;
console.log(hello("User","Grepper"))
//Start checking js code on chrome inspect option

Example 4: arrow function javascript

// An empty arrow function returns undefined
let empty = () => {};

(() => 'foobar')();
// Returns "foobar"
// (this is an Immediately Invoked Function Expression)

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);
// 66

var even = arr.filter(v => v % 2 == 0);
// [6, 0, 18]

var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// More concise promise chains
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

// Parameterless arrow functions that are visually easier to parse
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);

Example 5: how to make javascript function consise

multiplyfunc = (a, b) => { return a * b; }

Example 6: arrow function javascript

/* Answer to: "arrow function javascript" */

// Single-line:
let testingFunc(string) => string == "Test" ? "Success!" : "Failure!";
console.log(testingFunc("test")); // "Failure!"

// Multi-line:
let arrowFunc(string) => {
  if (string = "test") {
    return "Success!";
  }
    return "Failure!";
  }
};
console.log(testingFunc("Test")); // "Success!"

/*
  Arrow functions in JavaScript are like regular functions except they look
  look nicer (imo) and there's single-line version of it which implicitly
  returns.
  
  Here's a guide showing the differences between the two:
  https://medium.com/better-programming/difference-between-regular-functions-and-arrow-functions-f65639aba256
  > The link will also be in the source below.
*/

Tags:

Misc Example