자바스크립트와 변수선언
처음 자바스크립트를 접한 곳은 바울랩 컴퓨터학원의 웹 풀스택 개발반이었다. 그 때의 나는 자바스크립트라는 것이, 아니 HTML과 CSS가 정확히 어떻게 다른지 조차 정확히 분간하지 못했다. 그리고 학원에서 가르치는 방식에 따라 변수를 선언하는데 var(variable) 이외의 것을 사용해볼 생각을 못했다. 그러나 놀랍게도, 정확히 반대로 왠만하면 const와 let만 쓰라는 말을 듣고 살고 있다. 왜 우리는 var로 시작해서 const(constant)와 let으로 흘러온 것일까?
var
ES5까지의 자바스크립트에서는 var이라는 한 가지의 예약어만 사용이 가능했다. 때문에 처음 배우는 예약어가 var인 것은 상당히 자연스럽다. var의 특징은 아래와 같다.
- 변수를 중복 선언하여 갱신할 수 있다.
- 함수레벨 스코프를 지역스코프로 인식한다.
- 변수의 최초 선언 이전에 변수를 참조하면 undefined를 반환한다.
견습 단계에서 위의 세 가지 특징은 큰 문제가 없으나, 프로젝트의 규모가 커질 수록 모든 코드를 이해하기 어렵다. 각 특징에 대하여 어떤 문제가 발생하며, let과 const가 이를 보완하는지 살펴보자.
1 - 변수의 중복 선언
변수가 중복 선언이 가능하다는 뜻은 위에서 선언한 변수명을 활용해서, 변수선언을 다시 진행해도 아무런 제지가 없다는 뜻이다. 의도에 맞춰 위의 값을 임의로 배제한다면 의미가 있겠지만, 위에서 선언된 줄 모르고 다른 값으로 덮어쓰는 문제가 발생하기 쉽다. 특히, 여러 사람이 함께 작성한 코드에서 변수명이 충돌하더라도, 확인할 수 없다. 이를 피하려면 변수를 선언할 때마다 ctrl + F를 눌러 해당 변수명이 이미 쓰이고 있는지를 확인해야 할 것이다.
-
let : let은 변수의 중복선언은 막은 채로, 재할당은 가능케 했다. var을 활용해서 다시 선언하는 상황을 let의 재할당으로 대체할 수는 있되, 재할당과 재선언의 형태가 명확히 다르므로 의도를 갖고 코드를 작성케 한 것이다.
-
const : const는 중복선언과 재할당을 둘다 허용하지 않는 예약어다. 상수를 의미하는 constant에 어울리는 직관적인 특징이다. 다만 const로 선언한 객체의 key값이 가리키는 value는 재할당이 가능하다.
2 - 지역스코프
자바스크립트에서 선언한 변수는 동작하는 범위가 다를 수 있다. 일반적으로 특정 구문이나 함수와 같은 블록에 포함되지 않는 범위에서 선언된 변수를 전역변수라고 하며, 해당 스크립트 어디서든 참조가 가능하다. 특정 블록의 범위에서 선언하여, 해당 범위에서만 참조가 가능한 변수가 있는데 이를 지역변수라고 한다. 함수에 지역변수 개념이 적용되지 않았다면, 함수를 작성할 때 매번 스크립트의 변수와 비교를 해야하며, 함수의 재사용성이 크게 떨어졌을 것이다.
문제는 var이 함수에 대해서만 지역스코프를 가진다는 것이다. var로 선언한 변수는 if, for, while과 같은 블록에서 변수를 갱신하면 전역으로 값이 변경된다.
- let과 const : 두 예약어로 선언한 변수는 모든 블록에 대해 지역스코프를 갖는다. 블록 범위에서 코드를 작성할 때의 피로도와 에러를 줄일 수 있다.
3 - 변수 호이스팅
자바스크립트의 변수는 호이스팅된다. 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언하기 전에 할당하는 동작을 말한다. var로 선언한 변수는 호이스팅되어, undefined로 초기화 된다. 따라서 선언문 이전에 조회하면 undefined값이 반환된다.
만약 var의 boolean 값이 false일 때 작동하는 코드가 있는 경우 var의 선언 위치와 상관 없이 코드가 동작할 수도 있는 것이다. 이런 경우에는 어디서 에러가 났는지 찾기 점점 어려워진다.
- let과 const : 두 예약어로 선언한 변수는 호이스팅 시 선언만 이루어지며, 변수가 초기화되지 않는다. 따라서 선언문 이전에 변수를 조회하면 예외가 발생한다.
마무리
뭐 하나 대충 만든게 없구나
