[Javascript] var, let, const의 차이점

Kiara ·2023년 3월 12일

Javascript

목록 보기

3/6

💎 var, let, const의 차이점

키워드	중복 선언	재할당	변수 스코프 유효범위	호이스팅
var	O	O	함수 레벨 스코프	O
let	X	O	블록 레벨 스코프	X
const	X	X	블록 레벨 스코프	X

중복 선언/재할당 가능 여부

- `var` : 중복 선언 O, 재할당 O

var a = 10; //변수 선언+할당
console.log(a); // 10

//중복 선언+재할당
var a = 20; 
console.log(a); // 20

//중복 선언
var a; 
console.log(a); // 20

키워드 var는 중복 선언과 재할당이 전부 가능해서 예상치 못한 값을 반환할 수도 있다.

- `let` : 중복 선언 X, 재할당 O

let name = "Kiara";
console.log(name); // Kiara

// 중복 선언
let name = "Kirakira"; // Uncaught SyntaxError: Identifier 'name' has already been declared

// 재할당
name = "Kirakira"; 
console.log(name); // Kirakira

키워드 let은 중복 선언은 안되지만, 재할당은 가능하다.

- `const` : 중복 선언 X, 재할당 X

const name; // Uncaught SyntaxError: Missing initializer in const declaration
const name = "Kiara";

키워드 const는 중복 선언과 재할당 모두 불가능하다. 키워드let과 다른 점은 선언과 초기화가 반드시 동시에 진행되어야 한다는 것이다.

// 원시값의 재할당 X (상수 키워드 const는 값을 변경할 수 없음)
const name = "Kiara";
name = "Kiara"; // Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const student = {
 name : "Kiara"
}
student.name = "Kirakira";

console.log(student); // { name : "Kirakira" }

원시값의 재할당은 불가능하지만 객체의 재할당은 가능하다.

변수 스코프 유효범위

- `var` : 함수 레벨 스코프

var name = "Kiara"; //전역 변수

while (true) {
  var name = "Kiara's velog"; //전역 변수로 취급됨
}

console.log(name); //Kiara's velog

console.log(name)이 Kiara가 아닌 'Kiara's velog'가 나오는 이유는 함수가 아닌 다른 블록 내에서 선언된 키워드 var 변수는 지역 변수가 아닌 전역 변수로 취급되기 때문이다.

- `let`/`const` : 블록 레벨 스코프

// 전역 변수 초기화
let name = "Kiara"; 
const color = "Blue";

while (true) {
  let name = "Kiara's velog"; // 지역 변수
  const color = "Pink";	// 지역 변수
}

console.log(name); //Kiara
console.log(color); //Blue

위와 같은 코드에서 키워드를 var에서 let과 const로 바꿨을 때, 출력값은 while문 내에서 선언된 값이 아닌 전역 변수의 값이 반환된다.

호이스팅 가능 여부

- `var` : 호이스팅 가능

<!-- var로 선언된 변수의 호이스팅 -->
console.log(a);      // undefined
var a = 10;      // var로 선언된 변수에 10이라는 값을 할당함
console.log(a);      // 10

값을 할당하기 전에 console.log()로 값을 참조했을 때 오류가 발생하지 않고 undefined가 나타난다.

- `let`/`const` : 호이스팅 불가능

<!-- let으로 선언된 변수의 호이스팅 -->
console.log(a);      // Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 20;      
<!-- const로 선언된 변수의 호이스팅 -->
console.log(PI); //Uncaught ReferenceError: Cannot access 'PI' before initialization
const PI = 3.14;

var와 다르게 키워드 let과 const는 변수에 값을 할당하기 전에 출력을 했을 때 오류가 뜨는 것을 확인할 수 있다. 이는 호이스팅이 불가능하기 때문이다. 즉, 콘솔에 출력하는 명령어를 실행하기 전에 변수가 선언되지 않았기 때문에 정상적으로 실행되지 않는다.