In JavaScript, their are 2 way to define a function , normal function and arrow function.
In this article we will try to understand what is the difference between them , which one to use when and most importantly how “this” behaves in both of them.
Note
Fat arrow function concept is introduced in ES6.
Arrow function is also called as fat arrow function
Lets learn.
Syntax
Normal Function
var add = function(x, y) {
return x + y;
};Arrow function
let add = (x, y) => {
return x + y
};Diff 1 : Way of writing
For single expression, we don’t need parenthesis or even return keyword in fat arrow function
| Normal Function | Fat Arrow Function |
| const a = function (x, y) { return x + y; }; console.log(a(2, 3)); | const a = (x, y) => x + y; console.log(a(2, 3)); For single parameter : ——————— const a = x=> x*x; console.log(a(2)); |
Diff 2 : this keyword
In arrow function , “this” is lexically bound. It means arrow function does not have its own “this”.
“this” in arrow function is always bound to the closest this of the parent non arrow function.
Whereas , in normal function , ‘this” is dynamically bound. It means normal function have its own “this”,
“this” context in normal function can be different depending on how the function is invoked.
Example code
const obj = {
value: 42,
arrowFunc: () => {
console.log(this.value); // undefined
},
normalFunc: function() {
console.log(this.value); // 42
}
};
obj.arrowFunc(); // `this` refers to the global object or undefined in strict mode.
obj.normalFunc(); // `this` refers to `obj`.
Question
//closest non-arrow function
let him = {
name: "himanshu",
};
let user = {
name: "what about coding",
wac1: () => {
console.log("hello " + this.name); // no 'this' binding here
},
wac2() {
console.log("Welcome to " + this.name); // 'this' binding works here
},
};
user.wac1();
user.wac2();
Source - gfg
Diff 3 : Duplicate Name Parameter
In arrow function argument with same name is not allowed
| Normal Function | Fat Arrow Function |
| function add(x, x) { console.log(x); } add(2, 4); Output – works fine | add = (x, x) => { console.log(x); }; add(2, 4); Output – error Output – Uncaught SyntaxError: duplicate argument names not allowed in this context |
Diff 4 : Use of new keyword . Constructible or not ?
In normal function , we can create constructor, thus it can be called by new keyword
In arrow function , we cannot create constructor, hence function cannot be invoked by new keyword
| Normal Function | Fat Arrow Function |
| let c = function () { console.log(“hello”); }; new c(); | let c = () => { console.log(“hello”); }; new c(); Output – error Output – Uncaught TypeError: c is not a constructor |
Diff 5 : Argument Binding
Arrow function does not have argument bindings. It will refer to the arguments object of the closest non-arrow parent function.
| Normal Function | Fat Arrow Function |
| const a = function () { console.log(arguments); }; a(1, 2, 3); | const a = () => { console.log(arguments); }; a(1, 2, 3); Output – error Fix —- function wrap() { const a = () => { console.log(arguments); }; a(); } wrap(1, 2, 3); |
Found the article helpful , please share it with the needy.
Follow me – Instagram
