This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
does it help in handling the this keyword sometimes, when compared to the normal functions like in ReactJS?
Because in react to pass functions through components we need consider the this keyword very carefully so please help me understand how arrow functions help.
Arrow functions lack scope. For example:
function outer()
{
function inner()
{
console.log(this) //Refers to inner function
}
inner();
}
function outerTwo()
{
let inner = () => {
console.log(this) //refers to outer
}
inner();
}
outer();
outerTwo();
If you try to use an arrow function for a prototype method definition and you use thisanywhere in there, it'll refer to the window / global context.Because it will not have it's own scope. Because they lack scope, they can be useful for method injection, where they can refer to the the container that's calling them. Hence, why they're often used as callbacks.
You answered the question yourself. Using arrow function helps you with referencing this context of the given component and sometimes is also used as it is shorter and therefore faster to write.
Related
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
What are the advantages/disadvantages for creating a top level function in ES6 with arrows or without?
(2 answers)
Closed 1 year ago.
These 2 statements seem to do the same thing.
const handleClick = () => alert('foo');
and
function handleClick() {
alert('foo');
}
Are they identical and just syntactically different? The first one looks like a variable declaration, whereas the second one is clearly a function definition.
No, they are not the same thing. The arrow function has some limitations:
Does not have its own bindings to this or super, and should not be
used as methods.
Does not have new.target keyword.
Not suitable for
call, apply and bind methods, which generally rely on establishing a
scope.
Can not be used as constructors.
Can not use yield, within its
body.
ES6 arrow functions provide you with an alternative way to write a shorter syntax compared to the function expression. There is no performance difference.
Are arrow functions faster (more performant, lighter) than ordinary standalone function declaration in v8?
This question already has answers here:
var functionName = function() {} vs function functionName() {}
(41 answers)
Closed 2 years ago.
What is the difference between this (a 'standalone' function):
function standaloneFunction () {
console.log('standaloneFunction runs, success')
}
standaloneFunction()
...and this (a function inside a variable):
let variableFunction = function variableFunction () {
console.log('function inside let has same name as the variable, runs? - yep, does.')
}
variableFunction()
Is it a problem that the variable and the function share the same name?
it doesnt seem so - i speculate this is because it has something to do how variables
and functions are saved in memory? Functions in their entirety, and variables only their declaration?
When i do console.log(this), i can't find the 'variableFunction' in the execution
context of 'this' - however, 'standaloneFunction' does appear.
Have you, as a beginner, also asked yourself such questions? Am i being too picky about such details?
Should i already use es6 syntax?
Please also don't hold back with any advice regarding articulating my question.
Thanks to everyone who has taken their time to read this.
The first is a function declaration, which will be hoisted. The second is a named function expression, but I think an anonymous function expression would be better in this case since there’s no need to name the function, e.g. let variableFunction = function() {…}.
Please see What is the difference between a function expression vs declaration in JavaScript?
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 3 years ago.
I have a test function:
function test(element) {
console.log(element.id);
console.log(element);
}
which I want to use as a callback when my button <button id="testbtn">afsdasd</button> is pressed. If I do this:
document.getElementById('testbtn').onclick = () => {
test(this);
};
I get the following output:
However, if I do this:
document.getElementById('testbtn').onclick = function() {
test(this);
};
the output is different:
Why? I thought both versions were exactly the same?
The first one is an arrow function while the second one is a regular function. Arrow functions do not have their own this binding, so they will search this in the next outer lexical scope. In your case the enclosing lexical scope for the arrow function is the Window object.
An arrow function does not have its own this. The this value of the
enclosing lexical scope is used; arrow functions follow the normal
variable lookup rules. So while searching for this which is not
present in current scope, an arrow function ends up finding the this
from its enclosing scope. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
This question already has answers here:
What are the advantages/disadvantages for creating a top level function in ES6 with arrows or without?
(2 answers)
Closed 6 years ago.
I have downloaded an open source js code where the developer often create new function in this way:
var log = msg => div.innerHTML += "<br>" + msg;
So, is there a difference with this below ?
function log(msg){
div.innerHTML += "<br>" + msg;
}
There are some differences between arrow functions and function foo() {} functions. See https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions.
A few I can think of off the top of my head:
function foo() {} function definitions are hoisted, which means you can invoke such a function anywhere in the scope that contains its definition. This is not the case for variables containing functions, for which only the declarations are hoisted
Arrow functions bind this lexically, which in simple words means that they do not introduce their own this variable. Instead, they simply close over the nearest this variable from an enclosing scope
Arrow functions do not have the arguments local variable available for use within the body
All that said, the two functions you have shown should behave identically in most cases, given the caveats mentioned above.
This question already has answers here:
How do JavaScript closures work?
(86 answers)
Closed 8 years ago.
I was reading about AngularJS and came across the following statement on a newsgroup:
I have to say, though, that the more I use Angular, the less interest
I have in creating classes. Classes are not where javascript is at!
You can do pretty much everything you need with pure functions and
closures and then you don't have to worry about the troublesome
"this" and "that".
Can someone explain what is meant by "closures".
Closures are a structure in Javascript code where within nested functions the outer functions scope is retained within the inner function.
For Example:
function outer(x,y){
var t = 1;
return function(z){
//x, y, t from the outer function are made available to inner function
return x + y + z + t;
}
}
var outer1 = outer(1,1); //creating a closure, or an instance of a function in sense
alert(outer1(1)); //Alerts 4
var outer2 = outer(2,2);
alert(outer2(2)); //Alerts 7
The simple explanation of a Closure is that ECMAScript allows inner
functions; function definitions and function expressions that are
inside the function bodes of other functions. And that those inner
functions are allowed access to all of the local variables, parameters
and declared inner functions within their outer function(s). A closure
is formed when one of those inner functions is made accessible outside
of the function in which it was contained, so that it may be executed
after the outer function has returned. At which point it still has
access to the local variables, parameters and inner function
declarations of its outer function. Those local variables, parameter
and function declarations (initially) have the values that they had
when the outer function returned and may be interacted with by the
inner function.
Source