js..변수 그리고 호이스팅(feat 클로저)

js의 변수 선언방법

현재 자바스크립트의 변수 선언방법은 3가지가 있다.

제일 처음 방법이였던 var
그리고 es6이후 나온 let
상수를 위한 const

그럼 왜 let 이 나온걸까?
그것은 스코프에 있다

스코프란?

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다. 만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

mdn에서 설명하는 정의 이다
쉽게 말하면 선언된 변수를 어디서까지 쓸수 있을까? 이다

🗣🗣(전문적인 내용은 아닙니다. 정확히 알고싶다면 렉시컬 스코프에 대해서 공부해야합니다
유돈노 자바스크립트 책이나 https://meetup.toast.com/posts/86 참고해주세요)

그럼 각 변수 선언 방식의 스코프 범위는 어떨까?
const는 let과 같으니 let과 var을 비교해보자

값	의미
블록스코프	함수스코프

함수스코프

var은 함수 수코프를 가진다.

funtion t(){
	var a=0
}
console.log(a)

위와 같은 코드에서 처럼 함수블록 안에서 선언된 a는 해당 함수 밖에서는 참조를 할수없다.

하지만 var는 함수 스코프라서 다른 블록인 if for등에서는 다르게 작동이 된다

if(1){
    var a=1
}
console.log(a)

해당 코드는 실행이 아주 잘된다.
왜냐. var은 함수 스코프라서 그렇다.

그래서 그냥 if 든 함수든 { } 이걸로 감싼거 다 스코프로 한정하자 해서 나온게
블록스코프 인 let 선언이다.

그래서 호이스팅은?

var하면 스코프 다음으로 나오는데 호이스팅이다.

사실 호이스팅은 var let const 에서 다 발생한다.
let const에서는 에러를 뱉고 var에서는 그냥 undefinde를 뱉을뿐이다

그래서 호이스팅이 뭔데?

function foo() {
    a = 12;
    var a;
    console.log(a);
}
foo();

요런 요상한 코드가 있다
그리고 아주 잘 실행된다.

function foo() {
        console.log(a);
    
    var a = 12;
    
}
foo();

그리고 이코드고 이상하게 실행이 된다. 왜일까?
그 이유는 js은 인터프리터 언어지만 인터프리팅 되기 전에 먼저 컴파일이 된다.

그 단게에서
1. var a
2. a=12
이런식으로 변수선언(생셩) 과 변수 초기화 단계가 나뉘게 된다.
그리고 선언단계는 코드 어디든 특정 변수를 쓰게 되면

해당 변수를 먼저 선언을 하게된다. 정확히는 실행컨텍스트의 변수 객체에 추가르 한다고 한다( 이부분은 렉시컬과 실행컨텍스트를 다시 깊게 포스팅 하려고 한다)

그 뒤에 해당 변수에 값을 할당하게 된다.
그러니깐 코드 상으로는 분명 선언되기 전에 참조를 했지만
에러가 안나오고 undifined가 출력되는것이다.

다행이도 let은 에러가 뜬다.