자바스크립트에는 변수를 선언하는 키워드
var,let,const가 존재한다. 3가지 키워드의 차이는 무엇일까? 개념을 정확히 이해하기 위해 자바스크립트에서 변수의 의미와 변수를 선언, 할당하는 과정, 그리고 스코프에 대해 알아보자.
변수(Variable)
자바스크립트에서의 변수란 무엇일까? 변수란 값을 저장할 수 있는 메모리 공간 자체를 뜻한다.
let Variable = 07;
console.log(Variable);//output: 07위와 같은 코드에서
let은 변수를 선언하는 키워드를 뜻한다.Variable은 변수명으로, 변수의 값07이 아니라07이 저장되는 메모리의 주소를 기억하고 있다.07은 변수명Variable이 기억하는 메무리 주소를 통해 저장된 값이다.- 변수를 호출하면 저장된 메모리 주소를 통해 값을 출력한다.
변수의 선언
변수의 선언은 선언과 초기화 단계를 거친다. 선언(Declaration) 단계에서 let Varaible과 같이 자바스크립트에 변수명을 등록하고 변수의 존재를 알리며, 초기화단계에서 이 변수의 값을 저장하기 위한 메모리 공간을 확보하고 Default값을 undefined로 할당해 초기화한다.
// var와 let 선언단계 실행, var 초기화 단계 실행
console.log(lim); // undefined
var lim;
console.log(lim); // Reference Error
let lim; // let 초기화 단계 실행이 때 변수 선언문의 위치와 상관없이 제일 위로 끌어올리는 호이스팅(hoisting) 특징때문에 let 선언문 이전에 변수를 참조하면 Reference Error가 발생한다.
var의 경우 선언단계와 초기화단계가 동시에 진행되어lim에 undefined를 할당해준다.let의 경우 선언단계와 초기화 단계가 분리되어 진행되어 선언은 호이스팅되어 먼저 실행되고,let lim;의 변수 선언문에서 초기화 단계가 실행되기 때문에 일시적 사각지대(Temporal Dead Zone)로 인해 오류가 발생한다.const의 경우 선언과 초기화가 동시에 진행되어야 하기 때문에 선언문 이전에 실행될 수 없다.
-var는 변수의 중복선언이 가능하지만 let과 const는 중복선언이 불가능하다.
변수 할당
console.log(lim); // undefined
var lim = 30; // 할당 단계
console.log(lim); // output: 30
console.log(lim); // Reference Error
let lim = 30; // 초기화, 할당 단계
console.log(lim); // output: 30
let lim = 31; // 재할당
console.log(lim); // output: 31변수 선언은 호이스팅 되어 선언문 이전에 실행되지만, 값의 할당은 코드가 순차적으로 실행되는 런타임에 실행되기 때문에 변수의 할당과 console을 실행하는 위치에 따라 출력되는 값이 다르다.
var,let은 변수 재할당이 가능하지만const는 변수 재할당이 불가능하다.
스코프(Scope)
스코프란 변수명, 함수명등 식별자(Identifier)에 접근, 참조할 수 있는 범위를 뜻한다.
- 전역 스코프(Global Scope)는 전역에 선언되어 어디서든 참조 가능하다는 의미
- 지역 스코프(Local Scope)는 해당 지역에만 접근할 수 있어 지역을 벗어난 곳에서는 접근할 수 없다는 의미
예를들어 자바 스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하고, 함수 내에 선언된 변수는 해당 함수 내에서만 접근할 수 있다. 이것을 함수 스코프(function-level scope)라 한다.
자바스크립트에서 함수가 아닌 모든 코드 블록({ })이 지역 스코프를 만들어 이를 블록 스코프(Block-level Scope)라고 한다.
var lim = 30;
if (true) {
var lim = 40
}
console.log(lim) // output: 40
let lim = 30
if (true) {
let lim = 40
}
console.log(lim) // output: 30var는 함수 스코프로서 함수 외부에서 선언한 변수는 전역변수로 작용한다.let과const는 함수 코드 블록만 지역스코프로 인정하는var과 달리 블록 레벨 스코프를 지원한다.
위 코드와 같이 var이 함수 외부에서 선언되었기에 전역 변수 취급되었고, 기존의 변수 lim가 중복 선언되어 출력값이 40으로 바뀌었다. 그러나 let은 if 블록에서 선언된 변수 lim은 if 블록내에서만 유효하게 처리되어 값이 변하지 않고 30으로 출력됨을 알 수 있다.
