Converting Functions to Arrow functions2019 Community Moderator ElectionWhat does “this” refer to in...
Life insurance that covers only simultaneous/dual deaths
Why doesn't the EU now just force the UK to choose between referendum and no-deal?
Converting Functions to Arrow functions
Employee lack of ownership
How do I interpret this "sky cover" chart?
Could the Saturn V actually have launched astronauts around Venus?
Happy pi day, everyone!
Instead of Universal Basic Income, why not Universal Basic NEEDS?
What options are left, if Britain cannot decide?
How could a female member of a species produce eggs unto death?
What are the possible solutions of the given equation?
Is having access to past exams cheating and, if yes, could it be proven just by a good grade?
I need to drive a 7/16" nut but am unsure how to use the socket I bought for my screwdriver
Identifying the interval from A♭ to D♯
Can elves maintain concentration in a trance?
Why are there 40 737 Max planes in flight when they have been grounded as not airworthy?
How to generate globally unique ids for different tables of the same database?
My adviser wants to be the first author
Sword in the Stone story where the sword was held in place by electromagnets
Professor being mistaken for a grad student
RegionDifference for Cylinder and Cuboid
Can anyone tell me why this program fails?
Why are the outputs of printf and std::cout different
Meaning of "SEVERA INDEOVI VAS" from 3rd Century slab
Converting Functions to Arrow functions
2019 Community Moderator ElectionWhat does “this” refer to in arrow functions in ES6?Is there an “exists” function for jQuery?What's the difference between a method and a function?How can I convert a string to boolean in JavaScript?var functionName = function() {} vs function functionName() {}Set a default parameter value for a JavaScript functionConvert a string to an integer in JavaScript?Convert form data to JavaScript object with jQueryWhat does the exclamation mark do before the function?ECMAScript 6 arrow function that returns an objectAre ES6 arrow functions incompatible with Angular?
I'm learning ES6, I just want to convert my ES5 knowledge to ES6.
here's my ES5 code:
function click() {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
};
and here's my ES6 code:
const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
My problem is this.className += ' grab'; and setTimeout(() => (this.className = 'remove'), 0); didn't run the function. But console.log shows on the log.
Is this method don't work on arrow functions?
javascript function arrow-functions
New contributor
add a comment |
I'm learning ES6, I just want to convert my ES5 knowledge to ES6.
here's my ES5 code:
function click() {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
};
and here's my ES6 code:
const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
My problem is this.className += ' grab'; and setTimeout(() => (this.className = 'remove'), 0); didn't run the function. But console.log shows on the log.
Is this method don't work on arrow functions?
javascript function arrow-functions
New contributor
1
this
is not a method, and is different inside an arrow function - read documentation to understand the difference ...didn't run the function
yes, it did, you just don't know what you're doing yet
– Jaromanda X
1 hour ago
2
this
keyword functions differently in arrow functions. Read this section of the documentation.
– Yong Quan
1 hour ago
2
Aside - Consider usingel.classList.add('grab')
(andel.classList.remove('grab')
) instead of manipulating the string of class names manually. more info
– James
1 hour ago
1
This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate
– Jaromanda X
1 hour ago
Possible duplicate of What does "this" refer to in arrow functions in ES6?
– adiga
49 mins ago
add a comment |
I'm learning ES6, I just want to convert my ES5 knowledge to ES6.
here's my ES5 code:
function click() {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
};
and here's my ES6 code:
const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
My problem is this.className += ' grab'; and setTimeout(() => (this.className = 'remove'), 0); didn't run the function. But console.log shows on the log.
Is this method don't work on arrow functions?
javascript function arrow-functions
New contributor
I'm learning ES6, I just want to convert my ES5 knowledge to ES6.
here's my ES5 code:
function click() {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
};
and here's my ES6 code:
const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
My problem is this.className += ' grab'; and setTimeout(() => (this.className = 'remove'), 0); didn't run the function. But console.log shows on the log.
Is this method don't work on arrow functions?
javascript function arrow-functions
javascript function arrow-functions
New contributor
New contributor
New contributor
asked 1 hour ago
code for moneycode for money
332
332
New contributor
New contributor
1
this
is not a method, and is different inside an arrow function - read documentation to understand the difference ...didn't run the function
yes, it did, you just don't know what you're doing yet
– Jaromanda X
1 hour ago
2
this
keyword functions differently in arrow functions. Read this section of the documentation.
– Yong Quan
1 hour ago
2
Aside - Consider usingel.classList.add('grab')
(andel.classList.remove('grab')
) instead of manipulating the string of class names manually. more info
– James
1 hour ago
1
This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate
– Jaromanda X
1 hour ago
Possible duplicate of What does "this" refer to in arrow functions in ES6?
– adiga
49 mins ago
add a comment |
1
this
is not a method, and is different inside an arrow function - read documentation to understand the difference ...didn't run the function
yes, it did, you just don't know what you're doing yet
– Jaromanda X
1 hour ago
2
this
keyword functions differently in arrow functions. Read this section of the documentation.
– Yong Quan
1 hour ago
2
Aside - Consider usingel.classList.add('grab')
(andel.classList.remove('grab')
) instead of manipulating the string of class names manually. more info
– James
1 hour ago
1
This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate
– Jaromanda X
1 hour ago
Possible duplicate of What does "this" refer to in arrow functions in ES6?
– adiga
49 mins ago
1
1
this
is not a method, and is different inside an arrow function - read documentation to understand the difference ... didn't run the function
yes, it did, you just don't know what you're doing yet– Jaromanda X
1 hour ago
this
is not a method, and is different inside an arrow function - read documentation to understand the difference ... didn't run the function
yes, it did, you just don't know what you're doing yet– Jaromanda X
1 hour ago
2
2
this
keyword functions differently in arrow functions. Read this section of the documentation.– Yong Quan
1 hour ago
this
keyword functions differently in arrow functions. Read this section of the documentation.– Yong Quan
1 hour ago
2
2
Aside - Consider using
el.classList.add('grab')
(and el.classList.remove('grab')
) instead of manipulating the string of class names manually. more info– James
1 hour ago
Aside - Consider using
el.classList.add('grab')
(and el.classList.remove('grab')
) instead of manipulating the string of class names manually. more info– James
1 hour ago
1
1
This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate
– Jaromanda X
1 hour ago
This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate
– Jaromanda X
1 hour ago
Possible duplicate of What does "this" refer to in arrow functions in ES6?
– adiga
49 mins ago
Possible duplicate of What does "this" refer to in arrow functions in ES6?
– adiga
49 mins ago
add a comment |
6 Answers
6
active
oldest
votes
There's not really enough context to give you a good answer, but one thing stands out. Arrow functions maintain scope, so this
inside function click()
and const click
may well be different. In the ES6 version, this
will refer to whatever was this
during the closure creation, which may not be what you want.
Arrow Functions at MDN clears it up:
An arrow function does not have its own
this.
…Which means that this
will be inherited from the declaring scope.
ES6 arrow functions aren't just a new way of declaring functions, and there's nothing inherently wrong with function myFunction(...)
syntax, nor is it going away. Arrow functions avoid some verbosity when passing a function as an argument (e.g. to forEach
) and avoid the need to rebind a function to a different this
in some cases. Converting all function declarations to arrow syntax is not an upgrade.
@jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.
– adc
1 hour ago
add a comment |
The reason is that you just need to slightly restructure things.
setTimeout(() => {this.className = 'remove'}, 0)
You have parenthesis vs curly braces.
your this
may or may not work depending on how things are structured in the other code
absolutely no difference in this context - in other context, the difference is what the arrow function returns
– Jaromanda X
1 hour ago
add a comment |
In Arrow Functions, this
isn't the this
you would expect. this
in Arrow Functions is defined when you create the function - not when it is called. See here for more information on that.
Thanks to @Jaromanda X from the comments - In this case, keep using standard function notation (function() {...}
) - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails
1
this
does exist, otherwise the OP would get errors -this
is from the bounding lexical scope
– Jaromanda X
1 hour ago
@JaromandaX you're right. let me fix that
– Aniket G
1 hour ago
keep using standard function notation
- i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails
– Jaromanda X
1 hour ago
@JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?
– Aniket G
1 hour ago
Feel free - it's one of my better ones :p
– Jaromanda X
1 hour ago
|
show 1 more comment
const click = () => {
console.log(this);
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
click();
'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.
add a comment |
You can bind this
for arrow function to access functions and data. Your code should be something like
const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}.bind(this)
It will bind this
for arrow function and you can access those variable and functions.
add a comment |
An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
code for money is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55175428%2fconverting-functions-to-arrow-functions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
There's not really enough context to give you a good answer, but one thing stands out. Arrow functions maintain scope, so this
inside function click()
and const click
may well be different. In the ES6 version, this
will refer to whatever was this
during the closure creation, which may not be what you want.
Arrow Functions at MDN clears it up:
An arrow function does not have its own
this.
…Which means that this
will be inherited from the declaring scope.
ES6 arrow functions aren't just a new way of declaring functions, and there's nothing inherently wrong with function myFunction(...)
syntax, nor is it going away. Arrow functions avoid some verbosity when passing a function as an argument (e.g. to forEach
) and avoid the need to rebind a function to a different this
in some cases. Converting all function declarations to arrow syntax is not an upgrade.
@jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.
– adc
1 hour ago
add a comment |
There's not really enough context to give you a good answer, but one thing stands out. Arrow functions maintain scope, so this
inside function click()
and const click
may well be different. In the ES6 version, this
will refer to whatever was this
during the closure creation, which may not be what you want.
Arrow Functions at MDN clears it up:
An arrow function does not have its own
this.
…Which means that this
will be inherited from the declaring scope.
ES6 arrow functions aren't just a new way of declaring functions, and there's nothing inherently wrong with function myFunction(...)
syntax, nor is it going away. Arrow functions avoid some verbosity when passing a function as an argument (e.g. to forEach
) and avoid the need to rebind a function to a different this
in some cases. Converting all function declarations to arrow syntax is not an upgrade.
@jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.
– adc
1 hour ago
add a comment |
There's not really enough context to give you a good answer, but one thing stands out. Arrow functions maintain scope, so this
inside function click()
and const click
may well be different. In the ES6 version, this
will refer to whatever was this
during the closure creation, which may not be what you want.
Arrow Functions at MDN clears it up:
An arrow function does not have its own
this.
…Which means that this
will be inherited from the declaring scope.
ES6 arrow functions aren't just a new way of declaring functions, and there's nothing inherently wrong with function myFunction(...)
syntax, nor is it going away. Arrow functions avoid some verbosity when passing a function as an argument (e.g. to forEach
) and avoid the need to rebind a function to a different this
in some cases. Converting all function declarations to arrow syntax is not an upgrade.
There's not really enough context to give you a good answer, but one thing stands out. Arrow functions maintain scope, so this
inside function click()
and const click
may well be different. In the ES6 version, this
will refer to whatever was this
during the closure creation, which may not be what you want.
Arrow Functions at MDN clears it up:
An arrow function does not have its own
this.
…Which means that this
will be inherited from the declaring scope.
ES6 arrow functions aren't just a new way of declaring functions, and there's nothing inherently wrong with function myFunction(...)
syntax, nor is it going away. Arrow functions avoid some verbosity when passing a function as an argument (e.g. to forEach
) and avoid the need to rebind a function to a different this
in some cases. Converting all function declarations to arrow syntax is not an upgrade.
edited 1 hour ago
answered 1 hour ago
adcadc
18116
18116
@jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.
– adc
1 hour ago
add a comment |
@jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.
– adc
1 hour ago
@jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.
– adc
1 hour ago
@jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.
– adc
1 hour ago
add a comment |
The reason is that you just need to slightly restructure things.
setTimeout(() => {this.className = 'remove'}, 0)
You have parenthesis vs curly braces.
your this
may or may not work depending on how things are structured in the other code
absolutely no difference in this context - in other context, the difference is what the arrow function returns
– Jaromanda X
1 hour ago
add a comment |
The reason is that you just need to slightly restructure things.
setTimeout(() => {this.className = 'remove'}, 0)
You have parenthesis vs curly braces.
your this
may or may not work depending on how things are structured in the other code
absolutely no difference in this context - in other context, the difference is what the arrow function returns
– Jaromanda X
1 hour ago
add a comment |
The reason is that you just need to slightly restructure things.
setTimeout(() => {this.className = 'remove'}, 0)
You have parenthesis vs curly braces.
your this
may or may not work depending on how things are structured in the other code
The reason is that you just need to slightly restructure things.
setTimeout(() => {this.className = 'remove'}, 0)
You have parenthesis vs curly braces.
your this
may or may not work depending on how things are structured in the other code
edited 1 hour ago
answered 1 hour ago
Jon BlackJon Black
860718
860718
absolutely no difference in this context - in other context, the difference is what the arrow function returns
– Jaromanda X
1 hour ago
add a comment |
absolutely no difference in this context - in other context, the difference is what the arrow function returns
– Jaromanda X
1 hour ago
absolutely no difference in this context - in other context, the difference is what the arrow function returns
– Jaromanda X
1 hour ago
absolutely no difference in this context - in other context, the difference is what the arrow function returns
– Jaromanda X
1 hour ago
add a comment |
In Arrow Functions, this
isn't the this
you would expect. this
in Arrow Functions is defined when you create the function - not when it is called. See here for more information on that.
Thanks to @Jaromanda X from the comments - In this case, keep using standard function notation (function() {...}
) - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails
1
this
does exist, otherwise the OP would get errors -this
is from the bounding lexical scope
– Jaromanda X
1 hour ago
@JaromandaX you're right. let me fix that
– Aniket G
1 hour ago
keep using standard function notation
- i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails
– Jaromanda X
1 hour ago
@JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?
– Aniket G
1 hour ago
Feel free - it's one of my better ones :p
– Jaromanda X
1 hour ago
|
show 1 more comment
In Arrow Functions, this
isn't the this
you would expect. this
in Arrow Functions is defined when you create the function - not when it is called. See here for more information on that.
Thanks to @Jaromanda X from the comments - In this case, keep using standard function notation (function() {...}
) - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails
1
this
does exist, otherwise the OP would get errors -this
is from the bounding lexical scope
– Jaromanda X
1 hour ago
@JaromandaX you're right. let me fix that
– Aniket G
1 hour ago
keep using standard function notation
- i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails
– Jaromanda X
1 hour ago
@JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?
– Aniket G
1 hour ago
Feel free - it's one of my better ones :p
– Jaromanda X
1 hour ago
|
show 1 more comment
In Arrow Functions, this
isn't the this
you would expect. this
in Arrow Functions is defined when you create the function - not when it is called. See here for more information on that.
Thanks to @Jaromanda X from the comments - In this case, keep using standard function notation (function() {...}
) - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails
In Arrow Functions, this
isn't the this
you would expect. this
in Arrow Functions is defined when you create the function - not when it is called. See here for more information on that.
Thanks to @Jaromanda X from the comments - In this case, keep using standard function notation (function() {...}
) - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails
edited 1 hour ago
answered 1 hour ago
Aniket GAniket G
2,182226
2,182226
1
this
does exist, otherwise the OP would get errors -this
is from the bounding lexical scope
– Jaromanda X
1 hour ago
@JaromandaX you're right. let me fix that
– Aniket G
1 hour ago
keep using standard function notation
- i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails
– Jaromanda X
1 hour ago
@JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?
– Aniket G
1 hour ago
Feel free - it's one of my better ones :p
– Jaromanda X
1 hour ago
|
show 1 more comment
1
this
does exist, otherwise the OP would get errors -this
is from the bounding lexical scope
– Jaromanda X
1 hour ago
@JaromandaX you're right. let me fix that
– Aniket G
1 hour ago
keep using standard function notation
- i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails
– Jaromanda X
1 hour ago
@JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?
– Aniket G
1 hour ago
Feel free - it's one of my better ones :p
– Jaromanda X
1 hour ago
1
1
this
does exist, otherwise the OP would get errors - this
is from the bounding lexical scope– Jaromanda X
1 hour ago
this
does exist, otherwise the OP would get errors - this
is from the bounding lexical scope– Jaromanda X
1 hour ago
@JaromandaX you're right. let me fix that
– Aniket G
1 hour ago
@JaromandaX you're right. let me fix that
– Aniket G
1 hour ago
keep using standard function notation
- i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails– Jaromanda X
1 hour ago
keep using standard function notation
- i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails– Jaromanda X
1 hour ago
@JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?
– Aniket G
1 hour ago
@JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?
– Aniket G
1 hour ago
Feel free - it's one of my better ones :p
– Jaromanda X
1 hour ago
Feel free - it's one of my better ones :p
– Jaromanda X
1 hour ago
|
show 1 more comment
const click = () => {
console.log(this);
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
click();
'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.
add a comment |
const click = () => {
console.log(this);
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
click();
'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.
add a comment |
const click = () => {
console.log(this);
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
click();
'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.
const click = () => {
console.log(this);
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
click();
'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.
answered 1 hour ago
Kaushal RegmiKaushal Regmi
538
538
add a comment |
add a comment |
You can bind this
for arrow function to access functions and data. Your code should be something like
const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}.bind(this)
It will bind this
for arrow function and you can access those variable and functions.
add a comment |
You can bind this
for arrow function to access functions and data. Your code should be something like
const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}.bind(this)
It will bind this
for arrow function and you can access those variable and functions.
add a comment |
You can bind this
for arrow function to access functions and data. Your code should be something like
const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}.bind(this)
It will bind this
for arrow function and you can access those variable and functions.
You can bind this
for arrow function to access functions and data. Your code should be something like
const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}.bind(this)
It will bind this
for arrow function and you can access those variable and functions.
answered 1 hour ago
ZearaeZZearaeZ
710418
710418
add a comment |
add a comment |
An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.
add a comment |
An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.
add a comment |
An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.
An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.
answered 53 mins ago
Bathri NathanBathri Nathan
937
937
add a comment |
add a comment |
code for money is a new contributor. Be nice, and check out our Code of Conduct.
code for money is a new contributor. Be nice, and check out our Code of Conduct.
code for money is a new contributor. Be nice, and check out our Code of Conduct.
code for money is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55175428%2fconverting-functions-to-arrow-functions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
this
is not a method, and is different inside an arrow function - read documentation to understand the difference ...didn't run the function
yes, it did, you just don't know what you're doing yet– Jaromanda X
1 hour ago
2
this
keyword functions differently in arrow functions. Read this section of the documentation.– Yong Quan
1 hour ago
2
Aside - Consider using
el.classList.add('grab')
(andel.classList.remove('grab')
) instead of manipulating the string of class names manually. more info– James
1 hour ago
1
This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate
– Jaromanda X
1 hour ago
Possible duplicate of What does "this" refer to in arrow functions in ES6?
– adiga
49 mins ago