var, let, const의 차이점

var, let, const의 차이점

• var는 변수 재선언, 재할당 모두 가능합니다.
• let은 변수 재선언 불가능, 재할당은 가능합니다.
• const는 변수 재선언, 재할당 모두 불가능합니다.
• var는 function-scoped이고, let, const는 block-scoped입니다.

 

var의 재선언, 재할당이 가능하기 때문에 생긴 문제점

// 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않습니다.
var a = 'test'
var a = 'test2'

// hoisting으로 인해 ReferenceError에러가 나지 않습니다.
c = 'test'
var c

es2015에 추가된 let, const는?

// let
let a = 'test'
let a = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
a = 'test3'     // 가능

// const
const b = 'test'
const b = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
b = 'test3'    // Uncaught TypeError:Assignment to constant variable.

 

 

---

🛠️ 용어 공부

⚙️ function-scoped

var는 function-scoped이기 때문에 for문이 끝난다음에 i를 호출하면 값이 출력이 잘 됩니다.
그 이유는 var가 hoisting이 되었기 때문입니다.

for(var j = 0; j < 10; j++) {
  console.log('j', j)
}
console.log('after loop j is ', j) // after loop j is 10


// 아래의 경우에는 에러가 발생합니다.
function counter () {
  for(var i = 0; i < 10; i++) {
    console.log('i', i)
  }
}
counter()
console.log('after loop i is', i) // ReferenceError: i is not defined

 

 

function scope는 함수 내부 스코프를 의미하며 함수 내부에서 선언된 변수는 함수 내부에서만 접근이 가능합니다.

function sayHi () {
  const hi = 'Hi there!'
  console.log(hi)
}

sayHi() // 'Hi there!'
console.log(hi) // Error, hi is not defined

 

function scope에서 다른 함수를 호출할 수 있지만, 다른 함수 내부에서 선언된 내부 변수에는 접근이 불가합니다.

function first () {
  const firstFunctionVariable = `I'm part of first`
}

function second () {
  first() // It works
  console.log(firstFunctionVariable) // Error, firstFunctionVariable is not defined
}

 

⚙️ block-scoped

var가 function-scoped로 hoisting이 되었다면
let, const는 block-scoped단위로 hoisting이 일어납니다.

Block Scope

중괄호({}) 내부에서 let, const 변수를 선언하면 그 변수들은 중괄호 내부에서만 접근이 가능합니다.
함수도 중괄호로 선언되므로 block scope도 function scope의 부분집합이라고 할 수 있습니다.

{
  const hi = 'Hi there!'
  console.log(hi) // 'Hi there!'
}

console.log(hi) // Error, hi is not defined

 

c = 'test' // ReferenceError: c is not defined
let c

위의 코드에서 ReferenceError가 발생한 이유는 tdz(temporal dead zone)때문입니다.
let은 값을 할당하기전에 변수가 선언 되어있어야 하는데 그렇지 않기 때문에 에러가 납니다.
이건 const도 마찬가지인데 좀 더 엄격합니다.

 

// let은 선언하고 나중에 값을 할당이 가능하지만
let dd
dd = 'test'

// const 선언과 동시에 값을 할당 해야한다.
const aa // Missing initializer in const declaration

이렇게 javascript에 tdz가 필요한 이유는 동적언어이다보니 runtime type check 가 필요해서입니다.

 

⚙️ TDZ

TDZ(Temporal Dead Zone) 란, 한글로 직역하자면 일시적인 사각지대란 뜻입니다.
이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone) 라고합니다.

 

참고

• Github, var,let,const 차이점은?
• blog, 함수 스코프, 블록 스코프, 렉시컬 스코프
• blog, TDZ이란?

 

---

 

취업 준비를 하면서 알게된 프론트엔드 분야의 면접 질문들과 답을 중요도별로 용어 설명과 함께 정리하고 있습니다.
자세한 내용은 참고 링크를 확인하며 공부하시길 권장드립니다.
아래 링크로 이동하시면 다른 면접질문들도 용어 설명과 함께 공부하실 수 있습니다.

도움이 되셨다면 들어가셔서 star⭐️ 한번만 눌러주세요! 감사합니다. 🙇🏻‍♂️

 

https://github.com/Esoolgnah/Frontend-Interview-Questions

GitHub - Esoolgnah/Frontend-Interview-Questions: 프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️