2021-04-26 게시 됨2021-07-12 업데이트 됨javascript4분안에 읽기 (약 567 단어)

js scope 스코프, 렉시컬 스코프

전역 변수, 지역 변수 구분하는 것이다
스코프 ; 중괄호로 묶인 영역

전역, 지역 변수

지역변수는 바깥에서 사용할 수 없다

const f = () => {
  const x = 123;
  console.log(x);
};

f(); // 123
console.log(x); // 에러 ; ReferenceError: x is not defined

함수 f 에 선언된 f의 지역변수 x를 바깥에서 사용하지 못하는 모습이다

전역 변수 사용

const x = 123;

const f = () => {
  console.log(x);
};

console.log(x); // 123
f(); // 123

반대로 함수에서는 바깥에 선언된 전역 변수 x를 사용할 수 있다

같은 변수명 일 때는 지역변수

const x = 123;

const f = () => {
  const x = 999;
  console.log(x);
};

console.log(x); // 123
f(); // 999

전역 변수, 지역 변수에 동일한 이름의 변수가 있으면 가까운 변수를 참조한다

스코프 체인

let x = 1;

{
  console.log(x); // 1

  {
    x = 2;
    console.log(x); // 2

    {
      let x = 111;
      console.log(x); // 111

      {
        console.log(x); // 111
        x = 222;
        console.log(x); // 222
      }
    }
  }
}

가깝다는 것은 일단 {} 스코프를 기준으로
일단 자기 자신이 속한 스코프에서 변수 x를 찾는다
없으면 상위 스코프에서 찾는다
찾을 때까지 반복한다
이를 스코프 체인이라고 한다

근데 이 스코프에 의한 전역, 지역 변수 구분은,
그러니까 내가 진짜로 참조하는 변수는 스코프를 선언할 때 결정된다 (렉시컬 스코핑)

렉시컬 스코핑

렉시컬 스코핑

let x = 1;

const f = () => {
  console.log(x);
};

const main = () => {
  let x = 999;
  f(); // 1
  console.log(x); // 999
};

main();

선언할 때 결정된다는 것은
위 코드의 결과처럼
함수 f 가 선언 당시에 최상위 스코프의 let x = 1을 바라본다는 것이다
함수 main을 보면 함수 f가 실행되기 전에 스코프의 let x = 999는 함수 f에 영향을 주지 않는다

이런 개념들은 js를 하면서 그냥 익숙해져 있어서 용어로 설명할 수 있을 정도는 아니었다
이번 기회에 js 개념, 용어들을 정리해봐야겠다

참고