자바스크립트는 변수를 선언할때 var, let, const 를 붙인다. 자바나 파이썬을 공부해 본 나에게는 이건 또 뭐냐는 생각이 처음에는 들었다.
근데 변수를 선언할때 붙여주고 간단한 특징만 알면 된다고 하니까 뭐 그렇구나 생각하고 공부를 했다.
계속 공부를 하다보니까 생각보다 혼동되는것이 많아 정리를 좀 해보려고 한다.
var
- 변수 재선언, 재할당 모두 가능하다.
- 변수 재선언이 가능하면 내가 아주 긴 코드를 작성하다가 변수가 선언되어 있는지 까먹고 재선언하거나 팀원이 나의 코드를 수정할때 이미 선언되어 있는지 모르고 재선언하게되면 원하지 않는 결과를 얻게 됩니다. 재선언 하게되면 기존에 변수에 저장되어 있던 값은 재선언하면서 저장되는 값으로 대체되기 때문 입니다.
- 이 문제를 해결하기 위해 let, const 가 추가 되었습니다.
let
- 변수 재선언 불가능, 재할당은 가능하다.
const
- 변수 재선언, 재할당 모두 불가능하다.
뭐 여기까지는 쉽네? 라고 생각할것 입니다. 스코프가 어떻게 달라지는지 알아봅시다.
스코프
var
- var 는 함수레벨 스코프를 가집니다.
- var로 선언된 변수는 함수 내에서는 값이 유효합니다. 어디서든 함수 내에서는 참조 가능합니다.
let, const
- let, const는 블록 레벨 스코프를 가집니다.
- var와 달리 함수 내에서도 선언된 블록이 다르다면 참조가 불가능 합니다. 변수가 선언된 블록 내에서만 참조가 가능합니다.
호이스팅
자바스크립트는 스크립트가 로딩되는 시점에 var, let, const, 함수등이 스크립트 최상단으로 올라가 선언된것처럼 참조가 가능하게 되는 것이다.
각각 조금씩 다른데 차이점을 알아봅시다.
var
- var로 선언된 변수는 선언과 초기화까지만 호이스팅된다. 초기화는 undefined 로 초기화된다.
console.log(i); // undefined
var i = 3;
console.log(i); // 3위의 코드와 같이 i 변수 선언 전에 i를 출력하면 호이스팅되어 있기 때문에 undefined가 출력되는것을 확인할 수 있다. 그리고 i 선언 후에 출력하게 되면 3이 할당되었기 때문에 3이 출력되는것을 확인할 수 있다.
var i;
console.log(i); // undefined
i = 3;
console.log(i); // 3위의 코드는 호이스팅이 되면 내부적으로 어떻게 되는지 코드로 보여준다.
let, const
그럼 let, const로 변수를 선언하면 어떻게 될까? 물론 호이스팅은 된다. 하지만 var 와 조금 다르다. 다른점은 let, const 로 변수를 선언하면 변수의 선언만 호이스팅되고 초기화는 되지 않는다. 그래서 코드에서 변수 선언보다 위에서 변수를 출력할려고 한다면 에러가 발생 합니다.
console.log(i); // 에러 발생
let i = 3;
console.log(i); // 3함수 선언문
함수 선언문은 자바스크립트를 실행하면 선언, 초기화, 할당까지 모두 호이스팅 됩니다. 이것을 함수 호이스팅 이라고 합니다.
함수 표현식
그럼 함수 표현식도 그럴까요? 아닙니다. 함수 표현식은 변수 호이스팅이 되기 때문에 변수 호이스팅의 특징을 가지기 때문에 에러가 발생합니다.
결론은 무엇을 써야 하는거야? 라는 생각을 하실 수 있습니다. var 는 예상하지 못하는 에러가 생길 수 있기 때문에 사용하지 않고 재할당을 원하지 않는다면 const 를 사용하고 재할당이 필요하다면 let 을 사용하면 됩니다.
