면접에서 var 대신 let const를 사용하는 이유가 뭔가요라고 질문 받았을때 당황해서 변수 할당에 대해서만 대답하고 다른 대답은 하지 못했다. 또 언제 면접볼지 모르니 한번 제대로 정리해서 머리속에 집어넣어 보려 한다!

Var

ES5까진 변수선언 방식이 var 밖에 없었는데 문제가 너무 많아서 ES6부터 let, const가 나오게 되었다.

문제점

1. 함수 스코프

스코프는 변수가 사용될 수 있는 영역을 말한다.
그중 var는 함수 스코프인데 이 말은 함수를 벗어난 영역에서 사용하면 에러가 발생한다는 것이다.

function ex() {
  var a = 1
  b = 1
}
console.log(a) // 에러
console.log(b) // 1

📌 이건 다른 언어에서도 에러가 나기 때문에 왜 문제인가 싶었는데 if, while, switch, for 안에서 선언한 변수는 전역변수 취급 된다는게 문제였다
📌 또한 함수 내에서도 var 안붙히고 변수 선언하면 전역변수가 되버린다

2. 호이스팅

호이스팅은 선언된 변수가 변수가 속한 스코프의 최상단으로 끌어올려지는 것을 말한다.

console.log(ex) // undefined
var ex = 1;

위 코드를 보면 다른 언어 같으면 참조 에러가 나야하는데 undefined가 출력된다.
이게 바로 호이스팅인데 아래 코드처럼 변수 선언이 위로 끌어올려져서 선언 후에 원래 위치에서 할당된다

var ex = undefined;
console.log(ex);
ex = 1

3. 재정의 가능

아래 코드처럼 한번 정의된 변수를 재정의 할수 있다.
재정의가 가능하다면 나중에 버그를 야기할 수 있다

var ex = 1;
var ex = 2;

4. 재할당 가능

상수처럼 재할당 불가능한 함수를 만들 수 없다.
상수를 사용하면 코드의 복잡도가 낮아지고 가독성이 높아진다.

💡 이렇게 문제가 많아서 let, const가 나오게 되었다

let, const

var과 다른점

1. 블록 스코프

let, const는 다른 언어에서의 변수처럼 블록스코프 이다.

let ex = 'let1';
console.log(ex); // let1
if (true) {
  let ex = 'let2';
  console.log(ex); // let2
}
console.log(ex); // let1

2. 호이스팅

let, const도 var처럼 호이스팅 된다.
하지만 임시적 사각지대가 있어서 var의 문제를 해결할 수 있다.
📌 임시적 사각지대는 변수가 정의된 위치와 호이스팅된 위치 사이에서 변수를 사용하려 하면 에러가 발생한다.

const ex = 1;
{
  console.log(ex); // 참조 에러
  const ex = 2;
}

위 코드를 보면 1이 출력되지 않고 참조에러가 난다
그 이유는 호이스팅된 위치와 변수정의 사이에서 변수를 사용하려 했기 때문이다.

const ex = 1;
{
  const ex = undefined;
  console.log(ex); 
  ex = 2;
}

3. 재정의 불가능

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

const ex2 = 10;
const ex2 = 20; // SyntaxError: Identifier 'b' has already been declared

4. const 재할당 불가능

var ex1 = 10;
ex1 = 20;
let ex2 = 10;
ex2 = 20;
const ex3 = 10;
ex3 = 20; // 에러 발생

📌 const는 재할당이 안되지만 객체 내부 속성값은 수정 가능하다

결론

❗️ ES6부터 let, const를 만들어 줬으니까 var는 뭔지만 알고 절때 쓰지말자