Fat arrow function and how a fat arrow function works [duplicate] - javascript

This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 5 years ago.
I saw this question in a quiz, how is a fat arrowed question works? is there any difference in the following code, if if yes why, if no why?:
var abc = function() {
return {
log : function() {
console.log(this.val);
}
};
}
var def = function(){
return{
log : () => {
console.log(this.val);
}
};
}

A fat arrow function automatically binds to this. It help avoid code where you have to save this in some other variable like that... such as in deeply nested callback hell. It is also more terse.

Related

Why extending property of existing object with arrow function fails [duplicate]

This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 3 months ago.
Why arrow function fails to identify this pointer in the following case. I know that regular functions have their own execution scope and this but I could not identify why following failed. In the arrow function case, this is undefined. If someone can shed light, it would be great. Thank you!
PS: This code is just for experimental purposes, not anything serious.
const addProperty = function(op, func) {
String.prototype.__defineGetter__(op, func);
};
// works
addProperty('upper', function() {
return this.toUpperCase();
});
// fails to identify this
addProperty('lower', () => {
return this.toLowerCase();
});
Arrow functions preserve the this of the outside scope. function keyword functions, in this context, get the this of the object they're put on. That's just what they do.

JavaScript: Equivalent of arrow function (how to not use an arrow) [duplicate]

This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 3 years ago.
I am new to JavaScript, and I am struggling with how to change an arrow function with non-arrow function... Please help, and thank you very much in advance!
this.middleware(req,res,()=>{
this.processRoutes(req,res);
});
This is how you can do it.
this.middleware = function(req,res) {
this.processRoutes(req,res);
};
However you should use arrow function unless you have any specific reason for not to use it.

How to re-write arrow function to regular function and bind context? [duplicate]

This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Arrow Functions and This [duplicate]
(5 answers)
Closed 4 years ago.
I am checking the arrow function introduced in ES6. If I have this piece of code with the function "addNinja":
addNinja=(ninja)=>{
ninja.id=Math.random();
let ninjas=[...this.state.ninjas,ninja];
this.setState({
ninjas:ninjas
})
console.log(this.state);
}
Is there any way that this can be written without the arrow function?
If I taking into account that these 2 are the same...
x=>x*2
function(x){
return x*2;
}
I will assume that I could rewrite the addNinja function like the code below but I get an error.
addNinja=function(ninja){
ninja.id=Math.random();
let ninjas=[...this.state.ninjas,ninja];
this.setState({
ninjas:ninjas
})
console.log(this.state);
}
The function() {} syntax does not bind the local context to the function, that is why this.setState or this.state.something fails, because this is defined by the global lexical context, and the state does not exist in it. If you want to achieve this you have to manually bind the function:
constructor(props) {
this.addNinja = this.addNinja.bind(this);
}
addNinja=function(ninja){
ninja.id=Math.random();
let ninjas=[...this.state.ninjas,ninja];
this.setState({
ninjas:ninjas
})
console.log(this.state);
}

Difference between `function(event)` and `function = event =>` [duplicate]

This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
I am confused in trying to understand the function event object.
How does function(event) differ from function = event => in a code like the one below?
functionName(event) {
// code
}
Check our this article will cover arrow Functions for Beginners Javascript. Arrow functions are a new ES6 syntax for writing JavaScript functions.

Confused about this in ES6. It's equal to window [duplicate]

This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 5 years ago.
I have this function call in jQuery:
image.save(comment);
and I've defined the save function like this:
Image.prototype.save = association => {
debugger;
this
}
How do I get this to equal the recipient of the function call which is image? Right now at the debugger, it equals the window object.
Do not use arrow functions
Arrow functions have a lexical this; its value is determined by the surrounding scope.
Image.prototype.save = function(association){
debugger;
this
}

Categories

Resources