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
// 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
// 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
// Normal Function
let add = function (num1, num2) {
return num1 + num2;
}
// Arrow Function
let add = (num1, num2) => num1 + num2;
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
// currently common pattern
var that = this;
getData(function(data) {
that.data = data;
});
// better alternative with arrow functions
getData(data => {
this.data = data;
});