This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 5 years ago.
I have recently come across this code with which I am unfamiliar:
const foo = () => {
/*code block here*/
}
As far as I can tell, it means the same thing as:
const foo = function () {
/*code block here*/
}
Is that a correct assumption, or are there differences?
What is the correct name to refer to this bit of code?
What exactly is the '=>' doing? I've never seen it in Javascript before.
This is ES6 arrow function. It's basically same as function (){},
with some differences such as not rebinding this.
Reference on MDN
Related
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.
This question already has answers here:
What does the arrow function with a () after means? [duplicate]
(3 answers)
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 4 years ago.
I just came across this code:
routes: routes.map(route => ({
Notice the arrow function being followed by a closure. Why are closures used here?
see this repo for reference: https://github.com/prograhammer/vue-pizza/blob/master/src/http/router.js#L33
It returns an object. The parenthesis is to denote that this is an object not a block.
() => {return {hello: 'world' } } === () => ({hello: 'world'})
This question already has answers here:
Location of parenthesis for auto-executing anonymous JavaScript functions?
(4 answers)
Closed 7 years ago.
I often use the closure syntax
var something = (function () {
//TODO: do something
}());
and, I often find people use this syntax
var something = (function () {
//TODO: do something
})();
If both the two behaves the same way, what are the differences between the two?
There's no real difference. Both statements contain function expressions that evaluate to functions that are immediately executed.
This question already has answers here:
What is the purpose of a self executing function in javascript?
(21 answers)
What is the (function() { } )() construct in JavaScript?
(28 answers)
Closed 8 years ago.
This probably is not a new question, but where is the purpose of wrapping a function or codes inside ((function () {...})());? for instance,
//Self-evoking anonymous functions
((function () {
alert("hi");
})());
What's the difference with no wrap,
alert("hi");
I still get the same result - hi
What can you pass/ put in the brackets in the end bit - })());? and why?
Using a function creates a scope. You can have params inside and do more than just alerting.
Now you can do the same without a function, but then you will keep the state on the window object and thats something that you would like to prevent in some cases.
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 8 years ago.
I've been pursuing the codegolf site lately with a focus on Javascript. I keep seeing something that I don't understand and can't find an answer to. Check out this answer. The first line starts with F=a=>. I assume that this is a shorthand function declaration, but I can't find any reference to it elsewhere on the web. Can someone explain, or point me to a good document about this syntax?
Feel free to tag this question. Hard to tag when I don't know what I'm looking at.
If you look at the ES6 definition document this is the Arrow function symbol
Looking at MDN's documentation this is just shorthand for declaring an anonymous function
An interesting difference is that the arrow function syntax provides a closure so (quoting from MDN)
In ECMAScript 3/5, this issue was fixed by assigning the value in this
to a variable that could be closed over.
function Person() {
var self = this; // Some choose `that` instead of `self`.
// Choose one and be consistent.
self.age = 0;
setInterval(function growUp() {
// The callback refers to the `self` variable of which
// the value is the expected object.
self.age++;
}, 1000);
}
Alternatively, a bound function could be created so that the proper
this value would be passed to the growUp function.
Arrow functions capture the this value of the enclosing context, so
the following code works as expected.
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
In those two examples you can see the difference very clearly
function() {
console.writeline('es5');
}
versus
() => {
console.writeline('es6');
}
Yea, that is a shorthand for a function declaration.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions