자바스크립트에서 ‘this’ 키워드와 렉시컬 스코프는 두 가지 다른 개념이며, 각자 다른 용도와 동작을 가지고 있습니다. 이러한 개념을 이해하는 것은 자바스크립트 개발자로서 중요한 부분이며, 이 포스트에서는 두 개념의 차이점에 대해 설명하겠습니다.

‘this’ 키워드

‘this’는 자바스크립트에서 사용되는 특별한 키워드로, 현재 실행 중인 함수의 컨텍스트를 참조하는 역할을 합니다. ‘this’는 실행 시점에 동적으로 바인딩되며, 함수가 어떻게 호출되는지에 따라서 값이 달라질 수 있습니다.

예를 들어, 다음과 같은 객체를 가정해보겠습니다:

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

person.sayHello(); // 출력: Hello, John!

위 예시에서 ‘sayHello’ 함수를 호출할 때 ‘person’ 객체 내에서 호출하고 있으므로 ‘this’는 ‘person’ 객체를 참조합니다. 따라서 ‘this.name’은 ‘John’을 출력합니다.

하지만 ‘this’는 함수가 어떻게 호출되는지에 따라 값이 달라질 수도 있습니다. 다음 예시를 살펴보겠습니다.

const sayHello = person.sayHello;
sayHello(); // 출력: Hello, undefined!

위 예시에서 ‘sayHello’ 함수를 ‘person’ 객체의 메소드가 아닌 독립적인 함수로 호출하였습니다. 이 경우에는 ‘this’가 ‘undefined’로 설정되어 있고, 따라서 ‘this.name’은 ‘undefined’를 출력합니다.

렉시컬 스코프

렉시컬 스코프는 변수가 선언된 위치에 따라 변수의 유효 범위를 결정하는 개념입니다. 자바스크립트는 렉시컬 스코프를 따르므로, 함수가 어디에 선언되었는지에 따라 변수의 유효 범위가 결정됩니다. 이는 함수가 호출되는 위치에 영향을 받지 않습니다.

예를 들어, 다음과 같은 코드를 살펴보겠습니다:

function outer() {
  const name = 'John';

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

  inner();
}

outer(); // 출력: Hello, John!

위 예시에서 ‘inner’ 함수는 ‘outer’ 함수 내에서 선언되었으며, ‘name’ 변수는 ‘outer’ 함수 내에서 선언되어 있습니다. 따라서 ‘name’ 변수는 ‘inner’ 함수에서도 참조할 수 있으며, “Hello, John!”을 출력합니다.

이와 달리, ‘this’와 달리 렉시컬 스코프는 호출 방식에 영향을 받지 않아 값을 유지합니다.

결론

자바스크립트에서 ‘this’ 키워드와 렉시컬 스코프는 서로 다른 개념입니다. ‘this’는 현재 함수의 실행 컨텍스트를 참조하는 반면, 렉시컬 스코프는 변수의 유효 범위를 결정하는데 사용됩니다. 이러한 개념은 자바스크립트 개발자로서 중요한 부분이므로, 올바르게 이해하고 사용할 수 있어야 합니다.

#자바스크립트 #this키워드 #렉시컬스코프