💡 변수(variable) : 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름입니다. 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 이름입니다.
자바스크립트의 변수 선언 방식은 var, let, const 세 가지 입니다.
var
변수 중복 선언 허용
var 키워드로 선언한 변수는 중복 선언이 가능합니다.
var x = 1;
var y = 2;
x = 10;
y = 20;
console.log(x); // 10
console.log(y); // 20함수 레벨 스코프
var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정합니다.
따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 됩니다.
var x = 1;
if(true) {
var x = 10;
}
console.log(x); // 10위 코드에서 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언됩니다. 이는 의도치 않게 변수값이 변경되는 부작용이 있습니다.
변수 호이스팅
var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작합니다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있습니다.
console.log(foo); // undefined
foo = 1;
console.log(foo); // 1
var foo;에러를 발생시키지는 않지만 프로그램의 흐름상 맞지 않고 가동성을 떨어뜨리고 오류를 발생시킬 여지를 남깁니다.
이러한 이유들로 인해, 의도치 않은 동작을 방지하고 코드의 안정성을 높이기 위해 일반적으로 var 대신 let이나 const를 사용하는 것이 권장됩니다.
let
var 키워드의 단점을 보완하기 위해 ES6에서 새로운 변수 let과 const를 도입했습니다.
변수 중복 선언 금지
var과 다르게 let 키워드로 변수를 중복 선언하면 문법 에러가 발생합니다.
let abc = 123;
let abc = 456; // SyntaxError블록 레벨 스코프
let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따릅니다. 아래의 코드에서 전역에서 선언된 foo 변수와 코드 블록 내에서 선언된 foo 변수는 다른 별개의 변수입니다. 또한 bar 변수도 블록 레벨 스코프를 갖는 변수입니다.
let foo = 1;
{
let foo = 2;
let bar = 3;
}
console.log(foo); // 1
console.log(bar); // ReferenceError변수 호이스팅
let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작합니다.
console.log(foo); // ReferenceError
let foo;let 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'를 따로 작성 가능합니다.
let foo;
console.log(foo); // undefined
foo = 1;
console.log(foo); // 1const
선언과 초기화
const 키워드로 선언하는 변수는 반드시 선언과 동시에 초기화해야 합니다.
const foo = 1;
const bar; // SyntaxError재할당 금지
var 키워드와 let 키워드로 선언한 변수는 재할당이 가능하지만 const 키워드로 선언한 변수는 재할당이 불가능합니다.
const foo = 1;
foo = 2; // TypeErrorconst 키워드와 객체
const 키워드로 선언된 변수에 원시 값을 할당한 경우 값을 변경할 수 없습니다. 하지만 const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있습니다.
const person = {
name: 'Kim'
};
person.name = 'Ju';
console.log(person); // {name:'Ju'}정리
변수 선언에는 기본적으로 const 키워드를 사용하고 let은 재할당이 필요한 경우에 사용하는 것이 좋습니다. const 키워드를 사용하면 의도치 않은 재할당을 방지하기 때문에 더 안전합니다.
- ES6를 사용한다면 var 키워드는 사용하지 않습니다.
- 재할당이 필요한 경우 한정 let 키워드를 사용하고 이때 변수의 스코프는 최대한 좁게 만듭니다.
- 재할당이 필요 없는 경우와 객체에는 const 키워드를 사용합니다.
✅ 참고
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types
- 모던 자바스크립트 Deep Dive
