2. let 과 var

오늘 주제는 Javascript로 먹고 살기 위한 사람들이라면 한번 쯤은 다들 보았을 것이다.

 

 

해당 두 코드는 이벤트 루프안에서 i의 선언방식 "let" 이냐 "var"냐의 차이이다.

 

보시다시피 내부 callback의 console.log(i)의 값이 바뀌었다. 100% 이해한 것은 아니기에 어부렁더부렁 내가 이해한 흐름대로 설명을 가미해보자면...

 

선언은 총 3단계를 거치는데

1.변수선언 2.초기화 3.할당 단계로 이루어진다

let과 const의 경우 해당 순서가 차례대로 일어나지만 var는 1,2가 동시에 이루어진다. 즉 var 쓴 시점부터 이미 값이 있는 상태이다.

 

이벤트 루프에 의해 선언된 i의 값이 1씩 커지게 되고 i가 3까지 되었을때 false 상태가 이루어지며 이벤트 루프가 종료되고 내부 콜백 함수인 learnVar가 실행된다고 할 때 실행콘텍스트에서 let i는 값이 3이 되었을 때 false 상태임을 발견하고 이벤트 루프는 종료되고 트루였던 값들로 할당이 끝난다. 메모리만 남겨진 체 learnVar가 실행하게 되면 외부에서 i를 읽는 경우 남은 가장 근접한 2를 발견된다

 

var의 경우 이미 선언과 동시에 i의 값이 초기화 된 상태이다. 즉 i=3 이고 이벤트 루프가 종료가 되어버리면 3이라는 값이 조건에 true인지 false인지 고르기 전 이미 값이 있는 상태가 된다. 해당 상태에서 i의 값을 읽으면 이미 메모리에는 i =3 값 밖에 존재하지 않기 때문에 함수 실행시 i = 3 이 나오게 된다고 추측한다.

 

굳이 실행컨택스트를 그려보면 이런 느낌이라 추측된다....

 

var와 let의 차이는 공부하다보면 생각보다 많다는 걸 알게 된다. 간단히 구글링 만 해도 다 나오는 얘기긴 하지만 찾아보며 하는게 전체적인 범위를 단편적으로나마 이해하는데 도움이 된다

 

공부를 하며 하나의 언어를 100% 이해하는 개발자는 없다는 생각을 한다. 여러번 무지에 도달하고 조금씩 개선하며 알아가는 것이 개발자의 숙명인듯 하다.

var와 let의 차이 역시 그렇다. 해당 차이점을 발견하기 위해서라도 hoisting, blockScope, functionScope, redeclare, constant, how to change data by constant 등 알아야할 게 워낙 산더미니 너무 깊게 가지마시길...

 

 

늘 그렇듯 전체적인 FLOW를 체감하며 충돌하고 계속 배우고 공부하는 게 개발자이므로.

 

 

 

 

개인적으로 이해한 내용을 바탕으로 만든 노트 입니다. 잘못된 정보가 표기되어 있을 수 있습니다.
올바른 정보를 공유해주시면 저의 공부에 도움이 됩니다.