[JavaScript] this 키워드 완벽 이해하기

JavaScript를 배우면서 가장 헷갈리는 개념 중 하나가 바로 this 키워드입니다. this는 상황에 따라 다른 객체를 가리킬 수 있기 때문에 초보자들이 혼란을 겪기 쉽습니다. 이번 포스팅에서는 this 키워드가 무엇인지, 사용되는 상황에 따라 어떻게 값이 달라지는지 예제와 함께 자세히 설명하겠습니다.

this 키워드 완벽 이해하기

---

1. this 키워드란?

1) this의 기본 개념

• this는 함수 호출 방식에 따라 다르게 바인딩되는 특수한 키워드입니다.
• 전역 컨텍스트, 함수 내부, 객체 메서드 등 다양한 상황에서 서로 다른 값을 가리킵니다.

2) 전역 컨텍스트에서의 this

• 브라우저 환경에서는 전역 객체인 window를 가리킵니다.

console.log(this);  // 출력: window 객체

• Node.js 환경에서는 global 객체를 가리킵니다.

console.log(this);  // 출력: {}

 

---

2. 함수에서의 this

1) 일반 함수 호출

• 함수 내부에서 this는 기본적으로 undefined입니다. (strict mode)

function showThis() {
    console.log(this);
}
showThis();  // 출력: undefined (strict mode), window (non-strict mode)

2) 객체의 메서드에서의 this

• 메서드를 호출할 때, this는 해당 객체를 가리킵니다.

const user = {
    name: 'Alice',
    greet: function() {
        console.log(`Hello, ${this.name}`);
    }
};
user.greet();  // 출력: Hello, Alice

3) 화살표 함수에서의 this

• 화살표 함수는 자신만의 this를 가지지 않으며, 선언된 위치의 this를 그대로 사용합니다.

const user = {
    name: 'Bob',
    greet: () => {
        console.log(`Hello, ${this.name}`);
    }
};
user.greet();  // 출력: Hello, undefined

 

---

3. this의 바인딩

1) bind(), call(), apply() 메서드

JavaScript에서 this를 명시적으로 바인딩하기 위해 사용됩니다.

bind()

const user = {
    name: 'Alice'
};

function greet() {
    console.log(`Hello, ${this.name}`);
}

const boundGreet = greet.bind(user);
boundGreet();  // 출력: Hello, Alice

call()와 apply()

• call(): 인수를 쉼표로 구분하여 전달합니다.
• apply(): 인수를 배열로 전달합니다.

greet.call(user);  // 출력: Hello, Alice
greet.apply(user);  // 출력: Hello, Alice

---

4. 클래스에서의 this

1) 클래스 생성자 함수

• 클래스 내부의 메서드에서 this는 인스턴스를 가리킵니다.

class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, ${this.name}`);
    }
}

const person = new Person('Charlie');
person.greet();  // 출력: Hello, Charlie

2) 이벤트 핸들러에서의 this

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

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

---

5. 추가 팁 및 참고 사항

• 화살표 함수는 항상 상위 스코프의 this를 사용하므로, 객체 메서드를 정의할 때 주의하세요.
• 클래스의 메서드를 이벤트 리스너로 전달할 때는 bind()를 사용하여 this를 명시적으로 바인딩하는 것이 좋습니다.
• this 사용 시, 상황별로 값이 달라질 수 있으므로 정확히 이해하고 사용해야 합니다.

---

6. 요약 및 마무리

이번 포스팅에서는 JavaScript의 this 키워드를 다양한 상황에서 사용하는 방법을 설명했습니다. this는 함수 호출 방식, 객체 메서드, 클래스 메서드, 화살표 함수 등에서 다르게 동작합니다. 특히, bind(), call(), apply() 메서드를 사용하여 this를 명시적으로 설정할 수 있습니다. 다양한 예제와 함께 사용법을 익히고, 코드 작성 시 주의해서 사용해 보세요.

---

7. 관련 글 링크

• 관련 글: JavaScript의 이벤트 리스너 사용법과 오류 해결 방법