니꼬샘 ES6의 정석 강의 미리보기: var를 사용하면 안되는 이유(최종판)

그전에 썼던 글로만 하기엔 뭔가 알아먹기 어렵다 이거지..해서

이것저것 알아보다가 좋은강의를 찾게되었다. 

ㅠㅠ 아니 이렇게 너무 쉽게 설명을 해주시는데 영어로 들어도 귀에 쏙쏙들어옴... 번역도 너무 잘되어있고

 

https://nomadcoders.co/es6-once-and-for-all

ES6의 정석 – 노마드 코더 Nomad Coders

 

강의를 보다가 이건 블로그에 정리를 한번더 해야겠다! 해서 강의를 정리해서 가지고 옴.

( 진짜 니꼬샘보면서 느끼는건데 이것저것 아시는게 많은데 그걸 또 쉽게 풀어서 설명해주는거 보면 대단하다고 느낌.)

 

var name ='이름'; //선언
console.log(name);

보통은 자바스크립트는 위 ---> 아래 차근차근 실행된다.

그래서 선언을 무조건 호출부 상단에 선언하게 되는데 만약에 선언부랑 호출부를 바꾸면 오류가 날까?

 

console.log(name); // 'undefined'

var name ='이름'; //선언

정답은 오류는 나지 않는다. 

방금 위에 말과 전혀 다른 결과가 나온다.

위에 없는데도 name을 인식한다구요??????

 

바로 호이스팅(hoisting)이란 개념때문이다.

어후 , 뭘 이렇게 계속 알아야 하냐 싶지만 var를 쓰지 않아야 되는 이유를 설명중이니 조금만 더 들어봐야 한다. ㅎ

 

우리 MDN에서는 호이스팅을 친절하게 설명하고 있으니, 더 자세하게 알고싶은 분은 참고하시길!

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN

 

 일단 호이스팅은 엄청 쉽게 말하면, 선언부를 최상단으로 옮겨 실행을 먼저 처리하게 해준다. 

호출부가 상단에 있더라도 아래 하단에 선언부들이 있으면 일단 선언부들을 위로 올려줌. (단, 값이 아니라 선언만)

 

즉, 내부실행순서를 포함하여 실행되는 순서는 아래와 같다.

요러니 선언은 되어있으니 오류를 뱉지 않는다.

var name; //선언
console.log(name);

name='이름';

그래서 바보같은 실수로 선언부를 하단에 둬도 오류를 1도 안뱉는 불상사가 생기는 것이다.

그럼 let은 어떠냐?? 바로 여기에서 var를 쓰지말라는 이유가 나온다.

 

console.log(name);

let name='이름';

결과!!! 선언부가 없으니 오류를 발생시킴 ㅎㅎ

 

단순한 실수에도 원인을 찾으러 돌아다녀야 하는 수고로움이 너무 힘들어서

이런거 하나하나 쉽게 찾을수 있는 let, const를 쓰라고 한것이다. 

 

* 그럼, 여기서 드는 의문!! - let하고 const는 호이스팅이 안되요??? 그래서 쉽게 찾을수 있는거예요?

- 찾아보니, 또 그건 아니라드라..

  더 자세하게 설명할만큼 내가 이해를 하지 못해서 ㅠㅠ 더 자세하게 설명해주신 블로그를 찾아옴.

https://noogoonaa.tistory.com/78

TDZ(Temporal Dead Zone)이란?

 

이래서 var를 쓰지 말라는구나!! 생각이 확 들면서 머릿속 개념이 한층 더 정리되었다.

니꼬샘이 하신말 중 귀에 박히는 말씀이 있는데 공유하고 싶다. 

Always 'const'
Sometimes 'let'
Never 'var'