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
Related
This question already has answers here:
Meaning of "this" in node.js modules and functions
(4 answers)
Closed 2 years ago.
Consider the following example:
const f1 = () => this;
function f2() {
return this;
}
console.log(f1(), f2());
When this code is executed in a browser, the result is as follows:
> window window
But when this code is executed in Node.js, the result is not quite as expected:
> {} global
Why in Node.js the empty object was taken as the context of an arrow function instead of Global Object (global on this platform)?
In nodejs, when you use arrow operator, the this operator won't contain the reference object by nature....thatswhy if we wanted to refer any variables using 'this' , we avoid using arrow operators in function definition.
Therefore in your case this is the reason why it's printing empty object.
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.
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
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(); })
This question already has answers here:
What is the difference between a function expression vs declaration in JavaScript? [duplicate]
(5 answers)
var functionName = function() {} vs function functionName() {}
(41 answers)
"new" operator before declaring function
(2 answers)
Closed 7 years ago.
I'm having a hard time understanding the difference between these two functions. Are they the same? It seems like in the first case, appleOne is the name of the object, and in the second case, appleTwo is the name of the function. However, I read that functions and objects are the same in Javascript, so I'm confused...
var appleOne = new function(color) {
this.color = color;
}
function appleTwo (color) {
this.color = color;
}
Reference: Code from http://www.phpied.com/3-ways-to-define-a-javascript-class/
The difference is that the object associated with the variable appleTwo is a function object, which the object associated with the variable appleOne is not a function: it is a "regular" object with the field color.
I wouldn't say that "functions and objects are the same" in JavaScript. What is true is that there are several kinds of objects in JavaScript:
regular objects
arrays
functions
regular expressions
In the first example, you used an anonymous function as a constructor, so the object you produced and assigned to appleOne is a "regular" object. The second example uses a function declaration to define a function.
If your question was not about the difference, but rather why the first case "works" (because it is not a very common pattern), there are several S.O. questions available with the answer.