변수 선언
변수 선언에 대해 배우면서 let과 const를 주로 쓰고, 예전에는 var를 썼었지만 요즘은 잘 안쓴다는 설명을 들었을 때는 아무 생각이 없고 그냥 그런가보다 싶었다.
let은 재할당 가능한 변수, const는 값을 변경할 수 없는 변수(상수)를 선언할 때 쓴다.
이전에는 구분없이 var를 썼으나 요즘에는 let과 const로 구분하여 사용하는 것을 권장한다.
강사님께서 var를 쓰시는 분들이 있다며 기본적으로 const로 통일하고, 변경이 꼭 필요한 예외적인 경우에만 let을 써야한다고 말씀해주셨다.
그러고보니 유튜브에 올라온 영상을 보고 공부를 하셨다는 분도 var로 연습을 하셨다고 했다.
구글링을 통해 찾아보는 코드에도 var가 사용된 경우가 많았다. 심지어 작년에 포스팅 된 글에도 var가 보였다. 대체 var는 언제부터 안쓰게 된걸까?
let과 const의 사용이 권장되는 이유
let과 const는 ECMAScript 2015(ES6)에서 도입되었다.
ECMAScript는 ECMA-262라는 기술 규격에 의해 정의된 범용 스크립트 언어이고
JavaScript는 ECMAScript의 사양을 준수하는 범용 스크립트 언어다.
여기서 스크립트 언어란 프로그래밍 언어의 한 종류로 기존에 이미 존재하는 소프트웨어를 제어하기 위한 용도로 사용되며, Javascript, JSP, PHP, Python, Ruby 등이 스크립트 언어에 해당한다.
let과 const의 사용이 권장되는 이유가 몇 가지 있다.
첫 번째, 스코프(유효 범위)
var는 함수 스코프 function scope로 블록 스코프 block scope가 아니다.
반면 let과 const는 블록 스코프를 가지기 때문에 변수가 정의된 블록 안에서만 유효하다.
이는 코드의 가독성을 높이고, 변수의 유효범위를 명확하게 한다.
두 번째, 재할당
let은 재할당이 가능한 변수를 선언할 때 사용한다.
const는 상수를 선언할 때 사용되며, 선언 후 재할당이 불가능하다. 이를 사용하면 의도치 않은 재할당을 방지할 수 있다.
var는 재할당도 되고, 호이스팅(hoisting) 특성으로 인해 변수가 예상치 못한 동작을 할 수 있다.
JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻한다.
즉, 나중에 선언된 변수를 참조할 수 있다.
호이스팅으로 끌어올려진 변수(var)는 초기값으로 undefined 값을 반환한다. 이는 변수를 선언 및 초기화(초기값 할당) 했더라도 호이스팅은 변수 선언만 끌어올려지기 때문이다.
let과 const도 호이스팅이 되지만, var와 다르게 초기화 전에 접근할 수 없도록 설계되었다.
let과 const에는 일시적 사각지대(Temporal Dead Zone) 란 개념이 적용되었는데 이는 "변수가 선언된 시점부터 초기화되기 전까지"의 구간을 말하며, 변수에 접근이 불가능해진다.
console.log(a); // undefined (var는 호이스팅 되어 초기화 전에도 접근 가능)
var a = 1;
console.log(b); // ReferenceError: b is not defined (let은 초기화 전 접근 불가)
let b = 2;
console.log(c); // ReferenceError: c is not defined (const도 초기화 전 접근 불가)
const c = 3;세 번째, 가독성
const를 사용하면 해당 변수가 변경되지 않을 것이라는 명확한 의도를 전달할 수 있다.
이는 코드 유지보수에 도움이 된다.
결론
모던 자바스크립트에 대한 정의는 시대에 따라 변모한다고 한다. 오늘날 모던 자바스크립트는 ECMAScript 2015(ES6)와 그 이후 업데이트된 기능을 의미한다.
let과 const를 비롯한 화살표 함수, 템플릿 리터럴, 모듈 시스템 등이 이에 대한 대표적인 특징이라고 한다.
그러니 이 글의 결론은 가르쳐주신대로 "let과 const를 쓰자" 이다.
강사님의 피드백을 확인하고 작성하고 있던 내 코드를 다시 들여다봤다. 생각해보니 변수를 선언하면서 재할당 여부를 고민하지 않았던 것 같다.
반성 겸 지금 내 코드 기준으로 메모를 해두어야겠다.
- DOM요소 참조 시 DOM 요소 자체를 변경할 필요가 없으므로 const로 선언하는것이 더 좋다.
- 갱신되는 값의 경우, 함수가 호출될때마다 새로운 값으로 재할당하기 때문에 let으로 선언하는게 맞다.
개념을 배우는 것과 실제 개발을 하면서 -해야할 고민을 하면서- 적용하는건 다른 일이라는걸 새삼 깨닫게 되었다.
열심히 배우자.
