[JS] 함수스코프 var VS 블록스코프 let,const

1. 호이스팅 (hoisting)

var 변수 선언 , 함수 선언문을 위로 끌어 올려서 해당 함수 유효 범위의 최상단에 선언

• 스코프 단위로 발생
  -> 스코프 : 변수에 접근할수 있는 범위로써 식별자(변수)를 찾기 위한 규칙으로 변수의 유효범위
  1) 전역 스코프 (Global scope) : 코드 어디에서든지 참조할 수 있다.
  2) 지역 스코프 (Local scope or Function-level scope) : 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

• TDZ(Temporal Dead Zone) : 일시적 사각지대.
  변수 선언 및 초기화 하기 전 상태로 TDZ 상태에서 변수를 사용하려고 하면 ReferenceError

2. 함수 스코프, 블록 스코프

JS는 다른 언어들과 다르게 함수레벨 스코프를 따른다
하지만 const, let은 블록레벨 스코프를 따른다

1) 함수스코프
: 새로운 함수가 생성될때마다 새로운 스코프가 발생한다.
함수 몸체에 선언한 변수는 해당 함수 안에서만 접근할 수 있음

2) 블록스코프
: 말 그래도 블록 {}이 생성될 때마다 새로운 스코프가 형성되는 것

function varFor(){
    for(var i =0; i<3; i++){
         setTimeout(() => { console.log("var i: ", i)
         }, 0);
    }
}

function letFor(){
    for(let i =0; i<3; i++){
         setTimeout(() => { console.log("let i: ", i)
         }, 0);
    }
}

varFor(); // 3 3 3 
letFor(); // 0 1 2

3. 스코프를 결정하는 방식

JS는 렉시컬 스코프를 따른다.

이때 화살표 함수는 렉시컬 스코프를 통해 상위 스코프를 정하기때문에 this가 메서드를 호출한 객체가 아닌 전역 객체를 가리킵니다.

1) 동적 스코프(Dynamic scope)
: 함수를 어디서 호출했는지에 따라 결정
2) 렉시컬 스코프(Lexical scope) 또는 정적 스코프(Static scope)
: 함수를 어디서 선언했는지에 따라 결정

함수스코프,블록스코프