JavaScript의 this 키워드는 초보 개발자에게 가장 혼란스러운 개념 중 하나일 수 있습니다. 그 값은 사용되는 위치에 따라 달라질 수 있으므로 다양한 상황에서 동작을 이해하는 것이 중요합니다. 이 기사에서는 다양한 시나리오에서의 사용법을 탐색하여 this 키워드에 대한 이해를 돕습니다.

이게 뭔가요?

JavaScript에서 이는 함수가 실행되는 컨텍스트를 나타냅니다. 객체 자체 내에서 객체의 속성과 메서드에 액세스하는 방법을 제공합니다.

글로벌 컨텍스트

전역 컨텍스트(함수 또는 객체 외부)에서 사용되는 경우 전역 객체를 나타냅니다. 웹 브라우저에서 전역 객체는 window입니다.

console.log(this); // In a browser, this will log the window object

기능 컨텍스트

함수 내부에서 사용되는 경우 함수 호출 방법에 따라 달라집니다.

일반 함수 호출

일반 함수 호출에서 이는 전역 객체(또는 엄격 모드에서는 정의되지 않음)를 나타냅니다.

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

showThis(); // Logs window (or undefined in strict mode)

메소드 호출

객체의 메소드로 함수를 호출할 경우 객체 자체를 의미합니다.

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

person.greet(); // Logs "Alice"

생성자 컨텍스트

함수가 new 키워드와 함께 생성자로 사용되면 새로 생성된 인스턴스를 참조합니다.

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

const bob = new Person('Bob');
console.log(bob.name); // Logs "Bob"

화살표 기능

화살표 함수는 동작이 다릅니다. 그들은 자신만의 이러한 맥락을 갖고 있지 않습니다. 대신, 주변 어휘 컨텍스트에서 이를 상속받습니다.

const obj = {
  name: 'Carol',
  regularFunction: function() {
    console.log(this.name);
  },
  arrowFunction: () => {
    console.log(this.name);
  }
};

obj.regularFunction(); // Logs "Carol"
obj.arrowFunction();   // Logs undefined (or the global object in non-strict mode)

이벤트 핸들러

이벤트 핸들러에서는 이벤트를 수신한 요소를 나타냅니다.

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this); // Logs the button element
});

명시적 바인딩

JavaScript는 호출, 적용 및 바인딩을 사용하여 이 값을 명시적으로 설정하는 메서드를 제공합니다.

전화해서 신청하세요

호출 및 적용 메소드를 사용하면 지정된 이 값으로 함수를 호출할 수 있습니다.

function introduce() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = { name: 'Dave' };

introduce.call(person); // Logs "Hello, my name is Dave"
introduce.apply(person); // Logs "Hello, my name is Dave"

호출과 적용의 차이점은 인수를 처리하는 방법입니다. 호출은 인수를 개별적으로 받아들이고 적용은 배열로 받아들입니다.

묶다

바인드 메소드는 호출 시 this 값이 제공된 값으로 설정되는 새 함수를 생성합니다.

function introduce() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = { name: 'Eve' };

const boundIntroduce = introduce.bind(person);
boundIntroduce(); // Logs "Hello, my name is Eve"

결론

JavaScript를 마스터하려면 this 키워드를 이해하는 것이 필수적입니다. 이것이 다양한 상황에서 어떻게 작동하는지 인식함으로써 더 예측 가능하고 유지 관리하기 쉬운 코드를 작성할 수 있습니다. 메서드, 생성자 또는 화살표 함수를 사용하여 작업하는 경우 이것이 어떻게 작동하는지 알면 일반적인 함정을 피하고 그 기능을 효과적으로 활용하는 데 도움이 됩니다.