Week4-(2): JavaScript `this` 이해하기

자바스크립트의 this 이해하기

자바스크립트를 공부하면서 가장 헷갈리는 개념 중 하나가 바로 this입니다. this는 함수가 호출될 때 그 함수가 속한 객체를 가리키는데, 상황에 따라 가리키는 대상이 달라질 수 있습니다. 이번 글에서는 자바스크립트에서 this가 어떻게 동작하는지 여러 가지 예제를 통해 정리해봤습니다.

1. 전역 문맥(Global Context)

전역 문맥에서는 this가 전역 객체를 가리킵니다. 브라우저 환경에서는 전역 객체가 window입니다.

예시:

console.log(this); // Window 객체를 출력

2. 함수 문맥(Function Context)

일반 함수 안에서는 this가 함수를 호출한 객체를 가리킵니다. 하지만, 전역 문맥에서 호출된 일반 함수의 경우 this는 전역 객체를 가리킵니다.

예시:

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

showThis(); // 전역 객체를 출력 (브라우저에서는 Window)

엄격 모드에서는 this가 undefined가 됩니다.

예시:

'use strict';

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

showThisStrict(); // undefined 출력

3. 메서드 문맥(Method Context)

객체의 메서드에서 this는 그 메서드를 소유한 객체를 가리킵니다.

예시:

const obj = {
  name: 'Alice',
  getName: function() {
    console.log(this.name);
  }
};

obj.getName(); // 'Alice' 출력

4. 생성자 함수(Constructor Function)

생성자 함수에서 this는 새로 생성되는 객체를 가리킵니다.

예시:

function Person(name) {
  this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // 'Bob' 출력

5. 이벤트 핸들러(Event Handler)

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

예시:

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

<script>
document.getElementById('btn').addEventListener('click', function() {
  console.log(this); // 클릭된 버튼 요소 출력
});
</script>

6. call, apply, bind 메서드

call, apply, bind 메서드를 사용하면 this의 값을 명시적으로 설정할 수 있습니다. call과 apply는 즉시 함수를 호출하고, bind는 새로운 함수를 반환합니다.

예시:

function greet() {
  console.log(this.name);
}

const person = { name: 'Charlie' };

greet.call(person); // 'Charlie' 출력
greet.apply(person); // 'Charlie' 출력

const greetPerson = greet.bind(person);
greetPerson(); // 'Charlie' 출력

7. 화살표 함수(Arrow Function)

화살표 함수는 자신만의 this를 가지지 않고, 주변 문맥의 this를 상속받습니다. 이를 렉시컬 this라고 합니다.

예시:

const obj = {
  name: 'David',
  getName: function() {
    const innerFunc = () => {
      console.log(this.name);
    };
    innerFunc();
  }
};

obj.getName(); // 'David' 출력

결론

자바스크립트에서 this는 함수가 호출되는 문맥에 따라 달라집니다. 전역 문맥, 함수 문맥, 메서드 문맥, 생성자 함수, 이벤트 핸들러, call, apply, bind 메서드, 그리고 화살표 함수 등 각각의 경우를 이해하는 것이 중요합니다. this의 동작 방식을 명확히 이해하면 자바스크립트 코드를 작성할 때 큰 도움이 될 것입니다.

이 글을 통해 자바스크립트의 this에 대한 이해가 좀 더 쉬워졌기를 바랍니다. 공부하면서 정리한 내용을 공유해 보았는데, 도움이 되었으면 좋겠습니다.