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.
Related
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 8 months ago.
i just created an object with an arrow function :
const user={
fName:"0xN1nja",
about:()=>{
return this.fName;
}
}
now, when i call that arrow function with .call() method, it returns undefined :
a=user.about.call(user);
console.log(a);
>>> undefined
But when i replaced that arrow function with a normal function expression, it returns the value
const user={
fName:"0xN1nja",
about:function(){
return this.fName;
}
}
a=user.about.call(user2);
console.log(a);
>>> 0xN1nja
what is happening here?
PS : im new to javascript
Arrow functions don't bind to this as function do. That's one of the main reason they were introduced (probably the most important one).
You cannot even bind them.
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:
ES6 concise methods and non-concise methods in object literals
(1 answer)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 2 years ago.
I'm still not very familiar with all the ES6 syntax, and I'm starting to learn Vue.js, which makes extensive use of it. So, I find something that puzzles me a bit:
What's the difference between these two methods?
const actions = {
foo1(num) {
console.log(num);
},
foo2: (num) => {
console.log(num);
}
}
actions.foo1(2);
actions.foo2(3);
// output: 2
// output: 3
I guess they are not the same, although they both output their passed value.
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 4 years ago.
i have this object literal
let p = {
name : 'Amir',
say: () => {
console.log(this.name)
console.log(this)
}
}
and I want the say function works using this
p.say();
but the arrow function obviously gets the window object as 'this'. I know I could use a regular function for 'say' instead of arrow and it will work fine.
BUT
I would like to ONLY change the call to say function to make it work, but the binding won't work.
I mean something like p.say.bind(p)() or p.say.call(p) aint gonna work as desired.
Is it possible to change the call to function ONLY and not the say function?
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
I prefer do function declaration
doSomething() //still works
function doSomething() {}
over
var doSomething = function() = {}
doSomething()
because with the function declaration, I don't have to worry about the order, it just got hoisted at the top. Now when it come to es6, my coworker like to do const doSomething = () => {} because for them they dislike the word 'function'. I lost the hoisting how can I fix it?
I hope I can do this
abc()
abc() => {}
but I have to use babel so that the word function can be ignore to make a function in es6/es7?
No you can't:
abc();
abc() => {console.log('test');}
Moreover, arrow functions do now have their own this context and cannot be used as constructors. Which means they are not only for people who do not want to use the function keyword.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions