JavaScript - ForEach

Question

I have a JavaScript array of objects. Something like this:

var people = [
  { id:1, firstName: 'Joe', lastName: 'Smith' },
  { id:2, firstName: 'Bill', lastName: 'Smith' }
];

I am iterating through the people using forEach. Here is my code:

function doSomething() {
  people.forEach(function(person, self) {
    self.helpPerson(person);
  }, this);
}

function helpPerson(person) {
  alert('Welcome ' + person.firstName);
}

I am trying to call helpPerson from within the forEach loop. However, when I attempt to call it, I get an error that says:

TypeError: self.helpPerson is not a function

If I add console.log(self);, "0" gets printed to the console window. This implies that I'm not passing in my parameter correctly. Or, I'm misunderstanding closures (just when I thought I fully understood it :)).

So, why doesn't self exit?

what do you like to achieve with self? – Nina Scholz Dec 09 '15 at 19:16 — Nina Scholz, Dec 09 '15 at 19:16

score 7 · Accepted Answer · edited May 23 '17 at 12:04

You don't need to invoke helpPerson with a this, self, or any other context. Just invoke it directly:

var people = [
  { id:1, firstName: 'Joe', lastName: 'Smith' },
  { id:2, firstName: 'Bill', lastName: 'Smith' }
];

function doSomething() {
  people.forEach(function(person) {
    helpPerson(person);
  });
}

function helpPerson(person) {
  alert('Welcome ' + person.firstName);
}

When you log self to the console you are seeing "0" because it is printing the index of the loop iteration.

See the documentation for forEach to see what callbacks are passed to it's forEach function.

Typically, self is used to capture a context in a closure (var self = this;). Please see the related links to this question because that is a very important concept.

score 0 · Answer 2 · answered Dec 09 '15 at 19:12

0

helpPerson is a global variable, not a property of the array.

self.helpPerson(person); should be helpPerson(person);

answered Dec 09 '15 at 19:12

Quentin

914,110
126
1,211
1,335

score 0 · Answer 3 · answered Dec 09 '15 at 19:13

forEach passes two arguments to the callback: the item being iterated and its index. That's why console is logging 0.

You are expecting this to pass as an argument, when it's actually more magical than that. You can use this inside the callback and it will use the context of whatever this you passed as an argument to the forEach

function doSomething() {
  people.forEach(function(person, index) {
    this.helpPerson(person); //Or for brevity, you can just remove `this` here
  }, this);
}

function helpPerson(person) {
  alert('Welcome ' + person.firstName);
}

score 0 · Answer 4 · answered Dec 09 '15 at 19:13

forEach takes 2 parameters : a function(val, index, arr) and a this binding argument .

 people.forEach(function(person, self) {
    self.helpPerson(person); // self here would be array index number
  }, this);

the way you've defined helpPerson() you can call it directly like helpPerson(person);

Nina Scholz · Answer 5 · 2015-12-09T19:22:49.930

Please see comments

var people = [
    { id:1, firstName: 'Joe', lastName: 'Smith' },
    { id:2, firstName: 'Bill', lastName: 'Smith' }
];

function doSomething() {
    people.forEach(function(person) { // no parameter for index required
        helpPerson(person);           // just call the function
    });                               // no other parameter is required
}

function helpPerson(person) {
    alert('Welcome ' + person.firstName);
}

doSomething();

JavaScript - ForEach

5 Answers5