Hello friends, In this article, we will learn what is JavaScript Arrow Function? How we can use JavaScript Arrow Function? Where we can use JavaScript Arrow Function?
IT is an compact regular JavaScript function.
The Arrow functions are more powerful in some situations, but it can be terrible in others situations.
Flier and flier both function do the same.
let Flier = function() {
console.log('BAZ')
}
let flier = () => {
console.log('BAZ')
}
Flier() // BAZ
flier() // BAZ
In traditional JavaScript function expressions, the this keyword is bound to different values based on the context in which the function is called.
Apart from traditional JavaScript functions Arrow function expressions use the value of this in their lexical scope.
The context is simply the object that calls the function.
And the scope is all the variables visible to a function, where it is defined. Context looks about how it is called, scope looks about how it is defined.
Context Example
let obj = {
contVar: 'contValue',
contFunc: function() {
console.log(this.contVar)
}
}
obj.contFunc();
OUTPUT: contValue
this in contFunc is bound to obj.
Lets take a look with setTimeout context.
let obj = {
contVar: 'contValue',
contFunc: function() {
//let self = this;
console.log(this.contVar);
setTimeout(function(){
console.log(this.contVar);
},5000);
}
}
obj.contFunc();
OUTPUT: contValue undefined undefined
First result are the context of contFunc.
Last result is undefined due to it is the context of setTimeout. this.contVar is not defined within setTimeout context.
We can achieve it by using lexical scope. By assign this to a variable with in contFunc context. The callback function can access that variable because it was defined with in its scope.
let tobj = {
contVar: 'contValue',
contFunc: function() {
let lex = this;
console.log(this.contVar);
setTimeout(function(){
console.log(lex.contVar);
},5000);
}
}
tobj.contFunc();
OUTPUT: contValue undefined contValue
setTimeout uses lexical scope to get value by callback.
we can also achieve this using JavaScript function such as bind(), call(), and apply()
Lets do same with arrow function
let obj = {
contVar: 'contValue',
contFunc: function() {
console.log(this.contVar);
setTimeout(()=>{console.log(this.contVar);},5000);
}
}
obj.contFunc();
OUTPUT: contValue undefined contValue
So arrow function internally use lexical scope.
Do not use arrow function with object.
let obj = {
contVar: 'contValue',
contFunc: ()=>{console.log(this.contValue);}
}
obj.contFunc();
OUTPUT: undefined undefined
We were expect that, this will refer to obj. But arrow functions don’t. Because arrow function just use the value of this in the scope in which it was defined.
In this case, that’s the global object. So arrow functions is unusable for object methods.
More examples of Arrow function with JavaScript map.
var a = [1,2,3,4,5];
a.map(x=>x);
OUTPUT: (5) [1, 2, 3, 4, 5]
var a = [11,22,33,44,55];
a.map(()=>'Hello');
OUTPUT:
(5) ["Hello", "Hello", "Hello", "Hello", "Hello"]
var a = [11,22,33,44,55];
a.map((e,i,a)=>i+' Hello');
OUTPUT:
(5) ["0 Hello", "1 Hello", "2 Hello", "3 Hello", "4 Hello"]
var a = [11,22,33,44,55];
a.map((e,i,a)=>'Current Element: '+e + ' Current Element Index: '+i+' Hello');
OUTPUT:
(5) ["Current Element: 11 Current Element Index: 0 Hello", "Current Element: 22 Current Element Index: 1 Hello", "Current Element: 33 Current Element Index: 2 Hello", "Current Element: 44 Current Element Index: 3 Hello", "Current Element: 55 Current Element Index: 4 Hello"]
var a = [1,2,3,4,5];
a.map(x=>{return (x%2===0)?x:x*x});
OUTPUT: (5) [1, 2, 9, 4, 25]
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.