[javascript] 변수의 선언 할당 초기화 / var let const 완벽 비교 정리

변수와 변수명

변수(variable)

하나의 값을 저장하기 위해 확보된 메모리 공간 자체 / 변할 수 있는 데이터

변수명

메모리 공간을 식별하기 위한 식별자

var developer;

식별자가 'developer' 인 변할 수 있는 데이터를 만든다. 

변수 선언 / 할당 / 초기화

변수 선언 : 변수를 정의하는 것을 의미한다.
var , let , const 키워드 사용(ES6 에서 let 과 const 추가)

var developer;

변수 할당 : 변수가 선언된 후 대입 연산자(=) 를 통해 값을 넣어주는 것을 의미한다.

var developer;
developer = 'espania';

변수 초기화 : 변수를 선언함과 동시에 값을 넣어 주는 것을 의미한다.

var developer = 'espania';

호이스팅 (Hoisting) 

호이스팅
변수 선언 / 함수 선언 되어진 변수 또는 함수에 대해 코드가 이동되지는 않지만 코드가 최상위로 끌어올려진 것 처럼 동작하는 현상을 말한다.

console.log(developer); //undefined 출력
var developer = 'espania';

var developer;
console.log(developer); //undefined 출력
developer = 'espania';

여기서 주의 할점은 선언 이 끌어 올려지는 것처럼 보이는 것이지 할당이 끌어 올려지는 것이 아니다.

 

//TDZ 영역이므로, reference 에러가 발생한다.
console.log(developer); 
console.log(developer2); 

let developer = 'espania';
const developer2 = 'espania2';

let 과 const 변수도 호이스팅이 되지만, 일시적 사각지대(Temporal Dead Zone) 에 빠지기 때문에 변수 할당이 되기 전에는 사용할 수 없으므로, 호이스팅이 안되는 것처럼 보인다.

스코프 (scope)

식별자(변수명, 함수명, 클래스명 등) 의 유효 범위를 의미한다.

전역 스코프(어느곳이든) 에서 사용 가능 한 변수를 전역 변수 , 지역 스코프(특정 코드 블록 if, while, try/catch 등) 에서 사용 가능 한 변수를 지역 변수 라고 한다. 

특정 코드 블록에서 사용되는 변수는 지역 스코프가 되어, 블록 레벨 스코프 라고도 한다. 다만, var 키워드로 선언된 변수는 함수의 코드 블록만을 지역 스코프로 인정하여 이를 함수 레벨 스코프라 한다.

var developer = 'espania';

if (true){
	var developer = 'coding';
}

console.log(developer) //coding 출력

if 문 안에서 사용한 var 변수는 함수 블록 내부가 아니기 때문에, 지역 스코프로 인정하지 않고 전역변수로 취급한다. 

var : 함수 스코프 (function-scoped)

let, const : 블록 스코프 (block-scoped)

var / let / const

변수	중복 선언	재 할당	호이스팅	스코프	생성 과정
var	가능	가능	가능	함수 스코프	1. 선언 및 초기화 단계 2. 할당 단계
let	불가능	가능	가능	블록 스코프	1. 선언 단계 2. 초기화 단계 3. 할당 단계
const	불가능	불가능	가능	블록 스코프	1. 선언 + 초기화 + 할당

 

따라서 var 변수는
1. 중복선언으로 인해 예기치 못한 값의 반환
2. 함수가 아닌 다른 블록 스코프에서 선언된 변수는 모두 전역 변수로 취급되어 예기치 못한 할당 
3. 선언 전에 변수를 참조하면 undefined가 될 수 있음

3가지 문제가 발생할 수 있으므로 var 변수를 사용하는 것을 지양하고 let or const 변수를 사용 할 것을 권장 한다. 만약 상수 를 사용하게 된다면 const 변수를 사용 하도록 하자