자바스크립트에서 ‘this’ 키워드는 매우 중요한 개념입니다. ‘this’를 올바르게 이해하고 사용하는 것은 프로그래밍에서 중요한 부분입니다. 따라서 이번 블로그 포스트에서는 ‘this’ 키워드의 동작 방식을 이해하기 위한 내용을 다뤄보려고 합니다.

자바스크립트에서 ‘this’ 키워드는 함수의 실행 문맥을 참조하는 데 사용됩니다. 즉, ‘this’는 현재 실행되고 있는 함수를 호출한 객체를 가리킵니다. 하지만 ‘this’의 동작은 몇 가지 유의해야 할 사항이 있습니다.

첫째로, ‘this’의 값은 함수를 어떻게 호출했느냐에 따라 달라집니다. 함수를 메서드로서 호출하면 ‘this’는 해당 메서드가 속한 객체를 참조합니다. 이를 명확히 표현하면 다음과 같습니다.

const obj = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.sayHello(); // 출력 결과: Hello, John!

둘째로, ‘this’의 값은 함수를 전역 범위에서 호출했을 때, 혹은 일반 함수로 호출했을 때 달라집니다. 이 경우에는 ‘this’가 전역 객체를 참조하게 됩니다.

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

const obj1 = { name: 'John' };
const obj2 = { name: 'Jane' };

sayHello(); // 출력 결과: Hello, undefined
obj1.sayHello = sayHello;
obj1.sayHello(); // 출력 결과: Hello, John!
obj2.sayHello = sayHello;
obj2.sayHello(); // 출력 결과: Hello, Jane!

셋째로, ‘this’의 값은 명시적으로 바인딩할 수도 있습니다. ‘call’, ‘apply’, ‘bind’와 같은 메서드를 사용하여 ‘this’를 원하는 객체로 명시적으로 설정할 수 있습니다.

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

const obj = { name: 'John' };

sayHello.call(obj); // 출력 결과: Hello, John!

이러한 동작 방식을 이해하고 활용하면 ‘this’ 키워드를 올바르게 사용할 수 있습니다. ‘this’를 잘 활용하면 객체 지향 프로그래밍에서 메서드와 속성을 효율적으로 다룰 수 있으며, 코드를 더 간결하게 작성할 수 있습니다.

#javascript #this키워드