callback / function / thisArg : example

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

 

 

다음 코드는 배열의 각 요소에 대해 한 줄을 기록합니다:

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// 인덱스 2는 배열의 그 위치에 항목이 없기에
// 건너뜀을 주의하세요.
[2, 5, , 9].forEach(logArrayElements);
// 기록:
// a[0] = 2
// a[1] = 5
// a[3] = 9

thisArg 사용

다음 예제는 배열의 각 항목에서 객체의 속성을 갱신합니다:

function Counter() {
  this.sum = 0
  this.count = 0
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry
    ++this.count
  }, this)
  // ^---- 주의
}

const obj = new Counter()
obj.add([2, 5, 9])
obj.count
// 3
obj.sum
// 16

thisArg 매개변수(this)를 forEach()에 제공했기에, callback은 전달받은 this의 값을 자신의 this 값으로 사용할 수 있습니다. 

화살표 함수 표현식을 사용하여 함수 인수를 전달하는 경우 thisArg 매개변수는 화살표 함수가 this 값을 렉시컬(lexical, 정적) 바인딩하기에 생략될 수 있습니다.

 

 

What is the purpose of thisArg in .forEach?

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?

 

 

 

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

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

var myObject = { name: 'myObject' };

[1,2].forEach(item => { 
  console.log(item);                     // 1, 2
  console.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, 2
  console.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.

 

 

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); //true
    console.log(this === arr);    //false
});

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

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

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