변수의 특징
1. 변수 선언 키워드
자바스크립트에서 변수를 선언할 때는 var
, let
, const
라는 세 가지 키워드를 사용할 수 있습니다. 선언된 키워드에 따라서 변수의 특성이 달라지며, 이러한 특성은 변수를 어떻게 다룰지를 결정합니다.
1.1 var
var
는 ES6(ES2015) 이전에 사용되던 변수 선언 키워드입니다. var
로 선언한 변수는 다시 변수를 선언하는 재선언과 새로운 값을 할당하는 재할당이 가능합니다.
재선언과 재할당이 가능하기 때문에 var
로 선언한 변수는 값을 예측하기 어려워 코드의 가독성이 떨어질 수 있습니다.
1.2 let
let
은 ES6에 도입된 변수 선언 키워드로, var
의 단점을 보완하기 위해 만들어졌습니다. let
으로 선언한 변수는 재할당 은 가능하지만, 재선언 은 불가능합니다.
1.3 const
const
도 ES6에 도입된 변수 선언 키워드로, 재선언과 재할당이 불가한 변수를 선언할 때 사용합니다.
const
로 선언한 변수는 재할당이 불가하기 때문에 선언과 함께 값을 할당해주어야 합니다. 만약 값을 할당하지 않으면 에러가 발생합니다.
2. 키워드 선택하기
ES6(2015) 이후에는 var
보다는 let
과 const
를 사용합니다. 그 중에서도 const
를 사용하는 것을 보다 권장합니다. 그 이유는 다음과 같습니다.
-
의도하지 않은 값의 변경 방지
const
를 사용하면 변수의 값이 한 번 할당되면 재할당 될 수 없습니다. 따라서 의도하지 않은 값의 변경을 방지할 수 있습니다. 이것은 코드의 예측 가능성을 높이며, 따라서 에러가 발생되는 상황(버그)을 줄일 수 있습니다. -
가독성 향상
const
를 사용하면 다른 개발자들이 변수의 값이 변경될 가능성이 없다는 것을 빠르게 인지할 수 있으며, 반드시 초기화를 해야하기 때문에 어떤 데이터가 사용되는지 초기에 확인 할 수 있습니다. 이것은 코드의 가독성(잘 읽히는 것)을 높이고 유지 보수성(누군가 수정을 잘 할 수 있게 하는 것)을 향상시킵니다.
그러나 변수의 가리키는 값이 반드시 변경되어야 하는 경우에는 let
을 사용해야 합니다. 예를 들어 산술 연산과 같은 연산자로 값이 변경이 되어야 할 때에는 let
을 사용해야 합니다. 따라서 const
와 let
을 적절하게 사용하여 코드를 작성하는 것이 중요합니다.
저는 강의할 때 이렇게 말합니다.
const
로 선언하고 문제 생기면let
으로 변경하세요!
3. 스코프와 호이스팅
3.1 스코프
스코프(scope)는 변수의 유효 범위를 의미합니다. 즉, 변수가 접근 가능한 범위를 정의합니다. 자바스크립트에서는 다음과 같은 스코프 유형이 있습니다.
- 전역 스코프(Global): 코드 어느 곳에서나 접근할 수 있는 변수
- 함수 스코프(Function): 함수 내에서만 접근할 수 있는 변수
- 블록 스코프(Block): 블록 내에서만 접근할 수 있는 변수
전역 스코프
코드 어디서든 접근할 수 있는 변수를 전역 스코프라고 합니다. 전역 스코프로 선언된 변수는 어디서든 접근할 수 있습니다.
함수 스코프
var
키워드로 선언한 변수는 함수 스코프를 가집니다. 함수 스코프는 함수 내에서만 접근할 수 있는 변수를 의미합니다. 함수 스코프는 함수가 호출될 때 생성되며, 함수가 종료되면 사라집니다. 함수 내에서 선언된 변수는 함수 외부에서는 접근할 수 없습니다.
블록 스코프
let
과 const
로 선언된 변수는 블록 스코프를 가집니다. 블록 스코프는 중괄호({}
)로 둘러싸인 범위 내에서만 접근할 수 있습니다. 블록 스코프는 let
과 const
로 선언된 변수가 블록 내에서만 유효하다는 것을 의미합니다.
var
로 선언한 변수는 블록 스코프를 가지지 않기 때문에 블록 외부에서도 접근할 수 있습니다. 따라서 코드가 복잡해질 경우 변수의 값이 예측하기 어려워질 수 있습니다.
블록은 무엇인가요?
블록(Block)은 중괄호({}
)로 둘러싸인 코드의 집합을 의미합니다. 블록은 자바스크립트 문법에서 코드의 범위를 정의하는데 사용됩니다. 블록은 조건문, 반복문, 함수 등에서 사용됩니다.
3.2 호이스팅

호이스팅(Hoisting)은 자바스크립트의 변수 선언이 스코프의 최상단으로 끌어올려지는 현상을 의미합니다. 즉, 변수를 선언하기 전에 사용할 수 있는 것처럼 보이는 현상입니다. 이러한 현상이 발생하는 이유는 코드가 실행되기 전 자바스크립트 엔진이 선언을 먼저 처리하기 때문입니다.
var의 호이스팅
var
로 선언된 변수는 선언이 호이스팅 되었을 때, undefined
로 초기화됩니다. 따라서 변수를 선언하기 전에 참조해도 오류가 발생하지 않습니다.
위 코드는 내부적으로 다음과 같이 동작합니다.
하지만 호이스팅은 코드의 가독성을 떨어뜨릴 수 있습니다.
let과 const의 호이스팅
let
과 const
로 선언된 변수는 호이스팅이 발생하지만, 초기화가 이루어지기 전까지는 참조할 수 없습니다. 따라서 변수를 선언하기 전에 참조하면 ReferenceError
가 발생합니다. 초기화가 이루어지기 전까지는 변수에 접근할 수 없으며, 이를 일시적 사각지대(Temporal Dead Zone) 라고 합니다.
let과 const는 TDZ를 통해 코드의 가독성을 높이고, 의도하지 않은 결과를 방지할 수 있습니다.