[JS] var? 언제 쓰는거지?

이제 막 자바스크립트 공부를 시작하면서 가장 헷갈리는 부분이다.
let? const? var? 언제 어떤 것을 써야하지?
특히나 let과 const는 자주 보이는데 var는 거의 만날 수가 없다.
그럼에도 var는 왜 존재하고, 왜 학습해야 하는가? 🤔

변수를 선언하는데에는 세가지 방법이 있다.

1. let
2. const
3. var

const는 일정한 상수 값을 유지할 때 선언하므로 let과 var와는 차이점이 분명하다.
하지만 let으로 선언한 변수와 var로 선언한 변수는 유사해서 대부분의 경우에 let을 var로, var를 let으로 바꿔도 큰 문제가 없이 동작한다.

그럼 왜 let과 var를 구별하여 써야할까?
var는 초기 자바스크립트 구현 방식으로, let과 const로 선언한 변수와는 다른 방식으로 동작하기 때문이다.

여기서, 차이점을 알아보기로 하자

1. 변수의 중복 선언을 허용한다.

한 스코프에서 같은 변수를 let으로 선언하면 에러가 발생한다.

let say = "hello";
let say = "world"; 

console.log(say); // SyntaxError: Identifier 'say' has already been declared

하지만 var로 선언하면 같은 변수를 여러 번 중복 선언할 수 있다.

var say = 'hello';
var say = 'world';

console.log(say); // world

이 때문에 처음 선언한 변수명을 잊어버리고 실수로 같은 것을 쓰게 된다면 코드가 꼬일 수 있다.
그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수타입이 let 과 const 인 것이다.

2. 블록 스코프가 없다.

var로 선언한 변수는 함수 스코프이거나 전역 스코프이다.
블록 스코프가 생기지 않기 때문에 let과는 다르게 블록 밖에서 접근 가능하다.

반복문을 통해 비교해 보자.
let으로 선언한 i는 블록 스코프인 for문 안에서만 접근할 수 있다.

for (let i = 0; i < 3; i++) {
    console.log(i); // 0 1 2
}

console.log(i); // ReferenceError: i is not defined

하지만 var로 선언한 변수 i는 블록 스코프를 무시하기 때문에 변수 i는 전역 변수가 된다.
때문에 전역 스코프에서 이 변수에 접근할 수 있어 for문 밖에서도 접근 가능하다.

for (var i = 0; i < 3; i++) {
    console.log(i); // 0 1 2
}

console.log(i); // 3

3. 변수 호이스팅

var는 호이스팅 현상에 있어서도 let과 const는 와는 다른 결과를 나타낸다.

호이스팅(Hoisting)이란?

• 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

호이스팅 현상은 왜 일어나는가?

• 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.
• 코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다.
  (정확히는 var 키워드로 선언한 변수와 함수 선언문일 경우 오류 없이 동작한다.)
  
  📌 호이스팅에 대해 더 알고싶다면

공통점

• let, const, var 선언은 모두 맨 위로 끌어올려지는 점은 동일하다.
  (선언은 호이스팅 되지만 할당은 호이스팅 되지 않는다.)

차이점

• var는 선언과 동시에 undefined로 초기화되며, 이후 실제 값으로 할당된다.
  이로 인해 var로 선언된 변수는 선언 전에도 접근할 수 있으나, undefined값을 가진다.

console.log(say); // undefined
var say = 'hello'; 

• let과 const는 호이스팅되지만, 초기화되지 않는다.
  따라서 선언 전에 접근하려고 하면 Reference Error(참조 오류)가 발생한다.

console.log(say); // ReferenceError: Cannot access 'say' before initialization
let say = 'hello'; 

console.log(say); // ReferenceError: Cannot access 'say' before initialization
const say = 'hello'; 

---

정리

변수는 블록 레벨 스코프를 갖는게 좋기 때문에 let과 const를 이용해 변수를 선언하는게 좋다고 한다.
공부를 하고나니, var를 이용해 변수를 선언했다가 함수안에서도 호이스팅이 일어나고, 중복된 변수를 사용하게 되고..
등등의 경우를 생각해보니 var의 부작용을 컨트롤 할 실력이 안된다면 let을 쓰는게 맞는 듯 싶다.
알고나서 보니 var를 쓸 일은 더더욱 없을 듯한데..🤔
그래도 var를 사용한 스크립트를 만날 일이 있을 것이기에 학습해 두면 좋을 것 같다.