JavaScript의 this 키워드: 컨텍스트 이해하기

JavaScript에서 this 키워드는 함수가 실행될 때의 컨텍스트(context)를 나타냅니다. 즉, this는 함수가 어떤 객체의 메서드로 호출되었는지, 또는 어떤 객체를 가리키고 있는지를 알려줍니다. this의 값은 함수가 호출되는 방식에 따라 달라지기 때문에 자바스크립트 개발에서 매우 중요한 개념입니다.

this의 컨텍스트 변화: 예제와 설명

예제 1: 클릭 이벤트와 this

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
      console.log('Count:', this.count);
    },
    incrementWrong() {
      setTimeout(function() {
        this.count++; // this는 Window 객체를 가리킴
        console.log('Count:', this.count);
      }, 1000);
    }
  },
  // ...
});

• increment 메서드: 클릭 이벤트 핸들러로 직접 연결되어 있기 때문에, this는 이벤트가 발생한 요소(버튼)가 속한 Vue 컴포넌트 인스턴스를 가리킵니다. 따라서 this.count를 통해 컴포넌트의 데이터를 정상적으로 업데이트할 수 있습니다.
• incrementWrong 메서드: setTimeout 함수 내부의 일반 함수에서 this를 사용했기 때문에, this는 전역 객체(브라우저에서는 window)를 가리킵니다. 따라서 this.count는 존재하지 않는 속성이므로 에러가 발생합니다.

예제 2: 비동기 함수와 this

const app = Vue.createApp({
  // ...
  methods: {
    updateMessage() {
      // 화살표 함수 사용
      setTimeout(() => {
        this.message = 'Updated via Arrow';
        console.log('Message:', this.message);
      }, 1000);
    },
    updateMessageWrong() {
      // 일반 함수 사용
      setTimeout(function() {
        this.message = 'Updated via Function';
        console.log('Message:', this.message);
      }, 1000);
    }
  },
  // ...
});

• updateMessage 메서드: setTimeout의 콜백 함수로 화살표 함수를 사용했기 때문에, 화살표 함수는 자신이 정의된 렉시컬 스코프(lexical scope)의 this를 상속합니다. 즉, this는 여전히 컴포넌트 인스턴스를 가리키므로 this.message를 통해 데이터를 정상적으로 업데이트할 수 있습니다.
• updateMessageWrong 메서드: setTimeout의 콜백 함수로 일반 함수를 사용했기 때문에, this는 setTimeout 함수의 호출 컨텍스트에 따라 달라집니다. 일반적으로 전역 객체를 가리키므로 this.message는 존재하지 않는 속성이므로 에러가 발생합니다.

728x90

예시 3: 클래스 메서드 내부의 this

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

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

  greetDelayed() {
    setTimeout(function() {
      console.log(`Hello, my name is ${this.name}`); // this는 window를 가리킴
    }, 1000);
  }

  greetWithArrow() {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}`); // this는 Person 인스턴스를 가리킴
    }, 1000);
  }
}

const person = new Person('Alice');
person.greet(); // Hello, my name is Alice
person.greetDelayed(); // Hello, my name is undefined (일반 함수 사용 시 this가 window를 가리킴)
person.greetWithArrow(); // Hello, my name is Alice (화살표 함수 사용 시 this가 Person 인스턴스를 유지)

• 클래스 메서드: 클래스 내부의 메서드에서 this는 해당 클래스의 인스턴스를 가리킵니다.
• 일반 함수 vs. 화살표 함수: setTimeout 내부에서 일반 함수를 사용하면 this는 전역 객체(window)를 가리키지만, 화살표 함수를 사용하면 상위 스코프의 this를 유지합니다.

예시 4: 이벤트 핸들러 내부의 this

<button onclick="handleClick()">Click me</button>

function handleClick() {
  console.log(this); // window를 가리킴
}

• HTML 이벤트 핸들러: HTML 요소의 이벤트 핸들러로 직접 함수를 연결하면 this는 전역 객체(window)를 가리킵니다.
• Vue.js 이벤트 핸들러: Vue.js에서는 @click 등의 지시어를 사용하여 이벤트를 바인딩할 때, 메서드를 호출하므로 this는 컴포넌트 인스턴스를 가리킵니다.

예시 5: call, apply, bind 메서드

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

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

• call, apply, bind 메서드: call, apply, bind 메서드를 사용하여 함수의 this를 임의로 설정할 수 있습니다.

정리

• this의 컨텍스트는 함수 호출 방식에 따라 달라집니다.
• 일반 함수: 호출 방식에 따라 this가 가리키는 대상이 달라집니다. 특히, 이벤트 핸들러나 setTimeout 내부에서 사용될 때 주의해야 합니다.
• 화살표 함수: 상위 스코프의 this를 그대로 유지합니다.
• 클래스 메서드: this는 해당 클래스의 인스턴스를 가리킵니다.
• call, apply, bind: this를 명시적으로 설정할 수 있습니다.

주의할 점:

• 엄격 모드: 엄격 모드에서는 this가 undefined인 경우 에러가 발생할 수 있습니다.
• 동적 this 바인딩: call, apply, bind 메서드를 사용하면 this를 동적으로 바인딩할 수 있지만, 과도한 사용은 코드를 복잡하게 만들 수 있습니다.

 

728x90

this는 자바스크립트에서 매우 중요한 개념이지만, 동시에 혼란스러울 수 있는 부분입니다. 다양한 예시를 통해 this의 컨텍스트가 어떻게 변하는지 이해하고, 적절하게 사용하는 것이 중요합니다.

this를 제어하는 방법

• 화살표 함수: 화살표 함수는 자신이 정의된 렉시컬 스코프의 this를 상속하므로, this를 명확하게 유지하고 싶을 때 유용합니다.
• bind 메서드: bind 메서드를 사용하여 함수의 this를 특정 값으로 고정할 수 있습니다.
• call 및 apply 메서드: call과 apply 메서드를 사용하여 함수 호출 시 this 값을 임의로 지정할 수 있습니다.

this는 JavaScript에서 매우 중요한 개념이지만, 그 값이 호출 컨텍스트에 따라 달라지기 때문에 혼동하기 쉽습니다. 특히 비동기 작업이나 이벤트 핸들러 내에서 this를 사용할 때 주의해야 합니다. 화살표 함수를 사용하거나 bind 메서드를 활용하여 this를 적절히 관리하는 것이 좋습니다.