How do I get the right "this" in an Array.map?
Just realized I should have read the documentation for Array.map()
more carefully. One simply needs to pass in the this
value as the second parameter of map()
http://codepen.io/anon/pen/VLggpX
a = {
foo: 'bar',
things: [1, 2, 3],
showFooForEach: function() {
this.things.map(function(thing) {
console.log(this.foo, thing);
}, this);
}
}
a.showFooForEach();
In addition, understanding how bind()
, call()
and apply()
work are a must for serious JavaScript developers. These allow us to skip silly assignments like
var self = this;
myItems.map(function(item) {
self.itemArray.push(item);
});
with
myItems.map(function(item) {
this.itemArray.push(item);
}.bind(this));
As of 2018, you could use an arrow function:
a = {
foo: 'bar',
things: [1, 2, 3],
showFooForEach: function() {
this.things.map((thing) => {
console.log(this.foo, thing);
});
}
}
a.showFooForEach();
You could use bind()
it to your context.
a = {
foo: 'bar',
things: [1, 2, 3],
showFooForEach: function() {
this.things.map(function(thing) {
console.log(this.foo, thing);
}.bind(this));
}
}
a.showFooForEach();
That's because of JS lexical scope
From MDN:
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
Read more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
And here: http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/
Also, map()
does accept a second parameter as "this"
a = {
foo: 'bar',
things: [1, 2, 3],
showFooForEach: function() {
this.things.map(function(thing) {
console.log(this.foo, thing);
}, this);
}
}
a.showFooForEach();
From MDN map()
documentation:
Parameters
callback Function that produces an element of the new Array
thisArg Optional. Value to use as this when executing callback.
Further reading: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Short advice
PS.: Array.map is usually called when you want to do something with your array, for example adding 10 to each item, or something like that... Since the Array.map returns a new array. If you're only using console.log or something that wont affect the array itself you could just use a Array.forEach call instead