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?
Related
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.
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 4 years ago.
I'm new to Javascript and I want to know what is the below pattern of code called.
GetDatasetProtocols: workbookId => `${API_QUERY_SVC_URL}dataset/protocols/${workbookId}`
That is an arrow function. The most important difference of an arrow function compared to a "regular" function is that the this keyword within an arrow function des not refer to the object the function is called from, but to the scope where the function is defined.
Arrow functions have been introduced in ES6. You can use them in TypeScript also when you target earlier JS versions. TypeScript will produce code that emulates the scope of this in the arrow function.
Besides arrow functions, you also have template literals here: ${API_QUERY_SVC_URL}dataset/protocols/${workbookId}
Check documentation here
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 4 years ago.
Can't find this info anywhere on the web. Is there any difference (e.g. in performance) between these two methods created with object literal syntax? Or is the mechanism under the hood exactly the same?
let test = {
foo(){
console.log("foo");
return 1;
},
bar: () => {
console.log("bar");
}
}
console.log(test.foo());
console.log(test.bar());
There shouldn't be any performance difference -- the shorthand function property is just syntactic sugar.
However, there's an operational difference. The shorthand notation is short for the traditional function syntax, not an arrow function. So it's equivalent to:
foo: function() {
console.log("foo");
}
Arrow functions have a number of different behaviors from traditional function expressions. See Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?
Your example functions don't do anything that depends on the differences, but in a real application they might.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 5 years ago.
Is it by design that arrow functions can redefine existing functions behavior? Using jQuery's get (yes, I know) - I'm getting two different values of this inside success depending on whether arrow function is used or not. Can anyone explain why it happens?
var get = (e) => {
return new window.Promise((resolve, reject) => {
$.ajax({
context: {test: 1}, // this
type: "GET",
url: "...",
complete: function () {
// this is only correct when using old syntax, arrow
// function would redefine the value of this to the function's parent
},
complete: ()=>{ } // Is not working, this is not what I'd expect.
});
});
Arrow functions were primarily introduced to change the scoping of this which helps to avoid using .bind(this) all the time. It's natural that you get different values
From MDN: Arrow Functions
An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target.
The cleaner, more succint syntax is of secondary value. They are certainly not an absolute replacement for function
Now that this is taken out of the equation - you've also got 2 oncomplete callbacks in your example.
This question already has answers here:
What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
(3 answers)
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 6 years ago.
I have seen some functions defined as function(){} and some functions defined as () => {}.
Is this related to Javascript version ES6?
Also, how does use of this keyword change from one function definition to another?
The () => {} is called an arrow function. They are, as you said, part of ES6. From the linked page:
An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous.