렉시컬 스코프(Lexical scope)

📌렉시컬 스코프란

함수가 선언된 위치에 따라 상위 스코프가 결정되는 것을 말한다.
쉽게 말해, 함수가 어디서 쓰여졌는지에 따라 어떤 변수에 접근할 수 있는지가 결정된다는 의미.

간단히 퀴즈를 통해 알아보자

const x = 1;

function foo() {
  const x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // 출력값은 ?
bar(); // 출력값은 ?

함수 foo와 함수 bar를 출력값은 어떻게 될 것인가?
위 퀴즈의 핵심 질문은 함수를 호출 위치 또는 선언 위치 중 어느것이 스코프를 결정하냐는 것이다.

✔ 함수를 어디서 호출했는가? -> 동적 스코프
✔ 함수를 어디서 정의했는가? -> 정적 스코프(렉시컬 스코프)

자바스크립트는 렉시컬 스코프를 따르므로 함수를 어디서 정의했는가에 스코프를 결정한다.
두 출력값 모두 1로 출력된다.

아래 추가 예시를 봐보자.

function outer() {
  let outerVar = '외부 변수';

  function inner() {
    let innerVar = '내부 변수';
    console.log(outerVar); // 외부 변수에 접근 가능
    console.log(innerVar);
  }

  inner();
}

outer();

📖렉시컬 스코프 관점에서 본다면

inner 함수는 outer 함수 내부에 선언되었으므로,
outer 함수의 변수인 outerVar에 접근할 수 있습니다.

반대로, outer 함수는 inner 함수의 변수인 innerVar에 접근할 수 없습니다.

📖블록 스코프 관점에서 본다면

outerVar와 innerVar는 각각 let 키워드로 선언되었으므로, 블록 스코프를 가진다
outerVar는 outer 함수의 블록 내에서만 유효.
innerVar는 inner 함수의 블록 내에서만 유효.

💡렉시컬 스코프와 블록 스코프의 차이
블록 스코프 : let 과 const 키워드로 선언된 변수는 코드블록({}) 내에서만 유효
렉시컬 스코프 : 함수의 선언 위치에 따라 스코프가 결정

📌렉시컬 스코프 핵심

• 함수의 선언 위치가 스코프를 결정
• 내부 함수는 외부 함수의 변수에 접근 가능
• 외부 함수는 내부 함수의 변수에 접근 불가능
  (*자바스크립트 엔진이 스코프체인을 통해 변수를 찾기 때문에)

📌정리

렉시컬 스코프는 자바스크립트에서 변수의 유효범위를 결정하는 중요한 개념.
함수가 선언된 위치에 따라 어떤 변수에 접근할 수 있는지 정해지며,
이를 이해하면 더욱 효율적이고 안정적인 자바스크립트 코드를 작성할 수 있다.