What Is The Purpose Of Thisarg In .foreach?

JavaScript's forEach documentation states that the .forEach syntax is: arr.forEach(callback[, thisArg]) What is the usage of thisArg?

Solution 1:

thisArg refers to context which callback should be called, basically it is what this refers to inside callback. For example:

var myObject = { name: 'myObject' };

[1,2].forEach(function(item) { 
 console.log(item); // 1, 2console.log(this === myObject); // true
}, myObject)

Solution 2:

The thisArg can be provided to change the inner this of the callback function. See below.

---

If you were confused by the fact, that thisArgdoes nothing when using an arrow function:

var myObject = { name: 'myObject' };

[1,2].forEach(item => { 
  console.log(item);                     // 1, 2console.log(this === myObject, this);  // false  Window {}
}, myObject)

It's because

arrow functions cannot be bound

---

Context binding with normal function.

var myObject = { name: 'myObject' };

[1,2].forEach(function(item){ 
  console.log(item);                     // 1, 2console.log(this === myObject, this);  // true  {name: "myObject"}
}, myObject)

If you don't specify myObject at this point, the this inside would point to Window as with the arrow function.

Solution 3:

A this value is a special object which is related with the execution context.

An object in which context the execution context is activated

The value of this is determinate only once when entering the context And it is not possible to assign a new value to this

in your case, providing thisArg is like

arr.forEach(callback.bind(thisArg));

forEach, simplified it for you, asking a seperate optional param

Now, if you run this forEach with out this

arr.forEach(function(item) {
    console.log(this === window); //trueconsole.log(this === arr);    //false
});

you get the point!

Solution 4:

I think these tests will make whole thing clear just test in your browser console

arr=[0];

arr.forEach(function(item) {
    console.log(this === window); //trueconsole.log(this === arr);    //false
});

arr.forEach(function(item) {
    console.log(this === window); //trueconsole.log(this === arr);    //false
},this);

arr.forEach(function(item) {
    console.log(this === window); //falseconsole.log(this === arr);    //true
},arr);

arr.forEach(function(item) {
    console.log(this === window); //falseconsole.log(this === arr);    //false
},0);

Solution 5:

I use this often in the context of prototypes and functions:

varMyClass = function() {
  this.GlobalVar = 3;
}

MyClass.prototype.func1 = function(a) {
  return (a == this.GlobalVar);
}

MyClass.prototype.func2 = function(arr) {
  arr.forEach(function(item) {
    console.log(this.func1(item));
  }, this); // use of thisArg
}

MyClass.prototype.func3 = function(arr) {
  var that = this;
  arr.forEach(function(item) {
    console.log(that.func1(item));
  }); // also possible without using thisArg
}

MyClass.prototype.func4 = function(arr) {
  arr.forEach(function(item) {
    console.log(this.func1(item));
  }); // implementation raising an error, because this.func1 does not exist in that context
}

var arr = [0, 1, 3, 4, 3, 1];
var myClass = newMyClass();
myClass.func2(arr);
/* prints:
false
false
true
false
true
false
*/
myClass.func3(arr) /* same as func2 */
myClass.func4(arr); /* Fails with
Error: {
  "message": "TypeError: this.func1 is not a function",
  "filename": "https://stacksnippets.net/js",
  "lineno": 35,
  "colno": 26
}
*/