How to function call using 'this' inside forEach loop

Question

In the following object, I have a problem using the 'this' reference:

function SampleObject(){
    this.addObject = function(object){...}
    ...
    // more code here
    ...
    this.addNewObjects= function(arr){
        arr.forEach( function (obj) {
            this.addObject(new Obj(obj.prop1, obj.prop2));
        });
    }
}

I'm assuming the context is changing and that 'this' refers the iterated 'obj', and not 'SampleObject'. I've solved the problem using a normal for loop however, i'm curuois to why this is not working, and would like to know if there is another way to do this.

@javinor thanks, these articles were very helpfull. Function creates scope, and so 'this' is owned by the Window object, which is the default owner of 'this'. — user3339411
– user3339411, Commented Apr 14, 2015 at 13:46

jcubic · Accepted Answer · 2019-01-13 11:26:47Z

141

You can store this in variable:

var self = this;
this.addNewObjects = function(arr){
    arr.forEach(function(obj) {
        self.addObject(new Obj(obj.prop1, obj.prop2));
    });
}

or use bind:

this.addNewObjects = function(arr) {
    arr.forEach(function(obj) {
        this.addObject(new Obj(obj.prop1, obj.prop2));
    }.bind(this));
}

And side note, without those this will be window object not obj. This is always object that was created using new keyword or window object if it's normal function. In strict mode this will be undefined in this case.

UPDATE: and with ES6 you can use arrow function:

this.addNewObjects = function(arr) {
    arr.forEach((obj) => {
        this.addObject(new Obj(obj.prop1, obj.prop2));
    });
}

arrow functions don't have their own this and they get it from outer scope.

UPDATE2: from @viery365 comment you can use this as second argument to forEach and it will make context for the function:

this.addNewObjects = function(arr) {
    arr.forEach(function(obj) {
        this.addObject(new Obj(obj.prop1, obj.prop2));
    }, this);
}

You can read this on MDN forEach page

edited Jan 13, 2019 at 11:26

answered Apr 14, 2015 at 12:01

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

viery365 Over a year ago

In the case of forEach()(related to the question) one can also use the 'built-in' second parameter - thisArg after the callback. Example: arr.forEach(callback, this); documentation

jcubic Over a year ago

@viery365 Oh didn't know that, you should add your own answer with our solution. That may be better for just forEach().

viery365 Over a year ago

There is no option to answer for this particular question maybe because was marked as a duplicate. But anyway your answer is almost perfect and I also learnt from it. My comment was just a complement.

jcubic · Accepted Answer · 2022-07-08 12:56:30Z

1

const array1 = [
  {name : "john", age: 20}, {name : "sarah", age: 70}
  ];

array1.forEach(element => this.print(element));

print = (data) =>
{
  console.log(data.name);
}
// expected output: "john"
// expected output: "sarah"

There is a better way to do this

array.forEach(obj => this.functionName(params));

edited Jul 8, 2022 at 12:56

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

answered Oct 23, 2020 at 10:03

david reachio

191 bronze badge

1 Comment

Eugene Over a year ago

This answer is not clear to me.

Collectives™ on Stack Overflow

How to function call using 'this' inside forEach loop

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related