변수(Variable)는 값이 저장된 메모리 공간의 주소를 가리키는 식별자(identifier)입니다.
자바스크립트에게 변수를 사용한다는걸 알려주는 방법입니다.
변수를 선언하고 사용하기 위해서는 변수의 종류부터 알아야되는데
어떤 언어는 변수를 선언하기 위해서 int
, char
, double
... 등을 알아야 합니다.
하지만 자바스크립트의 장점이자 단점은 그런거 필요없습니다.
어떤 종류의 변수가 오던지 var
(혹은 let
, const
) 하나면 모든 값을 담을 수 있는 그릇이 준비가 되며 자바스크립트는 값을 담을 주소(메모리 공간)를 준비합니다.
var
키워드는 Variable
의 약자로 자바스크립트에서 변수 선언을 위해 사용되어 왔지만 ES6 이후 let
, const
가 나온 시점부터 사용하지 않는 것이 좋습니다. | 아래 설명// 변수 선언
var number;
let number;
const number;
이렇게 변수의 이름을 선언하면 값을 담을 수 있는 그릇이 준비가 됩니다.
이제 자바스크립트에게 변수를 사용한다는걸 알려줬으니 값을 넣어줘도 됩니다.
이것을 할당이라 하는데 선언한 변수명에 값을 넣어주는 방법입니다.
let name; // 변수 선언
name = 'js'; // 변수 할당
이제 변수에 값을 넣는 방법을 배웠으니 값의 종류에 대해서 알아보겠습니다.
값의 종류를 우리는 변수의 타입이라 말합니다.
이러한 타입은 크게 원시 타입(Primitive type)과 참조 타입(Object type)으로 나눌 수 있습니다.
원시 타입의 경우 하나의 데이터를 담고 있습니다.
원시 타입이 아닌 모든 값은 참조 타입입니다.
참조 타입은 원시 타입 데이터의 집합이라고 할 수 있습니다.
// Example
const obj = {name: 'JS', color: 'yellow'};
const arr = ['html', 'css', 'js'];
자바스크립트의 선언을 위해서 var
, let
, const
를 사용한다고 했습니다.
이들의 차이를 간단하게 알아보겠습니다.
자바스크립트의 변수 선언은 선언과 초기화 단계를 거칩니다.
그러면 변수를 선언하고 값을 할당해주지 않는다면 결과는 undefined가 나와야 합니다.
var test1;
let test2;
console.log(test1); // undefined
console.log(test2); // undefined
그런데 console.log를 이용해서 선언하기도 전에 값을 찍어보면 undefined가 나옵니다.
이것은 우리가 생각한대로 코드가 흘러가는 것에 의문을 가지게합니다.
console.log(test1); // undefined
console.log(test2); // Uncaught ReferenceError: test2 is not defined
var test1;
let test2;
let
키워드로 선언한 test2 변수를 보면 선언하지 않았기 때문에 에러가 나옵니다.
우리가 생각하는 코드는 이것이 정상이지만 var는 그렇지 않은걸 확인할 수 있습니다.
원인은 자바스크립트 Parser가 함수를 실행하기 전에 해당 함수를 확인하며
이때 함수 안에 존재하는 모든 선언문에 대한 정보를 기억한 뒤에 실행시키기 때문입니다.
우리가 생각한 자바스크립트가 코드를 읽는 순서는 위부터 순차적으로 실행되길 기대하지만 그렇지 않습니다.
다른 예를 보겠습니다.
//함수 선언문
function catName(name) {
console.log("제 고양이의 이름은 " + name + "입니다");
}
catName("호랑이");
// 결과: "제 고양이의 이름은 호랑이입니다"
//함수 선언문
catName("클로이");
function catName(name) {
console.log("제 고양이의 이름은 " + name + "입니다");
}
//결과: "제 고양이의 이름은 클로이입니다"
함수 자체보다 앞서 함수를 호출했지만 코드가 작동합니다...
하지만 let
, const
로 선언한 변수는 호이스팅 시 변수를 초기화 하지 않습니다.
let
, const
로 선언한 변수도 호이스팅에 해당됩니다. 하지만 undefined로 변수를 초기화하지는 않습니다.조금 더 자세한 내용은 var
키워드로 선언한 변수와 달리 let
, const
로 선언한 변수를 선언하기 전에 참조하지 못하는 것은 호이스팅이 발생하지 않아서 접근하지 못하는 것이 아닌, 일시적 사각지대(TDZ - Temporal Dead Zone)이라는 공간 때문입니다.
다시 var
, let
, const
의 차이를 살펴보겠습니다.
문제가 많은 키워드입니다.
특징
지역 변수
var의 문제를 해결하기 위해 ES6 이후 등장한 키워드입니다.
특징
중복 선언이 불가능하다.
블럭 레벨 스코프를 가진다.
선언과 초기화 단계가 분리되어 진행됩니다.
let
키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없습니다.var의 문제를 해결하기 위해 ES6 이후 등장한 키워드입니다.
특징
중복 선언과 재할당 또한 불가능하다.
선언과 초기화를 동시에 진행해야 한다.
블럭 레벨 스코프를 가진다.
코드를 작성하는데 정답은 없겠지만 권장은 const
입니다.
재할당이 반드시 필요한 변수만을 let 키워드를 사용하며, 그 외의 모든 키워드는 const를 사용하는 것이 잠재적인 실수를 만들지 않도록 도울것입니다.