this 키워드 이해하기: JavaScript에서의 실행 문맥과 동작 방식
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 초보자 및 중급 개발자, this
키워드의 동작 방식을 이해하기 어려운 사람들
난이도: 중급 (기본 개념부터 실무 적용까지 설명)
핵심 요약
this
는 함수가 호출되는 방식(실행 문맥)에 따라 동적으로 결정된다.call
,apply
,bind
를 사용해this
를 명시적으로 제어할 수 있다.- 화살표 함수(arrow function)는 lexical scope에서
this
를 상속하므로, 객체 메서드에 사용 시 주의가 필요하다.
섹션별 세부 요약
1. `this`의 기본 개념
this
는 함수 호출 시점의 실행 문맥에 따라 결정된다.- 전역 문맥(global context)에서는 브라우저에서
this
가window
객체를 가리키며, 엄격 모드(strict mode)에서는this
가undefined
가 된다. this
는 정의 위치가 아니라 호출 위치에 따라 결정된다.
2. `this`를 결정하는 4가지 방식
- 일반 함수 호출:
```javascript
function sayHello() { console.log(this); }
sayHello(); // 브라우저에서 window
객체, 엄격 모드에서는 undefined
```
- 객체 메서드로 호출:
```javascript
const user = { name: "Alice", greet() { console.log(this.name); } };
user.greet(); // "Alice"
```
- 함수를 변수에 할당 후 호출:
```javascript
const greet = user.greet;
greet(); // this
가 window
또는 undefined
가 됨 (문맥 상실)
```
call
,apply
,bind
로this
제어:
```javascript
function introduce(role) { console.log(${this.name} is a ${role}
); }
introduce.call({ name: "Bob" }, "Developer"); // "Bob is a Developer"
```
3. `new` 키워드로 생성자 함수 호출
new
를 사용하면 새로운 객체가 생성되고,this
가 해당 객체를 가리킨다.
```javascript
function Car(model) { this.model = model; }
const myCar = new Car("Toyota");
console.log(myCar.model); // "Toyota"
```
4. 화살표 함수의 `this` 동작
- 화살표 함수는 자체적인
this
를 가지지 않으며, 외부 스코프의this
를 상속한다.
```javascript
const team = { name: "Dev Team", arrowFunc: () => console.log(this.name) };
team.arrowFunc(); // this
가 window
또는 undefined
가 됨
```
- 콜백 함수에서
this
를 유지하려면 화살표 함수나bind
를 사용해야 한다.
```javascript
const app = { name: "MyApp", start() { setTimeout(() => console.log(this.name), 1000); } };
app.start(); // "MyApp"
```
결론
this
는 함수 호출 방식에 따라 동적으로 결정되므로, 실행 문맥을 이해하는 것이 중요하다.- 화살표 함수는
this
를 상속하므로, 객체 메서드보다는 콜백 함수에 적합하다. call
,apply
,bind
를 사용해this
를 명시적으로 제어해야 할 때는 상황에 따라 선택해야 한다.- 실무에서는
this
의 동작을 직접 테스트하고 로깅해 보는 것이 효과적인 학습 방법이다.