자바스크립트에서 `this`를 이해하는 모든 것 (2025년판)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 대상자: 자바스크립트 개발자, 클래스/함수/콜백 처리에 관심 있는 개발자
• 난이도: 중급~고급 (this의 동작 원리, ES6+ 문법, 호이스팅, 메서드 바인딩 등 다루움)

핵심 요약

• this는 실행 컨텍스트에 따라 동적으로 결정됨. 함수 호출 방식(메서드, 생성자, 콜백 등)에 따라 this 값이 달라짐.
• 화살표 함수는 this를 렉시컬 스코프에서 바인딩. 콜백 내부에서 this를 유지할 때 유용.
• call(), apply(), bind()를 사용해 this를 명시적으로 설정 가능.

섹션별 세부 요약

1. `this`의 기본 개념

• this는 함수가 실행되는 컨텍스트를 가리킴.
• 전역 스코프에서 this는 브라우저에서는 window, Node.js에서는 global 객체를 가리킴.
• strict mode에서는 전역 스코프의 this가 undefined임.

2. 메서드 호출 시 `this` 동작

• 객체 메서드로 호출 시 this는 해당 객체를 가리킴.
• 예: user.greet() → this.name은 user 객체의 name 속성.

3. 생성자 함수와 `new` 연산자

• new로 생성된 인스턴스의 this는 새 객체를 가리킴.
• 예: new Person("Bob") → this.name은 생성된 객체의 name 속성.

4. 화살표 함수와 `this`

• 화살표 함수는 자체적인 this를 가지지 않음. 외부 스코프의 this를 렉시컬 바인딩.
• 콜백 내부에서 this를 유지할 때 유리.

5. `call()`, `apply()`, `bind()` 사용법

• call()/apply()는 함수 호출 시 this를 명시적으로 설정.
• bind()는 함수를 새 this 값으로 고정된 새 함수를 반환.
• 예: greet.call(user) → this.name은 user 객체의 name.

6. 이벤트 핸들러에서의 `this`

• DOM 이벤트 핸들러에서 this는 이벤트가 발생한 요소를 가리킴.
• 화살표 함수 사용 시 this는 외부 스코프(예: window)를 가리킴.

7. `this` 오류 사례 및 해결

• 콜백 내부에서 this가 잘못 바인딩되는 경우:
• setTimeout 내부에서 this.name이 undefined → 화살표 함수로 수정.
• 반복문 내 this 바인딩 문제 → bind() 또는 화살표 함수 사용.

8. ES6 클래스와 `this`

• ES6 클래스의 메서드에서 this는 인스턴스를 가리킴.
• 예: c.showModel() → this.model은 Car 인스턴스의 model 속성.

9. ES 모듈과 `this`

• ES 모듈의 최상위 스코프에서 this는 undefined (strict mode 기준).

10. `this`의 실행 타입별 값

| 실행 타입 | this 값 |

|------------------|---------------------------------------|

| 전역 (비스트릭트) | window / global |

| 전역 (스트릭트) | undefined |

| 메서드 호출 | 해당 객체 |

| 생성자 (new) | 새 인스턴스 |

| 화살표 함수 | 렉시컬 스코프 |

| 이벤트 리스너 | 이벤트 타겟 |

| call/apply/bind | 명시적으로 설정된 값 |

결론

• this는 함수 호출 방식에 따라 동적으로 결정됨. 화살표 함수를 사용해 this를 유지하거나 call(), apply(), bind()로 명시적 설정이 필수적.
• 모던 자바스크립트(ES6+, TypeScript)에서도 this는 핵심 개념이며, 프레임워크/라이브러리에서 널리 사용됨.
• 콜백, 이벤트 핸들러, 반복문 내 this 오류를 방지하기 위해 화살표 함수나 bind()를 적절히 활용해야 함.