📖 TIL - this가 저기로 가버렸네?! map 메서드와 this의 숨바꼭질

📌 문제 설명

this에 대해서 공부를 하다가 this binding하는 부분에 대해서 직접 예제를 만들어 이해를 해보고자, Array.prototype.map 메서드를 직접 구현해보았고, 그 과정에서 this 바인딩의 중요성을 발견했습니다.
특히 콜백 함수 내부에서의 this가 예상과 다르게 동작하는 문제를 해결하는 과정을 다룹니다.

예시

// map 메서드 구현
Array.prototype.map = function () {
  var newArr = [];
  console.log(this);  // [1, 2, 3]

  for (var i = 0; i < this.length; i++) {
    console.log(this[i]);
    newArr.push(this[i]);
  }
  return newArr;
};

var newArr = [1, 2, 3].map(function(item) {
  console.log(this);  // [1, 2, 3]
  return item * 2;
});

console.log("result: ", newArr); // [1,2,3] - 예상과 다르게 [2,4,6]이 아님!

🤔 문제 접근

1. map 메서드가 예상대로 동작하지 않는 이유 분석
2. this 바인딩과 콜백 함수의 관계 파악
3. call 메서드를 통한 해결 방법 모색

💡 해결 방법

1. 이런.. callback을 넘기고 받지 않으니, 제대로 동작할리가 있나..

Array.prototype.map = function (callback) {
  var newArr = [];
  for (var i = 0; i < this.length; i++) {
    newArr.push(this[i]);  // 어라? callback은 어디로..?
  }
  return newArr;
};

2. callback은 호출했는데.. this가 엉뚱한 곳을 가리키네?!

Array.prototype.map = function (callback) {
  var newArr = [];
  for (var i = 0; i < this.length; i++) {
    var mappedValue = callback(this[i]);  // this는 어디로 갔을까..
    newArr.push(mappedValue);
  }
  return newArr;
};

3. 아하! call로 this를 잡아주니 드디어 됐다! 🎉

Array.prototype.map = function (callback, thisArg) {
  var newArr = [];
  for (var i = 0; i < this.length; i++) {
    // thisArg가 없을 경우 this를 사용하고, call로 this를 명시적 바인딩!
    var mappedValue = callback.call(thisArg || this, this[i]);
    newArr.push(mappedValue);
  }
  return newArr;
};

🔍 코드 설명

1. callback.call(thisArg || this, this[i])

   • call 메서드를 사용하여 콜백 함수의 this를 명시적으로 바인딩
   • thisArg가 없을 경우 현재 배열(this)을 바인딩
   • 두 번째 인자로 현재 처리 중인 요소(this[i])를 전달

2. thisArg의 역할

   • 콜백 함수 내부에서 사용할 this 값을 지정
   • 지정하지 않으면 전역 객체를 가리키게 됨

✨ 새롭게 배운 점

1. 콜백 함수 내부의 this는 기본적으로 전역 객체를 가리킴
2. call/apply/bind 메서드로 this를 명시적으로 바인딩 가능
3. Array.prototype의 메서드들은 thisArg 매개변수를 통해 this 바인딩을 제어할 수 있음

🚀 이런 점이 효율적이에요

1. call 메서드를 사용하여 this를 명시적으로 바인딩함으로써 예측 가능한 동작 보장
2. thisArg 매개변수를 통해 콜백 함수의 컨텍스트를 유연하게 제어 가능

⭐️ 참고 자료

• MDN - Array.prototype.map()
• MDN - Function.prototype.call()