자바스크립트 var, let, const 이해하기

1. javascript hoisting이란?

안녕하세요. javascript 질문도 몇개 올라오는 것 같아서 저도 질문 남깁니다! 공부를 하다가 javascript hoisting을 쉽게 설명하면 "함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것" (https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html) 이라고 많이 하는데, 이게 무슨 뜻인지 또 어떻게 가능한 것인지 궁금합니다.

답변

이 부분은 실행 컨텍스트를 이해했을 때 더 정확한 개념적 이해가 가능합니다. 코드를 실행했을 때, 자바스크립트 엔진은 코드를 “평가”하는 과정을 거치는데요, 이때 실행 컨텍스트가 생성이 됩니다. 실행 컨텍스트는 “레코드”라는 공간에 먼저 선언된 변수와 함수 선언문들이 있는지 확인을 하고 있다면 먼저 정보들을 가져옵니다. var 키워드로 선언된 변수들은 선언과 동시에 암묵적으로 undefined로 할당이 됩니다. 이후 코드를 “실행’하는 과정에서 순차적으로 코드를 실행하면서 값이 할당됩니다. 예를 들어 var a = 1이라는 코드가 있다면 var a는 먼저 레코드에 등록이 되어있는 상태이고 1이라는 값은 실행하는 과정에서 코드가 한 줄씩 실행될 때 할당되는거죠. 그래서 코드를 실행할 때 함수를 선언하고 값을 할당하는 코드 전에 console.log(a)를 출력했을 때 undefined를 반환하는 것입니다. 이것을 변수 호이스팅이라고 하는 것입니다. 우아한테크코스 크루분들이 진행하시는 테크토크 영상인데요 실행 컨텍스트 내용 영상을 보시면 더 확실하게 이해가 가실거에요! :) https://www.youtube.com/watch?v=EWfujNzSUmw&t=791s

2. Javascript에서 왜 더이상 var를 사용하지 않나요?

안녕하세요, 이제 막 시작한 코딩 초보입니다. 변수 선언에 대해 배우는 중인데, var은 이제 거의 쓰지 않고 let이나 const로 바꾸어서 사용한다고 배웠습니다. 궁금한 점은 다음과 같습니다. 1. 왜 var 대신 let과 const가 더 좋나요? 2. 그럼 var은 더이상 배우지 않아도 문제 없을까요? 선생님께서는 쓸 일이 거의 없을 거라고 하셨는데, 개발자 커뮤니티 등등 찾아보면 var에 관련된 내용이 은근 많은 것 같아서요..! 감사합니다. 즐거운 연말 되세요 ㅎㅎ.

답변

var 키워드로 변수를 선언했을때 문제점을 보안하기 위해서 ES6 문법으로 let, const 키워드가 나왔습니다. 블록레벨 스코프와 함수레벨 스코프, 호이스팅, TDZ에 대해서 구글링 해보시면 좋을것 같아요! 유튜브에 이해하기 좋은 영상이 있어서 링크 첨부해드립니다😎 즐거운 연말 되세요~ https://youtu.be/HsJ4oy_jBx0

3. useState에서 const를 사용하는 이유는 뭔가요?

react를 사용할때 useState hook을 많이 사용하는데요 const [count, setCount] = useState(0) 이렇게 사용하고 setCount를 이용해서 count가 변화가 되는데 왜 const를 사용하는 걸까요?! let [count, setCount] = useState(0)가 더 맞는거같은 기분입니다.

답변

평소에 아무 생각없이 사용하는 경우가 많았는데 이 질문으로 다시 찾아보게 되네요! - https://dudghsx.tistory.com/18 - https://hewonjeong.github.io/deep-dive-how-do-react-hooks-really-work-ko/ 위의 두 개 링크를 참고해 보면 좋을것 같아요.

4. 클로저 문제에 대해 질문이 있습니다.

아주 유명한 클로저 문제인데요 해당 코드에서 setTimeout의 콜백함수가 10번 생기게 되는데, 이 때 바깥의 func함수의 변수 i는 10개가 생기는 건가요? 아니면 한 개만 생기는건가요?

답변

안녕하세요! 우선 답변부터 드리자면 1개만 생기게 되는 것으로 알고있습니다. i를 var로 선언하셨기 때문에 func 함수의 스코프로 할당이 되는데요. 이 때문에 setTimeout에 제공하는 arrow function 속 i도 func 스코프의 i를 뜻하게 됩니다. 만약 i를 let으로 선언하셨다면, ex) for ( let i = 0; i < 10; i++ ) { setTimeout(() => { console.log(i) }) } 반복문이 한번 돌때마다 i는 block 스코프로 할당이되고 setTimeout에 제공하는 arrow function도 해당 block 스코프 속 i를 사용하게 됩니다. 그래서 var를 사용한 예시는 setTimeout의 콜백이 돌때는 이미 for 반복문이 다 돌고 난 뒤고 func의 스코프를 사용하기 때문에 console.log가 다 10을 찍는 반면, let을 사용한 예시는 for 반복문이 다 돌았어도 setTimeout의 콜백이 for 반복문의 개별 스코프를 사용하기 때문에 console.log가 0~9까지 올바르게 찍는 것을 알 수 있습니다. 이 개념은 JS의 호이스팅과 스코프 개념을 알고 계시면 이해가 더 빠르실 것 같습니다. 참고하시면 좋을법한 링크들 첨부합니다 :) - https://ui.toast.com/weekly-pick/ko_20160311 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#lexical_scoping - https://developer.mozilla.org/en-US/docs/Glossary/Hoisting - https://www.freecodecamp.org/news/lexical-scope-in-javascript/