자바스크립트(Javascript) 변수 기본

var, let, const

 

var: 함수 범위 변수를 선언하는 데 사용됩니다.

let: 블록 범위 변수를 선언하는 데 사용됩니다. 변수 값을 변경할 수 있습니다. 

const: 블록 범위 변수를 선언하며, 한 번 할당한 값을 다시 할당할 수 없습니다.

 

var(ES5 이전 버전에서 주로 사용)는 변수 재 선언이 가능합니다.

var name = 'Minjun';
console.log(name); // Minjun

var name = 'Seoyeon';
console.log(name); // Seoyeon

 

let는 변수 재 선언시 에러가 발생합니다.

let name = 'Minjun';
console.log(name);

let name = 'Seoyeon';
console.log(name);

/**
Chrome Error
VM62:4 Uncaught SyntaxError: Identifier 'name' has already been declared
VM62:4 Uncatched SyntaxError: 식별자 'name'이(가) 이미 선언되었습니다

Visual Studio Error
Cannot redeclare block-scoped variable 'name'.
블록 범위 변수 'name'을(를) 재정의할 수 없습니다.
*/

 

var는 선언하기 전에 사용 가능 합니다.

console.log(name); // undefined
var name = 'Minjun';

var는 최상위에 있는것처럼 동작합니다. 이를 호이스팅(Hoisting) 이라고 합니다.

선언에만 호이스팅이 일어나기 때문에 값을 할당해도 undefined가 반환됩니다.

 

let는선언하기 전에 사용할 수 없습니다.

console.log(name);
let name = 'Minjun';

/**
Chrome Error
Uncaught ReferenceError: name is not defined
Uncatched ReferenceError: 이름이 정의되지 않았습니다

Visual Studio HTML Error
Uncaught ReferenceError: Cannot access 'name' before initialization
Uncaught ReferenceError: 초기화 전에 'name'에 접근할 수 없습니다
*/

 

var, let, const 모두 호이스팅 되지만 TDZ(Temporal Dead Zone) 영역때문에 그렇습니다.

console.log(name);   // Temporal Dead Zone
let name = 'Minjun'; // 선언 및 할당
console.log(name);   // 사용

할당 전에는 사용할 수 없습니다

 

var : 선언 및 undefined로 초기화가 동시에 진행 됩니다.

let : 선언과 초기화가 분리되어 진행됩니다.

const : 선언과 할당이 동시에 진행 됩니다. 값을 변경할 수 없습니다.

 

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

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

 

// 함수안에서 선언된 변수는 외부에서 var, let, const 셋다 사용 불가능
// 함수외의 if, for, while, try/catch는 외부에서 var는 사용 가능 let, const는 사용 불가능

//* 함수 */
function hello() {
    // Block
    var name = 'Minjun';
    let age = 20;
    const gender = 'male';
}
hello();
console.log(name);   // 빈값
console.log(age);    // age is not defined
console.log(gender); // gender is not defined

//* if문 */
if(true) {
    var name = 'Seoyeon';
    let age = 20;
    const gender = 'female';
}
console.log(name);   // Seoyeon
console.log(age);    // age is not defined
console.log(gender); // gender is not defined

//* for문 */
for(let i=0; i<10; i++) {
    var name = 'Minjun';
    let age = 20;
    const gender = 'male';
}
console.log(name);   // Minjun
console.log(age);    // age is not defined
console.log(gender); // gender is not defined

//* while문 */
while (true) {
    var name = 'Seoyeon';
    let age = 20;
    const gender = 'female';
    break;
}
console.log(name);   // Seoyeon
console.log(age);    // age is not defined
console.log(gender); // gender is not defined

//* try/catch */
try {
    var name = 'Minjun';
    let age = 20;
    const gender = 'male';
} catch (e) {
    console.error(e);
}
console.log(name);   // Minjun
console.log(age);    // age is not defined
console.log(gender); // gender is not defined

ES6 이상의 환경이라면 var는 거의 사용하지 않고 let, const의 사용이 권장 됩니다.

변수의 재할당이 필요한 경우라면 let를 사용 그외의 경우에는 const를 사용한다고 보면 됩니다.