[JS] Scope & Hoisting

function outer () {
    var a = 1;
    function inner () {
        var a = 2;
        console.log(a);
    }
    inner();
}
outer(); // 2

inner 함수안에 a의 값을 할당만 한다면 어떻게 될까?

function outer() {
    var a = 1;
    function inner () {
        a = 2;
        console.log(a);
    }
    inner();
    console.log(a);
}
outer(); // 2, 2

inner 함수안에 a라는 변수를 선언하고 값을 할당 후,
또 다른 값으로 할당을 하면 어떻게 될까?

function outer () {
    var a = 1;
    function inner () {
        var a = 3;
        a = 2;
        console.log(a);
    }
    inner();
    console.log(a);
}
outer(); // 2, 1

inner 함수안에 a에 값을 할당 후 a라는 변수를 선언하고 값을 할당을 하면 어떻게 될까?
outer 함수의 a값이 바뀔 줄 알았는데 inner함수의 실행문이 속한 스코프를 먼저 찾기 때문에 a가 변하지 않는 걸까?

function outer () {
    var a = 1;
    function inner () {
        a = 2;
        var a = 3;
        console.log(a);
    }
    inner();
    console.log(a);
}
outer(); // 3, 1

let으로 변경하니 Cannot access 'a' before initialization 오류가 뜬다.
호이스팅을 알아보자.

function outer () {
    let a = 1;
    function inner () {
        a = 2; // 오류 구문
        let a = 3;
        console.log(a);
    }
    inner();
    console.log(a);
}
outer();

콘솔을 실행했을 때 a변수가 선언 후 할당 되기 전이므로 전역 변수를 사용하여
1이 출력될 줄 알았다. 이것도 호이스팅을 알아보자.

var a = 1;

function outer () {
  console.log(a);
  var a = 2;
}
outer(); // undefined

let으로 변경하니 Identifier 'a' has already been declared 오류가 뜬다.

let a = 1;

function outer () {
  console.log(a);
  let a = 2; 
}

outer();

아래 코드를 보면,
outer함수 내에서 먼저 변수a 선언문이 최상위에 호이스팅 된다.

function outer () {
  var a = 1;

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

outer();

그 후에는 먼저 inner함수가 호이스팅 되는 것이 먼저일까?
outer함수 내의 변수a에 값이 할당되는 것이 먼저일까?

함수선언식 또한 현 스코프상에서 최상위로 호이스팅되기 때문에,
inner함수 호이스팅 후 변수a에 값이 할당 될 것이다.

한번 알아보자..

inner함수가 변수a 값 할당보다 먼저 호이스팅 된다면?

function outer () {
  var a;
  
  function inner () {
    a = 2;
  }
  
  a = 1;
  
  inner();
  console.log(a); // 2
}

outer();

변수a값 할당 후 inner함수가 호이스팅 된다면?

function outer() {
  var a;
  a = 1;
  
  function inner () {
    a = 2;
  }
  
  inner();
  console.log(a); // 2  
}

outer();

위예제로 알수 없다.

아래 코드들을 보면 알수 있다.

1)
var a = 1;

function outer () {
  console.log(a);
  var a = 2;
}
outer(); // undefined

--- hoisting
  
var a;

function outer () {
  var a;
  console.log(a);
  a = 2;
}
a = 1;
outer();   

2)
var x = 3; 
  
function outer () { 
    if (x > 1) { 
        var x = 1; 
    }   
    console.log(x); 
} 
  
outer(); // undefined

---hoisting
  
var x; 
  
function outer () { 
    if (x > 1) { 
        var x = 1; 
    }   
    console.log(x); 
}
x = 3
  
outer();  

오답노트

1번

var a = 1;

function outer () {

  function inner () {
    console.log(a);
  }
  
  a = 2;

  inner();
}

outer();

1 이라고 생각했는데 함수를 실행하기 전 a에 값2를 할당해주었다.
전역변수 a는 2가 된 후 outer를 실행하므로 2가 콘솔에 출력된다.

2번

function outer () {
  function inner () {
    a = 2;
  }
  
  inner();
  var a = 1;
  console.log(a); // 1
}

outer();


코드 구동 흐름은 아래와 같다.

function outer () {
  function inner () {
    a = 2;
  }
  
  var a;
  inner();
  a = 1;
  console.log(a); // 1
}

outer();