[JS] 동적 바인딩 vs 렉시컬 바인딩

artp·2025년 4월 15일

javascript

목록 보기

8/50

자바스크립트에서는 다양한 종류의 바인딩(binding) 개념이 존재합니다. 이 중 가장 핵심적인 것이 바로 this 바인딩입니다.
this는 함수를 어떻게 선언하고, 어떻게 호출하느냐에 따라 참조하는 객체가 달라지기 때문에 이를 정확히 아는 것이 중요합니다.

이번 글에서는 자바스크립트의 this 바인딩을 중심으로, 동적 바인딩(Dynamic Binding)과 렉시컬 바인딩(Lexical Binding)의 차이를 정리해 보겠습니다.

1. this 바인딩이란?

함수가 실행될 때 this 키워드가 어떤 객체를 참조하는지를 결정하는 과정입니다.

자바스크립트에서 this는 전역 객체(window), 특정 객체, DOM 요소 등 매우 다양한 대상을 가리킬 수 있으며, 그 결정 방식은 함수 선언 방식(function vs 화살표)과 호출 방법에 따라 달라집니다.

2. 동적 바인딩 - 실행 시점 기준

일반 함수(function)의 경우, this는 함수가 실행될 때 결정됩니다.
이를 동적 바인딩이라 하며, 호출한 주체에 따라 this가 달라지는 특징을 가집니다.

function show() {
  console.log(this.name);
}

const obj1 = { name: "Alice", show };
const obj2 = { name: "Bob", show };

obj1.show(); // Alice
obj2.show(); // Bob

여기서 show 함수는 같은 함수지만, 호출한 객체가 obj1, obj2로 다르기 때문에 this도 다르게 바인딩됩니다.

setTimeout 예제 (버그 예시)

const obj = {
  name: "Box",
  fn: function () {
    setTimeout(function () {
      console.log(this.name); // ❌ undefined (또는 window.name)
    }, 1000);
  }
};
obj.fn();

setTimeout의 내부 함수는 obj와는 무관하게 전역 스코프에서 실행되므로 this는 window를 가리킵니다.
(strict 모드에서는 undefined)

3. 렉시컬 바인딩 - 정의 시점 기준

화살표 함수(=>)의 경우, this는 함수가 선언된 위치의 상위 스코프의 this를 상속받습니다.
이 방식을 렉시컬 바인딩이라고 하며, 실행 시점과 관계없이 this가 정적으로 고정됩니다.

const obj = {
  name: "Box",
  fn: function () {
    setTimeout(() => {
      console.log(this.name); // ✅ "Box"
    }, 1000);
  }
};
obj.fn();

setTimeout 안의 화살표 함수는 외부 `fn() 함수의 this를 그대로 상속합니다.
따라서 this는 obj로 고정됩니다.

참고: 렉시컬(Lexical)이란?

언어학적으로 “렉시컬(lexical)“은 “어휘적”, “사전적”이라는 뜻을 가집니다.
이는 문맥(context)에 의존하지 않고, 단어 자체의 고유한 의미로 해석하는 방식을 뜻합니다.

즉, 렉시컬(lexical)이란 단어가 주변 문장이나 문맥에 영향을 받지 않고, 그 자체로 어떤 의미를 가지는지를 설명하는 용어입니다.

자바스크립트에서는 이 개념이 스코프(scope)와 this 바인딩 같은 문맥에 그대로 적용됩니다.

렉시컬 스코프(Lexical Scope)
변수의 유효 범위가 변수가 정의된 위치(정의 시점)에 따라 결정됩니다.
렉시컬 this(화살표 함수)
화살표 함수에서 this는 호출 방식이 아닌, 함수가 정의된 위치 기준으로 고정됩니다.

즉, 렉시컬(lexical)은 자바스크립트에서 “코드가 작성된 위치 기준으로 의미(스코프, this 등)가 고정되는 구조”를 설명하는 개념입니다.

function outer() {
  const name = "outer";
  return () => {
    console.log(name); // "outer"
  };
}
outer()();

위 예제에서 화살표 함수는 자신을 감싸고 있는 outer 함수의 렉시컬 환경(스코프)을 기억하고 있기 때문에, name이라는 변수에 접근할 수 있습니다.

4. 표: 동적 바인딩과 렉시컬 바인딩 비교

항목	동적 바인딩	렉시컬 바인딩
사용 대상	일반 함수 (`function`)	화살표 함수(`=>`)
this 결정 시점	실행 시점	정의(선언) 시점
this 값	호출한 객체에 따라 다름	상위 스코프에서 고정