js에서 var와 let은 둘다 비슷해보이지만 큰 차이점이 있다.
let이 var보다 나중에 나온건 다들 알테니 넘기고 let는 블록단위 변수고 var는 프로그램 단위 변수란건데, 예제로 살펴보겠다.
console.log(a);
var a = "abc";
console.log(a);
var는 프로그램 단위 변수이다. 이후 a라는 변수가 선언되므로 이 변수는 프로그램 전체에서 선언되며, 첫번째 줄은 a 변수가 초기화 전 단계일뿐이라 undefined가 출력되지만 어쨌건 동작은 한다.
console.log(a);
let a = "abc";
console.log(a);
하지만 같은코드에서 var만 let으로 바꾸면 이야기가 달라진다. 첫번째 줄에서 a라는 변수는 존재하지 않는 상태이다.(정의 자체가 안되어 있음) 물론 두번째줄에 있지 않냐고 할수 있지만 두번째줄 a 변수는 생성 이후 코드에서만 유효한 변수이므로 실행시 a is not defined 오류가 발생하게 된다.
여기에서 알수 있는건 var의 경우 어쨌건 프로그램 어딘가 선언해놓기만 하면 오류없이 undefined로 사용 가능하단거고 let은 칼같이 오류가 난다는 점이다. 당연히 선언하지도 않은 변수를 사용부터 하는 케이스는 없으며, IE 아닌이상(IE11은 for문에서 let 사용시 for 단위로 변수 구분되지 않는것 빼면 지원하긴함) let을 지원하지 않는 브라우저는 없으므로 99% 상황에서는 let을 사용하는게 좋다.
번외편) const vs let
const가 상수 선언자라는건 아마 알텐데, node를 하다 보면 가끔 이런 문장을 볼수 있을것이다.
const some_module = require('somemodule');
이렇게 선언해놓고 some_module를 가지고 값 바꾸고 난리치는데 const가 상수니까 값변경 안되는것 아니냐고 생각할수 있다.
하지만 const 선언시 값을 변경할수 없는건 변수 값 자체이지 변수가 가리키는 객체는 아니다. 이것도 예제를 통해 살펴보자.
const a = [];
a.push("ABC");
위 코드를 실행해보면 const라 변경 불가능해 보여도 잘만 배열안에 ABC가 추가되는것을 볼수 있는데, 이는 a라는 상수가 변경된것 아닌, a라는 상수가 가리키는 배열 객체가 변경된것이기 때문이다. node에서 모듈 가져올때 const를 쓰는것도 일반적인 경우 한번 모듈객체를 가져오면 그자체를 바꿀일은 없기 때문이며 바뀔경우 의도치 않은 동작이 가능하기 때문이다. 그냥 막아두면 혹시나 까먹고 수정시도를 하더라도 const이기에 막히게 된다.
결론) 대부분 let을 사용해서 선언하면 된다. 변수 재할당을 막고 싶다면 const를 사용한다.
웹땔깜인데 고맙다
글이 틀린말은 하나도없는데 교묘하게 핵심을 다 빗겨갔네 근데 마지막은, 오히려 const를 기본으로 쓰고 재할당이 필요한 경우에만 let을 쓰는게 나을거야
ㅇㅇ 대충쓴건데 꼬우면 직접 글쓰셈
결론 : 개발자가 유지보수하기 쉽고 휴먼에러를 적게 만들 수 있는 블록단위 스코프를 쓰도록 하자.
let/const는 var와 다르게 호이스팅 처리가 되더라도 실제 변수가 있는 지점까지 도달하지 않으면 엑세스 불가 (에러) 가 뜬다. IE지원을 하지 않거나, 바벨같은 트랜스파일러를 사용한다면 let, const를 사용하는게 심신안정에 도움된다.
혹시나해서 적는데 아래 글보고 대충 십분정도 끄적인거라 오류나 대충 설명한거 있을수 있는데 그냥 대충 넘기고 맘에 안들면 직접 보충글쓰셈
그래서 보충덧글쓰는거야
ㅇㅇ 댓글다는거 보고있음 ㄳㄳ
var가 프로그램 스코프가 아니고 함수 스코프 아니였든가요? 둘이 제가 구분이 잘 안돼서 그러는데 설명 가능한가요
ㅇㅇ 함수스코프 맞는데 간단히 설명하기 위해서 프로그램 단위라고 했음.
TDZ내용은 어디감? - whatever we can do it
위에도 적었는데 꼬우면 직접 글쓰셈
맞네 하자있는건 내 눈깔인듯 ㅈㅅ;; - whatever we can do it