키워드 var, let, const 차이점

키워드 var, let, const 차이점

 

 

1. 변수의 유효 범위

 

함수 레벨 스코프(Function-level Scope)

• 함수의 코드 블럭만을 스코프로 인정

• 전역 함수 외부에서 생성한 변수는 모두 전역 변수

• for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조 가능

 

블럭 레벨 스코프 (Block-level Scope)

• 모든 코드 블럭(function, if, for, while, try/catch 등) 내에서 선언된 변수는 코드 블럭 내에서만 유효

• 블럭 외부에서는 참조 못함

• 코드 블럭 내부에서 선언한 변수는 지역 변수

 

키워드 VAR 

• ES6 이전에 사용하던 변수

• 함수 레벨 스코프(Function-level Scope)

 

키워드 LET

• ES6 이후에 나온 변수

• 블럭 레벨 스코프(Block-level Scope)

 

키워드 CONST

• ES6 이후에 나온 변수

• 블럭 레벨 스코프(Block-level Scope)

 

 

예제 - var 키워드 유효 범위

var fruit = 'apple';

if(fruit === 'apple') {
    var result = true;
} else {
    var result = false;
}

console.log(result); // true

 

예제 - let/const 키워드 유효 범위

var fruit = 'apple';

if(fruit === 'apple') {
    const result = true;
} else {
    const result = false;
}

console.log(result); // result is not defiend

 

 

 

2. 변수 선언 방식

 

예제 - 변수 재선언

• var 키워드 재선언 O

• let / cont 키워드 재선언 X

• const 키워드 경우 선언과 동시 초기화 필요

// var 키워드 재선언 허용 O
var value = 1;
var value = 2;  

// let 키워드 재선언 허용 X
let value = 1;
let value = 2;    // ERROR

// Const 키워드 재선언 허용 X
const value = 1;
const value = 2;  // ERROR

// Const 키워드 선언과 동시 초기화 필요
const value;      //  Missing initializer in const declaration
value = 1; 

 

예제 - 변수 재할당

• var 키워드 재할당 O

• let 키워드 재할당 O

• const 키워드 재할당 X

// var 키워드 재할당 허용 O
var value = 1;
value = 2;

// let 키워드 재할당 허용 O
let value = 1;
value = 2;

// const 키워드 재할당 허용 X
const value = 1;
value = 2;        // ERROR

 

 

 

3. 호이스팅

 

호이스팅(Hoisting)

• 변수 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성

• 변수 생성 시 선언 / 초기화 / 할당 의 단계를 가짐

• 실행컨텍스트의 Scope에 변수를 등록 / 변수를 위한 공간을 확보(메모리를 할당) / 변수를 undefined로 초기화

• var 키워드로 변수 생성 시, 선언 / 초기화 단계가 동시에 이루어짐

• let / const 키워드 변수 생성 시, 선언 / 초기화 단계가 분리되어 진행

 

예제)

console.log(fruit); // undefined
var fruit = 'apple';

console.log(animal); // Cannot access 'animal' before initialization
let animal = 'tiger';

console.log(human);  // Cannot access 'human' before initialization
const human = 'Lee';  

 

예제 - 호이스팅 var 의 문제점

var value = 1;

function test() {
    console.log(value);
    var value = 2;
    console.log(value);
}
test();

-- 출력 결과 --
undefined
2