This question already has answers here:
What does arrow function '() => {}' mean in Javascript? [duplicate]
(2 answers)
Closed 7 years ago.
The following code:
angular.module('socially').controller('PartiesListCtrl', function ($scope)
{
$scope.helpers({
parties: () => {
return Parties.find({});
}
});
});
demo at Angular Meteor Tutorial
Can't understand the syntax used for parties: object. Why is => used ? Is there more explanation for this kind of anonymous function.
This is an arrow function, new syntax from ES2015 standard which was accepted this year. Not only arrow functions are shorter in declaration and sometimes looks nicer, they also share binding context with their surrounding code
!function() {
this.name = 'global';
var nonArrowFunc = function() {
console.log(this.name); // undefined, because this is bind to nonArrowFunc
}
var arrowFunc = () => {
console.log(this.name); // this taken from outer scope
}
}();
You can read more about arrow functions here and here and here
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)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 1 year ago.
let greetings = {
fullName : "elham zeinodini",
getFullName : () => {
return this.fullName;
},
Greet : message => console.log(`${message} ${this.getFullName()} !!`)
}
console.log(greetings.fullName);
greetings.Greet("Hello");
let greetings = {
fullName : "elham zeinodini",
getFullName() {
return this.fullName;
},
Greet(message) {
console.log(`${message} ${this.getFullName()} !!`)
}
}
console.log(greetings.fullName);
greetings.Greet("Hello");
It means, quite literally, that the property getFullName on the context this is not a function. You're trying to invoke something that isn't a function.
Why is that? Because you can't use this like you are to refer to the surrounding object using an arrow function. Depending on your environment, it might refer to the window object (in the browser). And the window object doesn't have a function called getFullName. So that property evaluates to undefined. Which isn't a function, hence the error.
Use a "regular" function declaration instead. getFullName: function() {...}
The issue is with your arrow functions, which don't allow you to capture the this context.
Rewrite as follows:
let greetings = {
fullName : "elham zeinodini",
getFullName() {
return this.fullName;
},
Greet(message){
console.log(`${message} ${this.getFullName()} !!`)
}
}
console.log(greetings.fullName);
greetings.Greet("Hello");
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
What does "this" refer to in arrow functions in ES6?
(10 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 1 year ago.
var cat = {
lives: 9,
jumps: () => {
console.log(this.lives)
}
}
I have heard that 'this' keyword in arrow function will point to the parent scope, so I have tried putting a variable with lives=9 in global object in node and this doesn't seems to work, am I missing something?
var lives=9
var cat = {
lives: 9,
jumps: () => {
console.log(this.lives)
}
}
Arrow functions have a lexical this which means that the value of this inside the function is the same as the value of this outside the function.
It does not mean that this points to an object containing all the variables from outside the function.
const anObject = {
aValue: "example value",
aMethod: function() {
console.log("aMethod", this.aValue);
const arrow = () => {
console.log("arrow", this.aValue);
}
arrow();
}
}
anObject.aMethod();
const copyOfAMethod = anObject.aMethod;
copyOfAMethod();
Because aMethod is called as a method on anObject, the value of this inside aMethod is anObject.
Because arrow is declared inside aMethod, the value of this is the same as it is for aMethod.
If the function is copied elsewhere so it has a different this value, then the arrow function created when the copy is called it will have the same different value.
This question already has answers here:
What does the colon (:) in JavaScript represent?
(2 answers)
Closed 6 years ago.
I'm just learning to make JavaScript games using Phaser and have a question.
I don't understand what the colon means when defining a function. For example:
attackEnemy: function(player, ground) {
}
And how is it different to doing it like this...
function attackEnemy() {
}
When you are using attackEnemy:, you are not doing it outside. You should be doing it inside an object, say:
var game = {
attackEnemy: function(player, ground) {
},
otherProperty: value
};
An object can have function as a member as well. This is how you define functions in the objects.
You can use colon syntax when defining a key for object, like this:
var object = {
attackEnemy: function(player, ground) {
}
}
When you want define a function as separate element, you can do that (Function Declaration):
function attackEnemy() {
}
or that (Function Expression):
var attackEnemy = function() {
}
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Closed 7 years ago.
This code below should work as expected, and log "meow", here an example.
function Cat () {
this.animalNoise = 'meow'
}
Cat.prototype.sound = () => {
console.log(this.animalNoise)
}
let cat = new Cat()
cat.sound()
It doesn't work, this error appears TypeError: Cannot read property 'animalNoise' of undefined and when you convert the arrow function to an actual function declaration it works. It seems like with the arrow function, I no longer have access to this. What's going on here?
To be clear, the above code does not work where the following does, and I'm very curious why.
function Cat () {
this.animalNoise = 'meow'
}
Cat.prototype.sound = function() {
console.log(this.animalNoise)
}
let cat = new Cat()
cat.sound()
Arrow functions perform lexical binding and uses the surrounding scope as the scope of this. For example, imagine (for some weird reason) you define Cat inside of a Dog constructor.
function Dog() {
// do dog like things
function Cat() { ... }
Cat.prototype.sound = () => {
// this == instance of Dog!
};
}
So whatever the surrounding scope is becomes the scope of an arrow function.
This question already has answers here:
What do parentheses surrounding an object/function/class declaration mean? [duplicate]
(7 answers)
Closed 8 years ago.
I consider myself a pretty strong javascript coder and am familiar with most all of the javascript syntax. But have been puzzled by the following syntax:
function() {
return function() {
}
} ();
Can someone explain what the parenthesis at the end is supposed to be used for?
So, the expression:
(function() {
return function() {
}
})
Evaluates to a function (without a name in this case) that returns some other function.
Adding ():
(function() {
return function() {
}
})();
Would simply call that function.
Another way to write this would be:
var foo = function() {
return function() {
}
};
foo();
It is a self invoking function. Meaning a function that declares and calls itself.
Another form would be:
(function() {
return function() {
}
}());