JavaScript에는 변수 선언 방식인 var,let,const가 있다.
변수와 선언
변수(variable)는 어떤 값을 저장하기 위해 확보한 메모리의 공간 또는 그 공간을 식별하기 위한 이름이다.
JavaScript언어로는 개발자가 직접 메모리를 제어할 수 없다. 따라서 변수를 통해서 값에 접근할 수 있다.
어떤 변수명 'A'가 있다고 하면, 이 'A'는 변수의 값이 아니라 메모리의 주소를 기억하고 있다. 변수를 사용할 때 변수명을 호출하면서 메모리 주소를 통해서 주소에 저장된 값을 반환하는 방식이다.
이렇게 변수('A')에 값을 저장하는 것을 할당(assingment)라고 하고 변수에 저장된 값을 읽어들이는 것은 참조(reference)라고 한다. 변수명 사용을 위해 자바스크립트에게 알리는 것을 선언(declaration)이라고 한다.
변수의 선언
변수의 선언은 var,let,const로 할 수 있고, 처음에는 var만 있었으나 이후 let,const가 추가되었다.
변수는 선언 > 초기화 단계를 거치게되며, 초기화 단계에서는 값 저장을 위한 메모리 공간을 확보하고 undefined를 할당한다.
변수의 호이스팅(hoisting)
일반적으로는 변수를 선언하고 변수를 사용한다.
하지만 변수를 먼저 console로 찍고 선언문을 작성해도 undefined를 반환한다.
변수 선언이 런타임에서 되는 것이 아니라 이전 단계에서 먼저 실행되기 때문이다.
즉, JavaScript는 소스코드를 한 줄씩 순차적으로 실행하기 전에 변수 선언을 포함한 모든 선언문을 찾아내 먼저 실행한다.
이렇게 다른코드보다 선언문이 먼저 실행되는 것을 호이스팅(hoisting)이라 한다.
var, let, const, function, function*, class 키워드를 사용하여 선언한 식별자는 모두 호이스팅 된다.
스코프
스코프(scope)는 식별자의 유효범위로, 선언된 위치에 따라 달라진다.
전역에 선언된 변수는 전역스코프, 지역에 선언된 변수는 지역스코프를 갖는다.
전역 변수는 어디서나 참조가 가능한 반면, 지역 변수는 함수 내부에서 참조가 가능하다.
Javascript의 모든 코드블록(if, for, while, try/catch 등)은 지역 스코프를 만든다.(블록 레벨 스코프) 하지만 var로 선언된 변수는 오로지 함수의 코드블록만을 지역스코프로 인정한다.(함수 레벨 스코프)
즉, 함수가 아닌 곳에서 var로 선언하면 전역 변수로 취급되고, 이로 인해 변수가 중복 선언되어 변수의 할당값이 바뀔 수 있다.
var, let, const
이처럼 var는 크게 세가지의 문제가 있다.
1. 변수 중복 선언이 가능
2. 함수 레벨 스코프, 함수 외부의 선언은 모두 전역 변수
3. 변수 선언문 이전에 변수를 참조하면 undefined를 반환
이후 나온 let,const는 이러한 문제점을 해결했다.
1. 변수 중복 선언 불가
let: 변수 중복 선언 불가, 재할당 가능const: 변수 중복 선언 불가, 재할당 불가능
선언과 초기화를 동시에 진행해야 한다.
2. 블록 레벨 스코프
let,const 모두 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.
3. 변수 호이스팅
let: 선언 단계와 초기화 단계가 분리되어 진행된다.
런타임 이전에 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하는 것은 참조 에러가 발생한다.
let으로 선언한 변수는 스코프의 시작부터 초기화 단계까지 변수를 참조할 수 없는 일시적 사각지대(Temporal Dead Zone:TDZ)구간에 존재한다.const: 선언 단계와 초기화 단계가 동시에 진행된다.
동시에 이뤄지지만 런타임 이전에는 실행될 수 없다. 따라서 초기화가 되지 않은 상태로 접근 불가 에러가 발생한다.
*참고
기본적으로 변수의 스코프는 최대한 좁은 것이 좋다.
따라서 var보다는 let,const의 사용이 권장된다
또한 변경하지 않는 값이라면 let보다 const사용이 안전하다.
