[Javascript] - 자바스크립트 var, let, const 키워드 차이 및 사용법

#자바스크립트 var, let, const 키워드 차이 및 사용법

 

 

-자바스크립트에서 변수를 사용하려면 반드시 선언이 필요하다.

-변수를 선언할 때는 var, let, const 키워드를 사용한다.

-let, const는 ES6부터 도입되었다.

 

#var 키워드의 문제점

1. 변수 중복 선언 허용

-var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.

-초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.

-만약 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면

의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생한다.

 

#예시

var x = 1;
var y = 1;

var x = 100;
var y;

console.log(x); // 100
console.log(y); // 1

 

 

2. 함수 레벨 스코프

-var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.

-의도치 않게 전역 변수가 중복 선언되는 경우가 발생한다.

 

#예시

var x = 1;

if (true) {
  // 전역변수 중복선언
  var x = 10;
}

console.log(x); // 10

 

 

3. 변수 호이스팅

-var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼

동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다.

 

#예시

// 변수 호이스팅에 의해 이미 변수 foo는 undefined로 초기화된다.
console.log(foo); // undefined

// 할당
foo = 123;

console.log(foo); // 123

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var foo;

 

 

#let 키워드

-var 키워드의 단점을 보완하기 위해 ES6에서 새로운 키워드인 let과 const를 도입했다.

 

1. 변수 중복 선언 금지

 

#예시

var foo = 123;

var foo = 456;

let bar = 123;

// let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
let bar = 456; // SyntaxError: Identifier 'bar' has already been declared

 

 

2. 블록 레벨 스코프

-let 키워드로 선언된 변수는 블록 레벨 스코프를 따른다.

-전역에서 선언된 foo변수와 코드 블록 내에서 선언된 foo변수와 bar변수는 블록 레벨 스코프를 갖는 지역변수이다.

따라서 전역에서는 foo변수와 bar변수를 참조할 수 없다.

 

#예시

let foo = 1; // 전역 변수

{
  let foo = 2; // 지역 변수
  let bar = 3; // 지역 변수
}

console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined

 

 

3. 변수 호이스팅

-var 키워드로 선언한 변수와 달리 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

-let 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행된다.

 

#예시

console.log(foo) // ReferenceError: foo is not defined

 

 

#const 키워드

-const 키워드는 상수(constant)를 선언하기 위해 사용한다.

 

1. 선언과 초기화

-const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야한다. 그렇지 않으면 문법 에러가 발생한다.

-const 키워드는 let 키워드와 마찬가지로 블록 레벨 스코프를 가진다.

 

#예시

const foo = 1;

const foo; // SyntaxError: Missing initializer in const declaration

 

 

2. 재할당 금지

-var 또는 let 키워드로 선언한 변수는 재할당이 자유로우나 const 키워드로 선언한 변수는 재할당이 금지된다.

 

#예시

const foo = 1;

foo = 2; // TypeError: Assignment to constant variable.

 

 

3. 상수

-변수의 상대 개념인 상수는 재할당이 금지된 변수를 말한다.

 

#예시

// 일반적으로 상수는 대문자로 선언해 상수임을 명확히 나타낸다.
// 여러 단어가 조합된 경우 언더스코어(_)로 구분해서 스네이크 케이스로 표현한다.
// 세율을 의미하는 0.1은 변경할 수 없는 상수로서 사용될 값이다.
const TAX_RATE = 0.1;

// 세전 가격
let preTaxPrice = 100;

// 세후 가격
let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);

console.log(afterTaxPrice); // 100

 

 

4. const 키워드와 객체

-const 키워드로 선언된 변수에 원시 값을 할당한 경우 값을 변경할 수 없다.

하지만 const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.

 

#예시

const person = {
  name: 'Lee'
};

// 객체는 변경 가능한 값이다. 따라서 재할당 없이 변경이 가능하다.
person.name = 'Kim';

console.log(person); // {name: "Kim"}

 

 

#var vs. let vs. const

-변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다.

-const 키워드를 사용하면 의도치 않은 재할당을 방지하기 때문에 좀 더 안전하다.

#권장사항

-ES6를 사용한다면 var 키워드는 사용하지 않는다.

-재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.

-변경이 발생하지 않고 읽기 전용으로 사용하는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다.

const 키워드는 재할당을 금지하므로 var, let 키워드보다 안전하다.