var, let and const 차이점

October 19, 2020

var, let, const 차이점

var, let, const는 scope, hoisting, 재선언 및 재할당으로 구분할 수 있다.

Keyword	Scope	Hoisting	재선언	재할당
`var`	Function scope	O	O	O
`let`	Block scope	X	O	X
`const`	Block scope	X	X	X

var로 선언된 변수의 범위는 현재 실행 문맥인데, 그 문맥은 둘러싼 함수(local), 혹은 함수의 외부에 전역(global)으로 선언된 변수도 될 수 있다.

Function scope를 가지며 내부에 선언된 console.log(a)는 가장 가까운 a 변수를 참조 하게 된다.

var a = 3
function foo() {
  var a = 10
  console.log(a) // 10
}
console.log(a) // 3

var는 block scope가 아니기 때문에 아래와 같은 경우에는 블록스코프 영향을 받을 수 없다.

var a = 3
{
  var a = 7
}
console.log(a) // 7

호이스팅이 가능하기 때문에 선언문(var a)는 컴파일레이션 단계에서 처리가 된다. 이렇게 되면 변수와 함수 선언된 위치에서 코드의 꼭대기로 끌어 올려지게 되며 호이스팅 된다.

console.log(a) // undefined
var a = 2

위코드는 아래코드 처럼 인식된다

var a
console.log(a) // undefined
a = 2

함수 선언문과 함수표현식은 조금 다르게 동작한다.
함수 선언문

foo() // hoisting test
function foo() {
  console.log('hoisting test')
}

함수 표현식

foo() // TypeError
var foo = function bar() {
  // ...
}

var a = 3
var a = 7
console.log(a) // 7

블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다.

블록 스코프에 영향을 받으며 내부에 선언된 console.log(a)는 가장 가까운 a 변수를 참조 하게 된다.

let a = 1

if (a === 1) {
  let a = 2
  console.log(a) //  2
}

console.log(a) // 1

호이스팅이 불가능하다.

console.log(a) // ReferenceError
let a = 2

재선언은 불가능하다.

let a = 3
let a = 7 // Identifier 'a' has already been declared

재할당은 가능하다.

let a = 3
a = 7 // 7

블록 범위의 상수를 선언합다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다.

const은 블록스코프에 영향을 받는다.

const a = 1

if (a === 1) {
  const a = 2
  console.log(a) //  2
}

console.log(a) // 1

호이스팅이 불가능하다.

console.log(a) // ReferenceError
const a = 2

재선언은 불가능하다.

const number = 42

try {
  number = 99
} catch (err) {
  console.log(err) // TypeError: Assignment to constant variable.
}

console.log(number) // 42

재할당은 불가능하다.

const a = 3
a = 7 // TypeError

Frontend 개발자로 일하고 있으며, 전반적인 Tech 기술에 관심이 많습니다. 대화를 통해 좋은 서로 좋은 방향성을 찾는 것도 좋아합니다.