자바스크립트에서 this

자바스크립트에서 this는 다른 언어나 객체 지향 프로그래밍에서 사용하는 this와 다소 다르게 동작할 수 있습니다. 
특히, this는 함수가 호출되는 방식에 따라 다르게 동작합니다. 
오늘은 자바스크립트에서 this가 어떻게 동작하는지, 화살표 함수에서 this는 어떤 특징을 가지는지, 그리고 이를 어떻게 잘 활용할 수 있는지 알아보겠습니다.

 

목차

this의 개념

this의 동적 바인딩

this의 활용

 

 

this의 개념

자바스크립트에서 this는 함수가 호출될 때 this가 바인딩된 객체를 참조합니다. 이때 this가 참조하는 객체는 함수가 어떻게 호출되었는지에 따라 달라집니다.

 

전역 컨텍스트에서의 this

환경	참조
전역	전역 객체
브라우저 환경	window 객체
Node.js	global 객체

 

함수 내부에서의 this

• 함수가 어떻게 호출되었는지에 따라 달라짐

함수	참조
일반 함수	전역 객체
객체의 메소드	해당 객체

 

// 전역에서 함수 호출
function show() {
  console.log(this);  // 전역 객체 (브라우저에서는 window)
}

show();

// 객체 메소드에서 호출
const person = {
  name: "Alice",
  greet() {
    console.log(this.name);  // "Alice"
  }
};

person.greet();  // this는 person 객체를 참조

 

화살표 함수에서의 this

• 자신만의 this를 가지지 않고, 선언된 환경의 this를 그대로 사용 => this 바인딩을 새로 하지 않으며, 부모 스코프의 this를 그대로 참조

const person = {
  name: "Bob",
  greet: function() {
    setTimeout(() => {
      console.log(this.name);  // "Bob" (화살표 함수가 부모 `this`를 사용)
    }, 1000);
  }
};

person.greet();

만약 일반 함수였다면 this는 전역 객체를 참조하여 undefined가 출력

 

 

this의 동적 바인딩

• 메소드를 사용해this를 명시적으로 바인딩할 수 있음
• 이를 통해 함수가 호출되는 방식에 관계없이 this를 원하는 객체로 강제로 설정 가능

call()과 apply()

• call(): 첫 번째 인자로 this에 바인딩할 객체를 받고, 이후 인자들은 함수의 인자들로 전달
• apply(): call()과 거의 동일하지만, 인자를 배열 형태로 전달

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

const person = { name: "Charlie" };

greet.call(person);  // "Hello, Charlie"
greet.apply(person); // "Hello, Charlie"

 

bind()

• 새로운 함수를 반환, 해당 함수에서 사용할 this를 영구적으로 바인딩
• 반환된 함수는 호출될 때마다 지정된 this를 사용

const person = { name: "David" };

const greetPerson = greet.bind(person);
greetPerson();  // "Hello, David"

 

 

this의 활용

자바스크립트에서 this는 함수가 호출되는 방식에 따라 다르게 바인딩되기 때문에, 이를 잘 이해하고 활용하는 것이 중요합니다.

 

함수 내에서 this가 무엇을 참조하는지 명확하게 이해하는 것이 코드 작성 시 버그를 예방하는 데 큰 도움이 됩니다.

• 일반 함수 호출에서는 this가 전역 객체를 참조

• 객체 메소드 호출에서는 this가 해당 객체를 참조

• 화살표 함수에서는 상위 스코프의 this를 그대로 사용

• call(), apply(), bind()를 사용하여 this를 명시적으로 설정