[JS ES6] this 키워드를 알아보자 2. event listener와 constructor

1️⃣ this의 기본 개념 복습

• 일반 함수 내의 this: 일반 함수에서 this를 사용하면 전역 객체(window)를 가리킵니다.
  
• 오브젝트의 메소드 내의 this: 오브젝트 내부의 함수(메소드)에서 this는 해당 메소드를 호출한 오브젝트를 참조합니다.
  
• constructor 내의 this: constructor(생성자 함수) 내부에서의 this는 new 키워드를 사용해 새로 생성되는 객체를 나타냅니다.
  

---

2️⃣ Constructor와 new 키워드

• 생성자 함수의 개념: 여러 개의 유사한 객체를 생성할 때, 단순히 객체를 복사하는 것이 아니라, 생성자 함수를 만들어 새 객체를 "기계"처럼 생산할 수 있습니다.
  
• 생성자 함수 작성 예제:

  function 기계() {
    this.이름 = 'Kim';
  }
  

  • 위 함수에서 this.이름 = 'Kim';은 새로 생성되는 객체에 이름이라는 키를 만들고, 그 값으로 'Kim'을 할당하는 역할을 합니다.
• 객체 생성 방법:

  var 오브젝트 = new 기계();
  // 결과: 오브젝트는 { 이름: 'Kim' } 형태의 객체가 됩니다.
  

---

3️⃣ 이벤트 리스너와 this

• 이벤트 리스너 내의 this: 이벤트 리스너(예: addEventListener) 내부에서의 this는 e.currentTarget과 동일하며, 이벤트가 동작하는 HTML 요소(리스너가 부착된 요소)를 가리킵니다.

  document.getElementById('버튼').addEventListener('click', function(e) {
    console.log(this); // this === e.currentTarget, 즉 '버튼' 요소
  });
  

---

4️⃣ 콜백 함수 내부에서의 this 문제와 해결 방법

Case 1. 이벤트 리스너 내부에서 콜백 함수 사용 시

• 문제 상황: 이벤트 리스너 내부에서 forEach와 같은 메소드의 콜백 함수 내부에서 this를 사용하면,
  콜백 함수 자체는 일반 함수이기 때문에, this가 전역 객체(window)로 바인딩될 수 있습니다.

  document.getElementById('버튼').addEventListener('click', function(e) {
    var 어레이 = [1, 2, 3];
    어레이.forEach(function() {
      console.log(this); // 예상치 못한 결과 (window 또는 undefined)
    });
  });
  

Case 2. 오브젝트의 메소드 내부에서 콜백 함수 사용 시

• 문제 상황: 오브젝트 내부에서 메소드 내의 forEach 콜백 함수로 일반 함수를 사용하면, this는 메소드의 this(즉, 오브젝트)가 아닌 전역 객체로 바뀌게 됩니다.

  var 오브젝트 = {
    이름들: ['김', '이', '박'],
    함수: function() {
      this.이름들.forEach(function() {
        console.log(this); // 예상과 다른 결과 (전역 객체)
      });
    }
  };
  

• 해결 방법: Arrow Function 사용 ES6의 arrow function은 자신만의 this를 생성하지 않고, 외부(상위 스코프)의 this를 그대로 참조합니다. 따라서, 콜백 함수 내부에서 arrow function을 사용하면 원하는 this(예: 오브젝트 자신)를 유지할 수 있습니다.

  var 오브젝트 = {
    이름들: ['김', '이', '박'],
    함수: function() {
      this.이름들.forEach(() => {
        console.log(this); // 올바르게 오브젝트를 가리킴
      });
    }
  };
  

---

📌 정리

• 일반 함수 vs 메소드 vs 생성자:
  • 일반 함수: 전역 객체(window)
  • 메소드: 해당 오브젝트
  • 생성자 함수: 새로 생성된 객체
• 이벤트 리스너에서 this:
  • this는 이벤트가 발생한 요소(즉, e.currentTarget)를 의미합니다.
• 콜백 함수 내부의 this 문제:
  • 일반 함수의 콜백은 자신의 this 바인딩을 새로 만들기 때문에, 원하는 값을 참조하지 않을 수 있음
  • arrow function을 사용하면 외부 스코프의 this를 유지할 수 있어 편리합니다.