Scoping in Practice

function calcAge(birthYear) {
  const age = 2022 - birthYear;

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

  return age;
}

const firstName = 'Sunny';
calcAge(1988);
console.log(age); // Uncaught ReferenceError: age is not defined at script.js:18:13

내부에서 외부로 접속하는 건 가능

e.g. firstName을 외부에서 선언해놨지만 printAge()에서 accessible

 

외부에서 내부로 접속하는 건 안됨 🙅‍♀️

e.g. age는 function calcAge 밖에서 not accessible

 

function calcAge(birthYear) {
  const age = 2022 - birthYear;

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

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

  return age;
}

const firstName = 'Sunny';
calcAge(1988);

같은 if 블락 안에 있지만

var은 외부에서도 접속 가능 e.g. millenial

-> 여기서 var은 block scope가 아니라 function scope임

const와 let으로 선언된건 외부에선 접속 안됨 🙅‍♀️

 

function calcAge(birthYear) {
  const age = 2022 - 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);

      function add(a, b) {
        return a + b;
      }
    }
    console.log(millenial);
    add(2, 3); // Uncaught ReferenceError: add is not defined
  }
  printAge();

  // return age;
}

if block 안에 선언된 add()를 외부에서 접속하고 하면 not defined라고 뜸

But that's only true in strict mode

 

왜 안되냐면

strict 모드로 선언해놨기 때문!!

'use strict';

What if strict mode를 turn off 한다면?

결과값이 정상적으로 프린트된다.

    console.log(add(2, 3)); // prints 5

 

다른 상황)

만약 firstName을 if문 안에서도 선언하고, global scope에서도 다른 값으로 선언했다.

그럼 if문 안의 다음 실행문에서 firstName은 뭐가 찍힐까?

      const str = `Oh, and you're a millenial, ${firstName}`;
      console.log(str);

정답은 if문 안에서 선언한 값으로 출력됨!

Why? current scope에 있는 firstName이 우선순위이기 때문임

 

그러나 if문의 parent scope인 printAge()에서 firstName을 call 한다면 자식 scope안에서 선언된 firstName을 불러오지 않음

Global scope로 선언한 값을 불러올거임

 

다른 상황) 만약 밖에서 선언한 output을 자식 scope인 if문에서 redefine한다면?

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

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

      function add(a, b) {
        return a + b;
      }

      output = 'NEW OUTPUT!';
    }
    console.log(millenial);
    console.log(output); // NEW OUTPUT!
  }

console에 찍히는 프린트는 Sunny, You are 34, born in 1988가 아닌 NEW OUTPUT!이 찍힘

Why? didn't create a new variable but just re-defined

 

하지만 만약에 if 문안에서 앞에 const를 붙여서 선언한다면?

외부에 있는 output과는 completely different 변수가 됨

const output = 'NEW OUTPUT!';

 

고로 console.log(output);의 결과물도 Sunny, You are 34, born in 1988가 된다.