xxxxxxxxxx
// Normal Function
let add = function (num1, num2) {
return num1 + num2;
}
// Arrow Function
let add = (num1, num2) => num1 + num2;
xxxxxxxxxx
// javascript arrow function vs normal function
// 0. How to code them
// 1. "this" keyword behaves differently
// 2. Arrow functions use the "argument" keyword differently
// 3. Arrow functions cannot be used as constructors (the "new" keyword)
// 4. Implicit return (arrow functions can skip the "return" keyword)
// ---- 0. How to code them
// Normal Function
let add = function (num1, num2) {
return num1 + num2;
}
// Arrow Function
let add = (num1, num2) => num1 + num2;
// alternative if inside an object
let object {
add: (num1, num2) => {
num1 + num2
},
};
// ---- 1. "this" keyword behaves differently
var variable = “Global Level Variable”;
let myObject = {
variable: “Object Level Variable”,
arrowFunction: () => {
console.log(this.variable);
},
regularFunction() {
console.log(this.variable);
}
};
myObject.arrowFunction();
myObject.regularFunction();
// Result:
// Global Level Variable
// Object Level Variable
// ---- 2. Arrow functions cannot use the "argument" keyword
function exampleFunction() {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
exampleFunction(1,2,3)
// Result:
// 1
// 2
// 3
let exampleFunction = {
printArguments : () => {
console.log(arguments);
}
}
exampleFunction.printArguments(1,2,3)
// Result:
// [x] Uncaught ReferenceError: ...
// ---- 3. Arrow functions cannot be used as constructors (the "new" keyword)
function Article(topic) {
this.topic= topic;
}
const article= new Article('JavaScript');
// Result:
// No errors
function Article = (topic) => {
this.topic= topic;
}
const article= new Article('JavaScript');
// Result:
// [x] Uncaught TypeError: ...
// ---- 4. Implicit return (arrow functions can skip the "return" keyword)
function exampleFunction() {
return 10;
}
exampleFunction();
// Result:
// 10
function exampleFunction() {
var number = 10;
}
exampleFunction();
// Result:
// undefined
const addOne = (number) => number + 1;
addOne(10);
// Result:
// 11
xxxxxxxxxx
Regular functions created through function declarations / expressions are both constructible and callable. Arrow functions (and methods) are only callable i.e arrow functions can never be used as constructor functions. Hence, they can never be invoked with the new keyword.
xxxxxxxxxx
// Arrow function vs function
// Function in JavaScript
function regular(){
console.log("regular function");
}
regular(); //regular function
// Arrow Function
const arrow = () => console.log("Arrow function");
arrow(); //Arrow function
xxxxxxxxxx
// jsdrops.com/arrow-functions
this.whoIsThis = 'TOP'; // Identify this scope
// 1) Defining
const fancyObj {
whoIsThis: 'FANCY', // Identify this object
regularF: function () {
console.log('regularF', this.whoIsThis);
},
arrowF: () => {
console.log('arrowF', this.whoIsThis);
},
};
// 2) Calling
console.log('TOP-LEVEL', this.whoIsThis); // It's "TOP" here
fancyObj.regularF(); // Output #1 (Fancy)
fancyObj.arrowF(); // Output #2 (Top)
fancyObj.regularF.call({whoIsThis: 'FAKE'}); // Output #3 (Fake)
fancyObj.arrowF.call({whoIsThis: 'FAKE'}); // Output #4 (Top)
xxxxxxxxxx
It is important to note that arrow functions are anonymous, which means that they are not named.
This anonymity creates some issues:
Harder to debug
When you get an error, you will not be able to trace the name of the function or the exact line number where it occurred.
2. No self-referencing
If your function needs to have a self-reference at any point (e.g. recursion, event handler that needs to unbind), it will not work.
Main benefit: No binding of ‘this’
xxxxxxxxxx
// currently common pattern
var that = this;
getData(function(data) {
that.data = data;
});
// better alternative with arrow functions
getData(data => {
this.data = data;
});