1.Arrow with No parameters
ex : const f1 = () => {} // A function taking no arguments
const f2 = _ => {} // A function with one argument that doesn't use it.
2.Single parameter
ex : const add1 = (x) => x+1;
Note : Parentheses around a single parameter are optional.
3.Multiple parameter
ex : const sum = (num1,num2) => num1 + num2;
const sum = (num1,num2) => {return num1 + num2;}
Note : if you pass more than one parameter, you need to wrap them in parenthesis.
4.Block body
if you need more than just a single line of code in your arrow function's body,
then you can use the "block body syntax".
ex : let fun1=(x,y) => {
let z=10;
return x+y+z;
}
fun1(1,3); // 14
ex 1 :
const upperizedNames = ['Mallik', 'Talks', 'Java'].map( name => {
name = name.toUpperCase();
return `${name} has ${name.length} characters in their name`;
});
//["MALLIK has 6 characters in their name", "TALKS has 5 characters in their name", "JAVA has 4 characters in their name"]
5.Object literals
ex : const details = name => ({ firstName: name });
Note : if you want to return objects from an arrow function ,
you need to wrap them in parentheses.
Note : Two main benefits of arrow functions
1.Concise and shorter syntax
ex : let myFunction = (a) => a * 5;
myFunction(10); // 50
2.No separate 'this' binding.
The arrow function does not have its own 'this'.
ex :
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the Person object
}, 1000);
}
var p = new Person();
Unlike a regular function, an arrow function does not bind 'this'.
Instead,'this' is bound lexically.
With an arrow function,the 'this' binding keeps its
original binding from the context.
Note : Arrow function should not be used in object methods.
No curly brackets and implicit return with single-line arrow function.
ex : let myfunc = a => a * a;
wrap body in parenthesis to return object literal
ex : let myfunc = (first,last) => ({ firstName:first,lastName:last});
Summary :
1.you don't need to use curly brackets if there's only one statement in the function.
In the cases where you omit the curly brackets,you can also omit the 'return' keyword,
as the return is implicit.
2.'this' is bound lexically,meaning that fat arrow functions don't have their own 'this' and that
'this' refers to the parent scope.
3.They can't be used as constructors or generators.
4.There's no arguments variable available with arrow functions.
what is 'this'?
Note : However, in javascript, the callback function ( and every traditional function)
get its own value of 'this'.
ex : const details = {
name: 'Arfat',
friends: ['Bob', 'Alex'],
getFriends: function () {
this.friends.forEach(function (friend) {
console.log(this.name + " is friends with " + friend);
});
}
}
details.getFriends();
// undefined is friends with Bob
// undefined is friends with Alex
The 'this' value of getFriends is SHADOWED by the callback's own value.
Solution for above problem
1.use the that=this pattern
ex : const details = {
name: 'Arfat',
friends: ['Bob', 'Alex'],
getFriends: function () {
const that = this;
this.friends.forEach(function (friend) {
console.log(that.name + " is friends with " + friend);
});
}
}
details.getFriends();
// Arfat is friends with Bob
// Arfat is friends with Alex
In this case , that variable is found in the parent scope which was correctly
bound to the details object.
2.A lot of methods in javascript take an optional 'this' argument.
ex : const details = {
name: 'Arfat',
friends: ['Bob', 'Alex'],
getFriends: function () {
this.friends.forEach(function (friend) {
console.log(this.name + " is friends with " + friend);
}, this);
}
}
details.getFriends();
// Arfat is friends with Bob
// Arfat is friends with Alex
3.Arrow functions.
Arrow functions bind 'this' lexically.In other words,
Arrow functions always have a value of 'this' keyword taken
from the parent scope.
ex : const details = {
name: 'Arfat',
friends: ['Bob', 'Alex'],
getFriends: function () {
this.friends.forEach(friend => {
console.log(this.name + " is friends with " + friend);
});
}
}
details.getFriends();
// Arfat is friends with Bob
// Arfat is friends with Alex
Note :
1.Arrow function can't use 'arguments' special variable.
2.Arrow function can't be used as a constructor.
3.Arrow function can't change the 'this' binding.
4.Arrow function can't be used as generator functions.
No comments:
Post a Comment