Fat Arrow function and normal function differ in following aspect
new keyword use:
Regular functions created using function declarations or expressions are constructible and callable. Since regular functions are constructible, they can be called using the new keyword.
function add(x,y)
{
console.log(x+y)
}
new add(5,6)
output:
11
However, the arrow functions are only callable and not constructible.Hence, they can never be invoked with the new keyword.
sub =(x,y)=>{
console.log(x-y)
}
new sub(5,6)
Output:
TypeError: sub is not a constructor
Fat Arrow function can not be used as a constructors.
Duplicate Named function parameter:
function add(x,x)
{
console.log(x);
}
add(5,7)
Output:
7
but
add=(x,x)=>{
console.log(x);
}
add(5,6)
Output:
SyntaxError: Duplicate parameter name not allowed in this context
With arrow functions, duplicate named arguments are always, regardless of strict or non-strict mode, invalid.
use of this keyword:
let fruit = {
name: "Mango",
FatArrow: () => {
console.log("My name is " + this.name); // no 'this' binding here
},
Regular() {
console.log("My name is " + this.name); // 'this' binding works here
}
};
fruit.FatArrow();
fruit.Regular();
output:
My name is undefined
My name is Mango
fat arrow functions do not have their own this. The value of this inside an fat arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function
arguments keyword:
let myFunc = {
showArgs(){
console.log(arguments);
}
};
myFunc.showArgs(1, 2, 3, 4,5);
Output:
[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
but
let myFunc = {
showArgs : () => {
console.log(...arguments);
}
};
myFunc.showArgs(10,30,45,78);
output:
[Arguments] {
'0': {},
'1': [Function: require] {
resolve: [Function: resolve] { paths: [Function: paths] },
main: Module {
id: '.',
path: '/home/sangram/projects/test10',
exports: {},
filename: '/home/sangram/projects/test10/test.js',
loaded: false,
children: [],
paths: [Array]
},
extensions: [Object: null prototype] {
'.js': [Function (anonymous)],
'.json': [Function (anonymous)],
'.node': [Function (anonymous)]
},
cache: [Object: null prototype] {
'/home/sangram/projects/test10/test.js': [Module]
}
},
'2': Module {
id: '.',
path: '/home/sangram/projects/test10',
exports: {},
filename: '/home/sangram/projects/test10/test.js',
loaded: false,
children: [],
paths: [
'/home/sangram/projects/test10/node_modules',
'/home/sangram/projects/node_modules',
'/home/sangram/node_modules',
'/home/node_modules',
'/node_modules'
]
},
'3': '/home/sangram/projects/test10/test.js',
'4': '/home/sangram/projects/test10'
}
Arrow functions do not have an arguments binding. However, they have access to the arguments object of the closest non-arrow parent function.
How to use arguments in arrow function?
var bar = (...arguments) => console.log(arguments);
bar(1,3,6,89,67)
Output:
[ 1, 3, 6, 89, 67 ]
Call Apply bind:
Arrow function not suitable for call, apply and bind methods, which generally rely on establishing a scope.
Search This Blog
2021/02/06
normal function vs fat arrow function
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment