[JavaScript 문법] 15일차: this 키워드 이해하기

this 키워드란?

this 키워드는 함수가 호출될 때, 해당 함수가 속한 객체를 참조합니다. this의 값은 함수가 어떻게 호출되었는지에 따라 달라집니다.

전역 문맥에서의 this

전역 문맥에서는 this는 전역 객체를 참조합니다. 브라우저 환경에서는 전역 객체가 window입니다.

예제

console.log(this); // window 객체

함수 문맥에서의 this

일반 함수에서는 this가 전역 객체를 참조합니다. 엄격 모드에서는 undefined를 참조합니다.

예제

function showThis() {
  console.log(this);
}

showThis(); // window 객체 (엄격 모드에서는 undefined)

메서드 문맥에서의 this

메서드 내부에서는 this가 해당 메서드를 호출한 객체를 참조합니다.

예제

let person = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

person.greet(); // 'Alice'

생성자 함수에서의 this

생성자 함수 내부에서는 this가 새로 생성된 객체를 참조합니다.

예제

function Person(name) {
  this.name = name;
}

let person1 = new Person('Bob');
console.log(person1.name); // 'Bob'

클래스 문맥에서의 this

클래스 내부의 메서드에서는 this가 해당 클래스로 생성된 인스턴스를 참조합니다.

예제

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log('Hello, ' + this.name);
  }
}

let person1 = new Person('Charlie');
person1.greet(); // 'Hello, Charlie'

화살표 함수에서의 this

화살표 함수는 자신만의 this 바인딩을 가지지 않으며, 자신이 정의된 문맥의 this를 상속받습니다.

예제

let person = {
  name: 'Alice',
  greet: function() {
    setTimeout(() => {
      console.log('Hello, ' + this.name);
    }, 1000);
  }
};

person.greet(); // 'Hello, Alice'

call, apply, bind 메서드

call

call 메서드는 함수를 호출할 때 this 값을 명시적으로 지정할 수 있습니다.

예제

function greet() {
  console.log('Hello, ' + this.name);
}

let person = { name: 'David' };
greet.call(person); // 'Hello, David'

apply

apply 메서드는 call 메서드와 유사하지만, 인수를 배열로 전달합니다.

예제

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

let person = { name: 'Eve' };
greet.apply(person, ['Hello', '!']); // 'Hello, Eve!'

bind

bind 메서드는 함수의 this 값을 영구적으로 바인딩하여 새로운 함수를 반환합니다.

예제

function greet() {
  console.log('Hello, ' + this.name);
}

let person = { name: 'Frank' };
let boundGreet = greet.bind(person);
boundGreet(); // 'Hello, Frank'

this의 다양한 사용 사례

객체의 메서드에서의 this

객체의 메서드에서 this는 해당 메서드를 호출한 객체를 참조합니다.

let car = {
  brand: 'Tesla',
  model: 'Model 3',
  details: function() {
    console.log(this.brand + ' ' + this.model);
  }
};

car.details(); // 'Tesla Model 3'

생성자 함수에서의 this

생성자 함수 내부에서는 this가 새로 생성된 객체를 참조합니다.

function Car(brand, model) {
  this.brand = brand;
  this.model = model;
}

let myCar = new Car('Ford', 'Mustang');
console.log(myCar.brand); // 'Ford'
console.log(myCar.model); // 'Mustang'

화살표 함수에서의 this

화살표 함수는 자신이 정의된 문맥의 this를 상속받습니다.

let user = {
  name: 'Grace',
  showName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

user.showName(); // 'Grace'

결론

this 키워드는 JavaScript에서 함수의 호출 문맥을 참조하는 중요한 역할을 합니다. 이번 글에서는 this의 기본 개념, 전역 문맥, 함수 문맥, 메서드 문맥, 생성자 함수, 클래스 문맥, 화살표 함수, call, apply, bind 메서드에서의 this 사용법에 대해 배웠습니다. 다음 글에서는 고차 함수에 대해 알아보겠습니다.

다음 글에서 만나요!