TIL06, JS: var, let, const 정리*

var, let,const. 다 비슷비슷한데 단순히 구식, 신식으로 나뉘는 줄 알았다. 아니었다. 정리하고 간다.

var , const , let

변수를 정의하는 방식은 3가지가 있다.

var variable1;
let variable2;
const variable3;

각각의 변수 타입은 스코프와 호이스팅의 특징에 관하여 2가지로 나뉜다.

1. 스코프

var 타입의 변수는 함수 레벨 스코프이다. 즉, 변수가 선언되는 지점에서 종속되어 있는 함수의 스코프에서 호출이 가능하다.

if (1) {
  var x = 123;
}
console.log(x); // 123

변수 x 가 선언되었을 때, x 는 아무런 함수에도 종속 되어 있지 않으므로 글로벌 스코프에 해당된다. 따라서 if 문이 끝난지점에서도 x는 아무런 문제 없이 호출될 수 있다.

이에 반해 const 와 let 타입은 블록 레벨 스코프이다. 선언된 블록의 스코프에서만 호출이 가능하다.

if (1) {
  const x = 123;
  let y = 123;
} 
console.log(x);// ReferenceError
console.log(y); // ReferenceError
}

if 문이 종료되는 시점에서 x 와 y 의 값은 사라지고 참조될 수 없다.

2. 호이스팅

var 타입은 선언되는 지점에 상관없이 코드가 실행될 때 가장 먼저 정의된다.

console.log(x); // undefined. 변수는 선언되었지만 값이 할당되지 않았기 때문.
var x = 123;
console.log(x); // 123

const 와 let 은 변수가 선언되는 지점에서 정의된다.

console.log(x); // ReferenceError. 변수가 선언되지도 않았다.
const x = 123;
console.log(x); // 123

3. 확장성

C언어 혹은 JAVA와는 다르게 변수의 데이터 타입을 미리 정하지 않아도 된다. 또한 이미 특정 데이터를 할당했어도 다른 타입의 데이터를 새로 덮어씌우는(?)것에 아무런 문제가 없다.

const number = "I want to save some text into this variable.";
number = 123;

이에 관해서 관점에 따라 JS는 유연하다고 혹은 문제의 가능성이 많다고 평가가 갈린다.

4. 값 변경

var 과 let 은 변수에 담긴 값을 변경할수 있도록 허락한다. 이에 반해 const 는 한번 저장된 값을 변경할 수 없다. 각각의 쓰임새가 다르겠지만, var 과 let 을 덜쓰면 좀더 안정적인 (또 성능적으로도 더 나은) 코드를 짤수 있다. 리액트에서는 let 을 거의 사용하지 않는다.

---

3가지를 다 정리해두었지만, 사실 이젠 var 는 거의 안쓰인다. 그건 관짝에 고이 넣어주고 let 하고 const 만 잘 사랑해주도록 하자. 👍