자바스크립트에서 ‘this’는 매우 중요한 개념 중 하나입니다. ‘this’ 키워드는 현재 실행 중인 함수나 메소드에서 참조하는 객체를 가리킵니다. 이 글에서는 ‘this’ 키워드의 동작 원리와 유효범위를 이해하는 방법에 대해 알아보겠습니다.

‘this’ 키워드의 동작 원리

‘this’ 키워드는 호출한 방식에 따라 동적으로 결정됩니다. 다음은 ‘this’ 키워드의 동작 원리를 설명하는 예시입니다.

1. 전역 컨텍스트에서의 ‘this’

전역 컨텍스트에서 ‘this’는 전역 객체인 ‘window’를 가리킵니다. 전역 컨텍스트에서 ‘this’를 사용하는 예시를 살펴봅시다.

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

2. 함수 호출 시의 ‘this’

함수 내에서 ‘this’는 해당 함수를 호출한 주체를 가리킵니다. 함수 호출 시 ‘this’를 사용하는 예시를 살펴봅시다.

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

sayHello(); // 전역 객체인 window 출력

3. 객체의 메소드에서의 ‘this’

객체의 메소드 내에서의 ‘this’는 해당 메소드를 호출한 객체를 가리킵니다. 객체의 메소드에서 ‘this’를 사용하는 예시를 살펴봅시다.

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

person.sayHello(); // person 객체 출력

‘this’ 키워드와 유효범위

‘this’ 키워드와 유효범위는 밀접한 관련이 있습니다. 함수 내에서 선언한 변수나 함수는 ‘this’를 통해 접근할 수 없습니다. 이는 ‘this’ 키워드의 동작 원리와 밀접한 관련이 있습니다. 예시를 통해 이를 확인해봅시다.

const person = {
  name: 'John',
  sayHello: function() {
    console.log(this.name);
    
    function innerFunction() {
      console.log(this.name); // undefined 출력
    }
    
    innerFunction();
  }
};

person.sayHello(); // 'John'과 'undefined' 출력

위 예시에서 ‘innerFunction’ 함수 내에서의 ‘this.name’은 undefined를 출력합니다. 이는 ‘innerFunction’이 호출한 주체가 ‘person’ 객체가 아니기 때문입니다.

마무리

‘this’ 키워드는 자바스크립트에서 중요한 개념으로, 함수나 메소드 내에서 참조하는 객체를 가리킵니다. 적절하게 ‘this’ 키워드를 활용하여 작성한 코드는 유지보수와 가독성을 향상시키는 데 도움이 됩니다. ‘this’ 키워드의 동작 원리와 유효범위에 대한 이해를 바탕으로 자바스크립트 코드를 더욱 효과적으로 작성할 수 있습니다.

#javascript #this #자바스크립트 #유효범위