1. this 키워드 이해하기

this는 객체를 가리키는 참조 변수입니다. this는 호출되는 위치에 따라 다른 값을 출력하기 때문에 우리에게 혼란을 줍니다.

아래 예제에서 this는 위의 경우에는 window, 아래의 경우에는 myObj입니다. 분명 같은 기능을 하고 있는데 말이죠.

function a(){ console.log(this) }
a();

let myObj = {
    val1: 100,
    func1: function () {
        console.log(this);
    }
}

myObj.func1();

여기서는 상황마다 this가 가리키는 값을 출력해보는 시간을 가지도록 하겠습니다. this 는 상당히 혼란스러운 내용이니 추후 중급자 과정으로 넘어갈 때 제대로 정리할 필요가 있습니다.

1.1 전역 컨텍스트

console.log(this); // 브라우저에서는 window 객체

• 전역 컨텍스트에서 this는 전역 객체(브라우저에서는 window)를 가리킵니다.

1.2 함수 호출

function foo() {
  console.log(this); // 브라우저에서는 window 객체
}

foo();

• 일반 함수 내부에서 this는 전역 객체를 가리킵니다.

1.3 메서드 호출

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, I'm ${this.name}`); // Hello, I'm Alice
  }
}

person.greet();

• 객체의 메서드 내에서 this는 그 메서드를 호출한 객체를 가리킵니다.

1.4 이벤트 헨들러

이벤트 핸들러 내에서 this는 이벤트가 발생한 DOM 요소를 가리킵니다.

<button id="btn">Click me!</button>

<script>
const button = document.getElementById('btn');
button.addEventListener('click', function() {
  console.log(this); // <button id="btn">Click me!</button>
});
</script>