자바스크립트에는 변수를 선언하는 세 가지 방법이 있다.
var, let, const가 그 방법이다.
하지만 각각의 장단점이 있으므로 이것들이 서로 어떻게 다른지 알면 좋다.
- var
: var는 소규모나 빠른 개발을 위해서는 좋다고 할 수 있으며 함수레벨 스코프를 가진다.
또한 앞선 게시물에서 말한 호이스팅이 가능하다.
var x=1;
if(true){
var x=100;
}
console.log(x); //100
위 코드를 한 번 보자.
if문 바깥에서 x는 1로 선언되었고, if문 내부에선 x가 100으로 선언되었다.
보통의 다른 언어는 if문 안에 변수 선언 시 중복 선언되지 않을 것이다.
그러나 var사용 시 중복 선언이 허용되어 1이 아닌 100이 표기된 것이다.
var는 중복 선언이 허용되어 협업을 할 때 몇 백 혹은 그 이상의 코드가 작성되어 있는 경우, 서로 다른 개발자가 각자 똑같은 이름의 변수를 사용해 결과값이 예상과 다르게 나올 수 있다는 단점이 있다.
var에서의 호이스팅으로 변수 선언이 뒤에 있어도 출력이 된다.
이로 인해 변수 값이 선언되지 않더라도 error가 나지 않고 undefined가 출력된다.
- let
: let은 중복 선언이 허용되지 않고(재선언은 가능), 블록레벨 스코프이다.
let fruit='apple';
let fruit='banana';
다음과 같은 코드를 살펴보자.
과연 이 코드는 옳을까?
정답은 땡이다.
let은 중복 선언이 허용되지 않는다.
따라서 위와 같은 코드는 syntax error가 발생한다.
이는 var에서 중복선언을 허용해 발생하는 문제점을 해결하기 위함이다.
또한 let으로 선언한 변수는 if문, for문 등 블록레벨 스코프를 따른다.
함수 내에 선언된 변수는 해당 함수 내에서만 사용되므로 전역 변수와 따로 사용이 된다.
let의 호이스팅은 발생하지 않는 것처럼 동작을 한다.
console.log(fruit); //reference error
let fruit;
console.log(fruit); //undefined
let fruit='apple';
console.log(fruit); //apple
첫 줄에서는 변수가 선언되지 않았으므로 참조에러가 발생한다.
두 번째 코드처럼 값을 할당하지 않고 선언만 했을 경우에는 var와 같이 undefined가 출력된다.
마지막 코드는 값을 할당해주었기에 해당 값을 출력한다.
- const
: const는 기본적인 let의 성질을 모두 가지고 있으며, 블록레벨 스코프를 가진다.
const는 반드시 선언과 동시에 초기화 해야 한다.
const a; //syntax error
const name = value;
이는 const가 상수를 선언하는 목적으로 만들어졌기 때문이다.
또한 const는 재할당이 금지된다.
const a = 100;
a = 10; // type error
만약 재할당을 하게 될 경우 타입에러가 발생한다.
그렇다면 우리는 어떤 방식의 변수 선언을 하는 것이 좋을까?
웬만하면 var 대신 let과 const를 사용하도록 하자.
이는 아래와 같은 이유때문이다.
- 재선언을 금지해 변수 이름이 중복되는 것을 방지한다.
- 변수값 할당 전, 변수 사용 시 혼란을 줄여준다.
- 블록레벨 스코프로 접근을 제한하여, 변수 간 차이를 명확히 한다.
마지막으로 var, let, const를 간단히 표로 정리하며 마무리하도록 하겠다.
