[Javascript] 자바스크립트 var / let / const 정리

자바스크립트에서 변수 선언할 때 var, let, const 이 세 가지 중 하나를 쓰게 된다.

각 변수마다 어떤 특징이 있는지 알아보자.

 

var 란?

var의 특징으로는 중복 선언이 가능하다 / 언제든 값을 바꿀 수 있다.

var로 변수를 선언하면 너무 자유롭다 보니 실수로 변수 덮어쓰기 생기면 디버깅이 힘들어 지는 단점이 있다.

이를 보완하기 위해 ES6 부터 추가된 변수선언 방식이 let 과 const 이다.

// 1. var 선언 방식
var fruit = 'apple';
console.log(fruit); // apple

var fruit = 'banana';
console.log(fruit); // banana

fruit = 'cherry';
console.log(fruit); // cherry


// 2. var 호이스팅
console.log(msg); // undefined
var msg = 'hello';

var는 선언만 위로 끌려가고, 값은 아직 안 들어가 있어서 undefined 나옴.
에러는 안 나지만 디버깅이 어려워 질 수 있는 단점이있다.

 

let 이란?

let의 특징으로는 중복선언이 불가능하다. / 값은 재할당이 가능하다.

let은 var와 다르게 중복선언 시, 해당 변수가 이미 선언되었다는 에러 메세지를 콘솔에 나타낸다.

즉, 에러파악을 빠르게 할 수 있다는 장점이 있다.

// 1. let 선언 방식
let score = 100;
score = 90;
console.log(score); // 90

let score = 80; 
// error 발생 : 이미 선언된 변수라고 나옴

// 2. let 호이스팅
console.log(score2); // ReferenceError: score2 is not defined

let score2 = 50;
console.log(score2); // 50

 

const 란?

const의 특징으로는 중복선언이 불가능하다. / 값을 재할당 할 수 없다.

let와 const의 차이는 가능여부이다.

const는 변하지않는 고정된 값을 변수로 지정할 때 사용한다.

// 1. const 선언 방식
const id = 'user1';
id = 'user2'; 
// error 발생 : const 변수는 값 못 바꿈

const id = 'user3';
// error 발생 : 중복 선언도 안 됨

// 2. const 호이스팅
console.log(user4); // ReferenceError: user4 is not defined

const user4 = 'user4';
console.log(user4); // user4

 

var의 참조 범위(스코프)

var는 함수 내부에 선언된 변수만 지역변수가 되고, 나머지는 모두 전역변수로 간주한다.

showFruit 함수 내부에서 선언된 fruit 변수는 함수 내부에서만 참조가 가능하며, 외부에서 참조시 에러가 발생한다.

function showFruit() {
  if (true) {
    var fruit = 'apple';
    console.log(fruit);
  }
}

showFruit(); // apple
console.log(fruit); ReferenceError: fruit is not defined

 

let, const 의 참조 범위(스코프)

let, const로 선언된 변수는 코드 블록 내부에서만 유효함. 블록 외부부터 참조 불가. (참조에러 발생)

function showFood() {
  if (true) {
    let food = 'pizza';
    console.log(food); // pizza
  }
  console.log(food); //  ReferenceError: food is not defined.
}

showFood(); //  ReferenceError: food is not defined.

 

마무리 정리

var

• 중복 선언 O, 재할당 O
• 함수 스코프
• 호이스팅 시 undefined
• 사용 지양

 

let

• 중복 선언 X, 재할당 O
• 블록 스코프
• 호이스팅 시 ReferenceError
• 바뀔 수 있는 값을 담을 때 사용

 

const

• 중복 선언 X, 재할당 X
• 블록 스코프
• 호이스팅 시 ReferenceError
• 바뀌지 않는 고정된 값을 담을 때 사용
• 단, 객체/배열 내부 값은 변경 가능

 

어떤 변수를 사용하면 좋을까 ?

재할당이 필요없는 값은 기본적으로 const를 사용하는 것이 좋다. 의도치 않은 재할당을 방지해주기 때문에 안전하다. 

재할당이 필요한 경우는 let을사용하는 것이 좋다.