[TIL 08] javascript | var, let, const

javascript 변수 선언 키워드인 var, let, const와 각각의 차이점에 대해 알아보자.

var

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

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

변수의 이름이 같은데도 에러가 뜨지 않고 다른 값이 콘솔에 출력된다.
코드량이 많아졌을경우 개발자의 의도와 다르게 값이 바뀔 우려가 있다. (Error prone)
그래서 ES6 이후, 추가 된 변수 선언 방식이 let, const다.

let

let fruit = 'banana';
console.log(fruit); 

let fruit = 'orange';
console.log(fruit); 
//"SyntaxError: Identifier 'fruit' has already been declared

fruit라는 이름의 변수가 이미 선언되어있다는 에러메세지가 뜬다. var와는 다르게 같은 이름의 변수 재선언이 불가능하다.

let fruit = 'orange';
console.log(fruit); //orange

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

재할당은 가능!

const

const fruit = "orange"
str = "banana"; //-> error! 값의 재할당이 불가능하다.

function test() {
	const list = ["apple", "orange", "watermelon"]
	list.push("banana");
  // push 등을 통해 배열의 값을 변경하는 것은 가능하다.
}

const를 사용하더라도 배열과 오브젝트의 값을 변경하는 것은 가능하다.
재할당만 불가능.

var와 let, const의 차이점

1. 재선언 여부 (재선언은 재할당과 다르다!!!)

• var : 재선언 가능
• let, const : 재선언 불가능

var a = 12;
var a = 10; //10

let a = 12;
let a = 10; //SyntaxError: Identifier 'a' has already been declared

2. var는 함수레벨 스코프, let, const는 블록레벨 스코프

function test() {
  for (var i = 0; i < 100; i++) {
  }
  console.log(i) // 100
}

function test() {
  for (let i = 0; i < 100; i++) {
  }
  console.log(i) // not defined 에러발생
}

2. 선언 이전에 참조 가능 여부

• var : 선언 이전에 참조가 가능하다.
• let, const : 선언 이전에 참조가 불가능하다.

console.log(a); //undefined
var a= 10; //호이스팅 일어남. 선언 이전에 참조가 가능하다. (var)

console.log(a) // error : not defined
let a = 10; //호이스팅 일어나긴 하는데 선언 이전에 참조할 수 없다. (let, const)

❗️잠깐! 호이스팅이란?

함수 안에 있는 선언들을 모두 해당 함수 유효 범위의 최상단에 선언하는 것!

차이점 비교

var	let	const
재선언 가능	재선언 불가능	재선언 불가능
함수레벨 스코프	블록레벨 스코프	블록레벨 스코프
선언 이전에 참조 가능	선언 이전에 참조 불가능	선언 이전에 참조 불가능

1. const를 기본으로 사용하는 습관을 들이자.
2. 변경이 될 수 있는 변수는 let을 사용한다.