[JavaScript] 변수 선언 var, let, const 정리

JavaScript에 존재하는 변수 선언 키워드는 var, let, const 3가지 종류가 존재

키워드	범위-변수 접근 가능 범위	재선언	재할당
var	함수 범위 (function scope)	O	O
let	블록 범위 (block scope)	X	O
const	블록 범위 (block scope), 상수	X	X

 

ES6 이후에는 var로는 변수를 선언하지 않는 것을 권장한다고 한다. 

이는 함수 범위 변수가 여러 에러를 발생 시킬 수 있기 때문

 

함수 범위 vs 블록 범위

var로 선언된 변수는 함수 안에서만 유효하기 때문에 블록 (중괄호로 묶인 코드) 내부에서 선언하더라도 함수 전체에서 접근 가능

// 함수 범위 변수 var 예시
function test(){
	if (true){
    	var x = 10;
    }
    console.log(x); // if 블록 바깥에서도 접근 가능
}

test();
// console.log(x) error! 함수 밖에서는 x 변수에 접근 불가능

 

let, const 로 선언된 변수는 선언된 블록 (중괄호로 묶은 코드) 내부에서만 접근이 가능

// 블록범위 변수 예시
function test(){
	if (true){
    	let y = 20;
        const z = 30;
    }
    
    // console.log(y); error! y, z는 블록 범위 변수로 선언된 if 블록 내부에서만 접근이 가능하다. 
    // console.log(z);
}

 

함수 범위의 변수는 블록 범위의 변수보다 휠씬 에러를 일으키기 쉬운데, 이는 함수 범위의 변수가 적용되는 범위가 넓기 때문에 휠씬 더 십게 덮여써지기 때문이라고 한다. 평소에도 많이 쓰이는 이중 for 문의 예시를 보면

my_list = [
	[1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]

for (var i=0;i<my_list.length;i++){
	var line = my_list[i];
    for (var i=0;i<line.length;i++){
    	var element = line[i];
        console.log(element);
    }
}

// 출력 => 1, 2, 3 만 출력됨

 

코드의 의도는 이중 리스트에 있는 모든 원소를 출력하는 것이었겠지만, var의 사용으로 인해 i 변수가 덮여쓰여 첫번째 리스트의 원소만 출력된다. 이를 let과 const를 사용하여 고친다면, 

for (let i=0;i<my_list.length;i++){
	const line = my_list[i];
    for (let i=0;i<line.length;i++){
    	const element = line[i];
        console.log(element);
    }
}

// 출력 => 1, 2, 3, 4, 5, 6, 7, 8, 9

 

let을 사용하면 똑같은 이름인 i를 사용하더라도, 해당 {} 안에서만 정의되는 것이므로, 밖에서 정의되는 i에 덮여쓰이지 않는다. 

 

변수 선언 키워드 - const

const를 통해 변수를 정의하게 되면 상수 취급하게 되어 다른 값으로 재할당이 불가능하다. 

이러한 특성 때문에 처음 선언할 때, 반드시 값을 할당하여야한다. 

const num = 10;
// num = 30 값 재할당 불가능

// const num2;
// num2 = 10; 일단 선언 이후 값 할당도 불가능

변수 선언 키워드 - let

변수의 값이 여러 번 변경되는 경우 let 키워드를 사용한다. 

처음 선언할 때, 반드시 값을 할당하지 않아도 되며, 할당하지 않는다면 'undefined' 가 들어간다. 

let num;
console.log(num); // undefined

num = 10;
console.log(num); // 일단 선언하고 할당 가능