오늘은 변수에 대해 좀 더 자세하게 다루어 보려 한다.
변수의 종류 var let const중 왜 let과 const가 나오게 되었는지, 어째서 var를 사용해서는 안되는지에 대해 알아보자.
변수의 종류
변수의 선언과 할당
우선 우린 var와 let 그리고 const에 대해 알아보기 전에 변수가 어떠한 방식으로 선언 되고 할당 되는지에 대해 알아야 한다.
변수의 선언과 할당은 다음과 같다.
var a; // 변수의 선언
a = 5; // 변수의 할당
var a = 5 // 변수의 선언과 할당을 동시에 행함즉, 변수의 선언과 할당은 다른것이며, 우리가 평소에 사용하는 방법은 변수의 선언과 할당을 동시에 행하는것이다.
위의 정보를 머리 한켠에 넣어두고, 본격적으로 변수에 대해 알아보도록 하자.
var
var는 variable(변수)의 줄임말로, 초기 자바스크립트에서 변수를 선언할때 사용 가능한 키워드이다.
var a = 5;
console.log(a); // 5출력이런 식으로 변수를 선언하고, 할당하는것이 가능한 키워드인데, 무엇때문에 let과 const를 만들게 된것일까?
우리는 비슷하게 보이는것이라도 왜 나올 수 밖에 없었는지 알아 볼 필요가 있다고 생각한다.
var의 단점은 다음과 같다.
var의 단점
var가 단순히 변수를 담고 있기만 하면 문제가 되지 않을것이다.
var의 치명적인 단점은 바로, var에 변수를 선언하고 할당한 뒤, 다른 어떤 요인으로 인해 같은 변수명으로 다른 값을할당하게 된다면, 아무 문제 없이 재선언, 재할당이 가능하다.
var a = "hello";
var b = " world!";
console.log(a + b); // "hello world!"
// 약 5천줄 이상의 코드가 작성 되고 다른 사람이 입력한다.
var a = 10;
console.log(a + b); // "10 world!"이 경우, var는 에러를 발생 시키지 않는다.
'에러가 나지 않는다면 좋은거 아닌가?'
하고 생각 할 수 있지만, var로 인해 발생하는 문제는 조금 다른 양상을 띈다.
위에서 보았듯이, 우리는 a에 "hello"라는 값을 할당하고, " world"를 뒤에 붙여 "hello world!"를 출력하도록 프로그램에게 요청하였다.
결과엔 잘 출력 되었고, 여기까지는 아무 문제가 없었다.
누군가가 a에 다른 값을 넣기 전까지는 말이다.
우리는 "hello world!"를 원했지만, a의 값이 재선언, 재할당 되었기 때문에 결과는 "10 world!"라는 이상한 값이 선언 되었다.
물론 일부러 악의를 가지고 이렇게 작성 할 리는 없을것이다.
하지만, 실수로 이런 일이 발생한다면, 에러를 발생 시키지 않기때문에 어디서 문제가 생겼는지 5000줄 이상의 코드를 뒤져가며 찾아야 할것이다.
이외에도 호이스팅이라는 단점이 있지만, 아직 호이스팅에 대한 문제가 발생하여 대응한 적이 없기에.. 생략하도록 하겠다.
결국 이러한 단점 때문에 새로운 변수 타입인 let과 const가 나오게 되었다.
let & const
먼저 let부터 살펴보자.
변수타입 let은 재할당은 가능하지만, 재선언은 불가능하다.
이 말은, let의 값을 바꾸는것은 가능하지만, 같은 이름의 변수를 다시 선언하는것은 불가능하다는 것이다.
let a = 62;
let b = 32;
console.log(a - b); // 30
a = 52;
console.log(a - b) // 20
let a = 32; // Uncaught SyntaxError: Identifier 'a' has already been declaredlet은 var과 다르게 에러를 발생시켰다.
a는 이미 선언 되었으니, 다른 이름의 변수를 선언하라는 에러이다.
만약 var였으면 재선언이 가능하여 값이 변했을것이다.
이처럼 let은 값을 바꾸는것은 가능하지만, 재선언을 할 때엔 에러를 발생시키고, 재선언을 거부한다.
const는 어떨까?
const는 var와도 let과도 다르다.
const는 선언되고 값이 할당 되는 순간, 재선언과 재할당이 불가능하다.
한번 이렇게 사용 한 변수는 나중에 값을 바꿀 수 없는것이다.
const a = 5;
console.log(a); // 5
a = 6; // Uncaught SyntaxError: Identifier 'a' has already been declared
const a; // Uncaught SyntaxError: Missing initializer in const declaration
이처럼, const는 재할당과 재선언을 모두 거부한다.
만약 바꾸고 싶지 않은 변수가 있다면 const를 사용하고, 값이 변해야 하는 변수가 있다면 let으로 바꿔서 사용하도록 하자.
