Scope Quiz

Q1)

function foo () {
  var a = 5;

  for (var i = 0; i < a; i++) {
    console.log(a);
  }

  console.log(i);  // 무엇이 출력될까요?
}
foo();

예상 답 : 5
예상 이유 : 함수 foo()가 실행되면 a가 선언되고 5가 할당된다. for문에서 i가 선언되고 a가 필요하므로 a를 찾는다. 같은 scope에 a가 선언되어 있으므로 a의 값을 가져와서 for문을 돌린다.
console.log(i)에서 i를 찾게되는데 for문은 함수가 아니기 때문에 i는 console.log(i); 문과 같은 scope에 있다. 따라서 error가 아닌 i가 출력된다.
정답 : 5

 

Q2)

var a = 1;

function bar () {

  function foo() {
    console.log(a);  // ?
  }

  foo();
}
bar();

예상 답: 1
예상 이유 : console.log(a); 를 실행하기 위해서 a를 찾는데 foo() 함수에는 없으므로 한 스코프 위인 bar()함수에서 찾는다. bar()함수에도 a가 없으므로 global scope에서 a를 찾게된다. 
a가 존재하므로 값을 읽어와서 출력한다.
정답 : 1

 

Q3)

var a = 1;

function bar () {

  function foo() {
    console.log(a);  // ?
  }
  
  a = 2;

  foo();
}
bar();

예상 답 : 2
예상 이유 : console.log(a);를 실행하기 위해서 a를 찾는다. 함수 foo()의 scope에는 a가 없으므로 상위 스코프인 bar()함수에서 찾게된다. a = 2가 있으므로 값을 읽어와서 출력한다.
정답 : 2

 

Q4)

function foo() {
  var a = 1;

  function bar () {
    a = 2;
  }

  console.log(a); // ?
  bar();
}
foo();

예상 답 : 1
예상 이유: foo()함수가 실행되면 var a = 1;로 a가 선언되고 값이 할당된다. console.log(a);를 실행하면 a를 찾는데 bar()함수는 console.log(a);보다 하위 스코프이므로 bar()내부의 a는 가져올 수 없다.
따라서 console.log(a)는 같은 스코프인 foo()에서 a = 1을 가져오게 된다.
정답 : 1

 

Q5)

var x = 1; 
  
function foo () { 
    if (x > 1) { 
        var x = 2; 
    } 
  
    console.log(x); 
} 
foo();

예상 답 : 1
예상 이유: foo()가 실행되고 if의 조건문이 성립하지 않으므로 x=1값을 가져오게 된다.
만약 첫번째 줄에서 var x = 3;이라면? -> 2가 출력된다. console.log(x);는 foo와 같은 scope에 있으므로 if문을 실행하고 바뀐 x의 값을 가져오게 된다.
정답 : undefined
오답 이유 : Hoisting에서 찾을 수 있었다. foo()가 실행되면 함수 내부에는 var x = 2;라는 코드가 있어서 foo()함수 전체에 걸쳐서 선언이 된다. 즉 global scope의 var x=1은 Hoisting된 foo()함수 내부의 var x = 2에 의해 감춰지게 된다.
위의 코드를 다시 쓰면 이와같이 된다.

function foo(){
   var x;
   if(x>1){
      x = 2;
   }

   console.log(x);
}

console.log(x);는 foo함수 내부에 있으므로 foo 함수 내부의 x를 사용하게 된다. 그러나 x의 값은 undefined이므로 if문은 실행되지 않는다. 따라서 x=2라는 코드는 실행되지 못하고 x는 undefined인 상태로 console.log까지 오게된다.
따라서 결과값은 undefined가 나오게 된다.
if 1)

if 내부에 있는 var x = 2; 가 var y = 2;로 된다면? -> 결과값은 1이 나오게 된다. foo함수 내부에 x가 없으므로 console.log(x)는 상위 scope 인 global scope에서 x를 찾게 된다. x가 존재하므로 global scope의 x값을 가져오게 된다.
if 2) 

foo 내부의 var x = 2가 var x = 0이 된다면? -> undefined 출력. 여전히 if문 전에 var x가 선언되므로 if 조건문에서의 x는 undefined값이 오게 된다. 따라서 if문은 실행되지 않는다.

 

참고)

https://devfunny.tistory.com/1

자바스크립트에서 변수 유효범위와 호이스팅