개인적으로 공부하면서 블로그를 작성하고 있으므로 내용이 정확하지 않을 수 있습니다.
잘못된 부분은 지적해주시면 개발자로서 성장하는데 많은 도움이 될 것 같습니다. 😀
ES5까지 변수를 선언할 수 있는 방법은 var 키워드를 사용하는 것이다. ES6부터 let, const가 도입되었고 var 키워드보다 안전하게 사용할 수 있어서 현재는 대부분 let, const 키워드를 사용하여 코드가 작성되고 있다.
var
var 키워드는 아래와 같은 특징이 존재한다.
함수 레벨 스코프
함수 내에서 선언한 변수는 함수 내에서만 유효하고 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
변수 중복 선언 가능
자바스크립트는 var 키워드로 같은 이름을 가진 변수를 중복해서 선언할 수 있다. 같은 이름의 변수를 선언한지 모르고 재선언하면 코드가 의도한 방향과 다르게 동작할 수 있고 복잡성도 상당히 증가하므로 주의해야 한다.
변수 호이스팅
변수 호이스팅은 변수를 선언하기 이전에 변수 참조가 가능한 상황을 말한다. 호이스팅이 왜 일어나는지 간단하게 설명하기 위해서 아래 실행 컨텍스트에 변수가 등록되는 과정을 간략하게 설명한다.
- 함수가 호출되면 엔진은 실행 컨텍스트를 생성한다.
- 실행 컨텍스트를 생성할 때 엔진은 함수 내부의 변수 선언문들을 실행 컨텍스트에 등록하고
undefined로 초기화한다. - 코드가 한 줄씩 실행되면서 변수 선언문을 만나면 실행 컨텍스트에
undefined로 초기화가 되어있던 변수에 값을 할당한다.
자바스크립트의 실행 컨텍스트를 이해하고 있다면 선언문 위에서 어떻게 변수 참조가 가능한지 확실하게 이해할 수 있다.
console.log(val); // val변수가 undefined로 초기화가 되어있는 상태
var val = 'val'; // val변수에 값 할당
console.log(val); // val변수에 값이 할당되었으므로 'val' 출력선언문 위에서 val 변수를 만났을 때 실행 컨텍스트의 내부의 val 변수는 undefined로 초기화가 되어있기 때문에 에러가 발생하지 않고 undefined가 출력되는 것을 확인할 수 있다.
let
블록 레벨 스코프
모든 코드 블록(for, while 등)의 내부에 선언된 변수는 코드 블록 내에서만 유효하다. 따라서 코드 블록 외부에서는 참조할 수 없다.
변수 중복 선언 불가능
var 키워드는 동일한 이름을 갖는 변수를 중복해서 선언이 가능하지만, let 키워드는 유효 범위 내에서 동일한 이름을 갖는 변수를 선언할 수 없다.
변수 호이스팅 불가능
var 키워드로 선언된 변수와 다르게 let 키워드로 선언된 변수는 선언문 이전에 참조가 불가능하다.
- 함수가 호출되면 엔진은 실행 컨텍스트를 생성한다.
- 실행 컨텍스트를 생성할 때 엔진은 함수 내부의 변수 선언문들을 실행 컨텍스트에 등록한다.
- 코드가 한 줄씩 실행되면서 변수 선언문을 만나면
undefined로 값을 초기화하고 값이 존재하면 값을 할당한다.
var 키워드는 엔진이 변수 등록과 초기화 과정을 같이 진행했다면 let 키워드는 등록 과정만 거치기 때문에 메모리에 값이 없는 상태이고, 코드가 실행되면서 선언문을 만났을 때 초기화 과정을 진행한다. 따라서 선언문 이전에 참조를 시도하면 에러가 발생한다.
값 재할당 가능
유효한 범위 내에서 변수 중복 선언은 불가능하지만 값 재할당은 가능하다.
const
const의 특징은 let과 대부분 동일하므로 다른 부분만 설명한다.
값 재할당 불가능
const는 반드시 선언과 동시에 할당이 이루어져야 하며 값 재할당이 불가능하다.
✅정리
변수 선언은 기본적으로 const를 사용하고 재할당이 필요한 경우에 let을 사용해서 재할당을 방지하는 것이 보다 안전하다.
