This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 7 years ago.
I am just learning Spring react, I don't know Javascript very well. I got to code:
componentDidMount: function () {
client({method: 'GET', path: '/api/employees'}).done(response => {
this.setState({employees: response.entity._embedded.employees});
});
There is written:
componentDidMount is the API invoked after React renders a component
in the DOM.
I was looking for what Javascript operator => means. But don't found anything.
This is an arrow function.
An arrow function expression (also known as fat arrow function) 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.
You can see a simple example:
var vec = ['a', 'ab', 'abc'];
var test = vec.map(i => i.length);
alert(test); // 1,2,3
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's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 4 years ago.
In ES5, other properties in object can be accessed by using this keyword.
Same behavior but can't able to access other property in object by using this in arrow function (ES6)
Kindly run attached code snippet see the output
var person={
"firstName":"PraveenRaj",
"lastName":"D",
"getFullName": function() { return this.firstName+" "+this.lastName}
}
var person1={
"firstName":"PraveenRaj",
"lastName":"D",
"getFullName": () => this.firstName+" "+this.lastName
}
console.log(person.getFullName());
console.log(person1.getFullName());
Like all JavaScript variables, both the object name (which could be a normal variable) and the property name are case sensitive. You access the properties of an object with a simple dot-notation.
Following is the syntax for accessing Object Properties.
objectName.propertyName
An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.
Credits: Docs, Reference Answer
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
How does the "this" keyword in Javascript act within an object literal? [duplicate]
(4 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 5 years ago.
Lets say I have this Object:
api = {
x: 2,
func: () => {
this.x
}
}
If I call api.function, how come this is scoped to the window and not api?
If I turn func into a regular anonymous function this is scoped to the api and not the window.
Can anyone explain this to me? I thought the arrow notation inherited the parent this, which is api
Arrow functions inherit this from their lexical scope, meaning the same value that this would mean in the scope they're defined in.
That's whatever this is in the function that contains that code; it has nothing to do with where in that scope you put the arrow function.
Simple explanation: problem is that the function is created before the api object and it is specifically bound to the window in your case because you are in a window scope. If I slightly rewrite your code using ES5 bind you can get the following
const func = function() {
this.x
}.bind(this); // here this is a window in your case
api = {
x: 2,
func: func
}
This code is equivalent to yours. Here you can clearly see that your function does not belong to the object api.
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 7 years ago.
What does the "=>" operator do in Javascript? This is probably a very basic question, but it is ungoogle-able. Does this operator have a name (to help me find it in references)? It seems to be some kind of remapping function. An example of where I've found it:
let maxLen = Math.max.apply(null, arrays.map(v => v.length)), out = [];
for finding the longest array held in arrays.
They are called arrow functions. It's an alternate way of defining a function introduced in Ecmascript 6.
An arrow function expression (also known as fat arrow function) 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.
You example is equivalent to:
let maxLen = Math.max.apply(null, arrays.map(function(v){ return v.length; })), out = [];
There is an in depth explanation of arrow functions here, which explains them far better than I can.
This is a ES6 shortcut, it means:
arrays.map(function ( v ) {
return v.length;
});
With the arrow you can execute a statement, like in your example, or a code block:
arrays.map(v => {
// do something long with v
return theValue;
});
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 7 years ago.
In a tutorial, the presenter used an unfamiliar syntax in an array.map function expression like this:
.map(x => x.trim());
map() takes a callback function, suggesting thet this expression is creating a function. Searching for "=>" here and generally on google returned no recognizable hits. Searching on symbols can often be difficult, but I can't think of a good way to learn what this is doing.
What is the meaning of this expression?
It's an arrow function:
An arrow function expression (also known as fat arrow function) 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.
From the doc, these two are equivalent:
a.map(function(s){ return s.length });
a.map( s => s.length );
This syntax was added to Javascript in ES 2015.
These are lambda functions, ECMA defines them as arrow functions.
Arrow Functions
What you see is an arrow function which is only valid syntax in ES6.
It is almost the same as saying .map(function(x) { return x.trim(); })