JavaScript | 변수 var, let, const

변수란?

변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’
이며 값이 변경될 수 있다.

JavaScript에서는 크게 변수 선언 방식이 3가지가 있다.

ES5에서 var ES6 이후 사용하는 let, const

각각에 대해 알아보자🕵️‍♂️

1. var

1. 먼저 var는 선언 하기 전에 값을 할당하고 출력 가능하다.

function sayHi() {
  phrase = "Hello";

  alert(phrase); 

  var phrase;
}
sayHi(); // Hello 출력

2. var로 선언한 변수는 함수 또는 전역 스코프이다. (블록 밖에서 접근 가능👌)

function sayHi() {
  phrase = "Hello"; // (*)

  if (false) {
    var phrase; // if 문이 실행되지 않지만 호이스팅을 통해 phrase는 선언된다.
  }

  alert(phrase);
}
sayHi();

여기서 phrase가 선언되는 이유는 자바스크립트는 var로 선언한 모든 변수는 함수의 최상단으로 끌어올리기 때문인데 이 현상을 호이스팅(hoisting)이라고 한다. 위 예제에서 if 문 내의 코드는 절대 실행되지 않지만 이는 호이스팅에 영향을 주지 않는다.

선언은 호이스팅🙆‍♂️ 되지만 할당은 호이스팅🙅‍♀️ 되지 않습니다.

결국 var로 선언한 변수는 어디서든 참조할 수 있고 할당하기 전까지는 undefined 값을 가집니다. 또한 변수를 여러 번 선언해도 에러가 나지 않고 각기 다른 값을 출력해주지만 이는 프로그래밍에 매우 부적합합니다.

2. let

위와 같은 var의 부작용 때문에 나온 것이 let과 const 입니다.

1. 같은 변수에 대해 여러 번 선언할 수 없습니다.

let message = "This";

// 'let'을 반복하면 에러가 발생합니다.
let message = "That"; // SyntaxError: 'message' has already been declared
// 개발자 모드에서는 에러가 나지 않지만 실제 javascript 코드에서는 에러 발생!

2. 블록 스코프를 가집니다.

let kimchi = 'baechu'
{
  let kimchi2 = 'pha'
  console.log(kimchi)
}
console.log(kimchi2)

// baechu
// ReferenceError: kimchi2 is not defined
// kimchi2는 선언되지 않은 변수로 나온다. 
// block scope를 벗어나기 때문 -> kimchi2는 블록 안에서만 사용할 수 있다.

3. const

마지막 const는 값을 할당하면 변하지 않는 수를 만들고 싶을때 사용한다.
포인터가 잠겨 있어서 값을 선언함과 동시에 할당하면 값을 변경할 수 없다.

const kimchi = 'baechu'
kimchi = 'pha' // 재 할당 불가능
const kimchi = 'yeolmu' // 재 선언 불가능

이러한 성질을 immutable 하다고 합니다.
const를 사용하는 이유는 크게 세 가지 입니다.🤟

1. 보안상의 이유
2. 쓰레드 안전성 ⇒ 다양한 쓰레드들이 동시에 접근해서 값을 변경하는 것을 방지
3. 코드 변경 시 실수 방지

또한 변수 선언은 항상 undefined를 돌려줍니다.

결론

✨오래된 변수 선언 키워드인 var을 사용을 지양하고
모던한 변수 선언 키워드인 let과 const를 사용하도록 하자❗❕
재할당이 필요한 경우 let 아닌 경우는 모두 const를 사용하자