scoping 코드 예제로 공부

function calAge(birthYear) {
  const age = 2037 - birthYear;
  console.log(firstName);//Jonas
  return age;
}

const firstName = 'Jonas';
calAge(1991);

위의 코드를 보면 const firstName = 'Jonas'; 가 글로벌 변수이기 때문에 스코프 개념으로 calAge 함수 안에 콘솔로 firstName을 출력해도 값이 'Jonas'로 잘 나오는 것을 볼 수 있다. 함수 안에 firstName이라는 변수가 없으니 변수 탐색(variable lookup)을 해서 글로벌 변수를 찾아 사용하는 것이다.

이 코드에서 글로벌 변수가 함수 아래에 있어서 조금 헷갈렸지만,firstName 변수가 calAge함수 불러오기 전에 선언되어 있기 때문에 calAge에서 사용할 수 있다.

다음의 코드를 보자.

function calAge(birthYear) {
  const age = 2037 - birthYear;

  function printAge() {
    const output = `You are ${age}, born in ${birthYear}`;
    console.log(output);
  }
  printAge();
}

const firstName = 'Jonas';
calAge(1991);
console.log(age);

이 코드에서 console.log(age);는 Uncaught ReferenceError: age is not defined 에러가 뜬다. 그 이유는 age라는 변수가 calAge 함수 안에 있는데 이 함수 안에 있는 것을 글로벌에서 불러오려고 하기 때문에 에러가 생기는 것이다. 자바스크립트의 스코프 체인은 항상 부모 스코프 방향으로만 변수를 탐색하며, 자식 스코프에 있는 변수는 부모 스코프에서 접근할 수 없다.

다음으로 block scope을 코드로 보자.

function calAge(birthYear) {
  const age = 2037 - birthYear;

  function printAge() {
    const output = `${firstName},you are ${age}, born in ${birthYear}`;
    console.log(output);

    if (birthYear >= 1981 && birthYear <= 1996) {
      var millenial = true;
      const str = `Oh, and you're a millenial, ${firstName}`;
      console.log(str);
    }
    console.log(str);
    console.log(millenial);
  }
  printAge();
}

바로 이 부분이 block scope 이다.

if (birthYear >= 1981 && birthYear <= 1996) {
      var millenial = true;
      const str = `Oh, and you're a millenial, ${firstName}`;
      console.log(str);
    }

블록 밖에 있는 console.log(str)은 에러를 출력한다. 왜냐하면 str이 블록 안에 const로 선언되어 있기 때문이다. const와 let으로 선언된 변수들은 블록 안에서만 접근할 수 있다. 하지만 console.log(millenial)은 블록 밖에서도 true를 한다. 그 이유는 var는 함수 스코프를 가지며 블록 스코프의 영향을 받지 않기 때문이다. var로 선언된 변수는 가장 가까운 함수 스코프에서 접근 가능한데 여기서는 printAge함수이다.