var, let, const - 바렛콘스트 죽었어..

주유구·2022년 9월 17일

var
let
const

프론트 개발자라면 지긋지긋하게 따라다닐 아이들인데
나는 왜 이것도 까먹어버려서 아무것도 모르는 사람으로 낙인이 찍힌 것인가!
라고 후회하며 소잃고 외양간을 고쳐봅니다...

들어가기에 앞서서
공통사항.

호이스팅은 var만 일어나는것 아님. let, const, function 다 일어남. 선언이면 다 되는것
호이스팅이요?호이호이

호이스팅

호이스팅은 브라우저가 자바스크립트를 읽을 때, 호이스팅 가능한 놈들(변수, 상수, 함수)을 걔네가 작동하는 범위(스코프) 내에서 가장 먼저 선언하도록 하는 것임.
뭔말이고?포스트를 끝까지 읽으면 아~할것이다.(아마도)

선언과 할당은 다르다..

선언과 할당

아래만 기억하자
선언 : var num;
할당 : num = 1;

Var

고대의 자바스크립트에서 사용되던 녀석(이라고해봤자 삼십년이 안됨)
그때의 개발자들은 text, num같은 변수명을 선언하면 제법 혼났을지도..
왜냐면 1 line에서 var num=1; 해놓고 200 line에서 var num=50;이라고 해도 에러가 안난다. 1
원래 1이던 num 앞에 var를 달고 있단 이유만으로 어떻게 변할지 모름. 다른사람이 num을 또 쓰면, 자바스크립트를 읽어가는 중간에 전혀 에러가 안남. var는 스코프도 다른 키워드들과 달리 function 스코프라서, 진짜 예측 불가능..

function level scope요..?

이런말이다..함수레벨스코프가 무슨말이냐면 함수 안에서 쓴 you라는 변수는 함수안에서만 가능하고 밖에서 호출하면 않되
그래서 함수 밖에서 you변수를 콘솔을 찍으면 브라우저는 you라는거 모르는데~~자리도 안만들어놨는데~~라고 하는거고,
(여기서부터 헷갈릴 수 있음)
함수 안에서 you라는 놈을 찍으면 브라우저는
1번콘솔:자리는 만들어 놨어.(호이스팅 돼서 선언이 됨)
2번콘솔:자리는 만들어 놨어.(선언은 됐음)
3번콘솔:you는 3이야.(할당까지 됨)

골깨지죠잉?

그래서 2015년..레드벨벳이 덤덤을 들고 컴백하던 해에 자바스크립트는 ES6라는 걸 들고 컴백했다. 좀 더 좋은 키워드와 함께

let, const

자바스크립트의 야심작 let과 const
var와 달리 재선언이 안됨.
1 line에 let name = 'yoo';해두고 let name = 'choo';
이꼬라지남ㅋㅋ name변수를 두번 선언하지 마!라고 튕김
근데?

이건 또 됨. 왜냐. 할당을 두번하는거니까. let은 그것을 let 하기 때문...그래서 let인가..

let, const의 스코프

let은 블록({})레벨 스코프이다. 그래서 블록 밖에서 선언 안한 car라는 녀석은 블록 안에서 선언됐기 때문에 아직 선언 안된 녀석이 있다 우린 파업한다!하고 에러를 띄우고 더 이상 읽기를 멈춤.

이놈의 경우에는, 블록안에서는 hand가 자동차 car는 손예진, 밖에서는 hand는 소고기 car는 인도다. 이것이 let과 const의 특징