JavaScript 'this' 키워드: 실행 문맥과 동작 방식
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

this 키워드 이해하기: JavaScript에서의 실행 문맥과 동작 방식

카테고리

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

서브카테고리

웹 개발

대상자

JavaScript 초보자 및 중급 개발자, this 키워드의 동작 방식을 이해하기 어려운 사람들

난이도: 중급 (기본 개념부터 실무 적용까지 설명)

핵심 요약

  • this는 함수가 호출되는 방식(실행 문맥)에 따라 동적으로 결정된다.
  • call, apply, bind를 사용해 this를 명시적으로 제어할 수 있다.
  • 화살표 함수(arrow function)는 lexical scope에서 this를 상속하므로, 객체 메서드에 사용 시 주의가 필요하다.

섹션별 세부 요약

1. `this`의 기본 개념

  • this함수 호출 시점의 실행 문맥에 따라 결정된다.
  • 전역 문맥(global context)에서는 브라우저에서 thiswindow 객체를 가리키며, 엄격 모드(strict mode)에서는 thisundefined가 된다.
  • 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(); // thiswindow 또는 undefined가 됨 (문맥 상실)

```

  • call, apply, bindthis 제어:

```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(); // thiswindow 또는 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의 동작을 직접 테스트하고 로깅해 보는 것이 효과적인 학습 방법이다.