Javascript에서 사용할 수 있는 변수 var let const에 대해 알아보겠다.

let

Mutable variable

javascript ES6에 추가된 let은 변수에 값을 할당하고 다시 변수에 다른 값을 할당할 수 있는 mutable variable이다.
재선언은 불가능하다.

let name = 'daseul';// let을 통해 name에 'daseul'할당
console.log(name);  // 'daseul'출력
name = 'happy';     // name에 'happy'할당
console.log(name);  // 'happy'출력 (재할당 가능)
let name = 'bada'
console.log(name); // Uncaught SyntaxError: Identifier 'str' has already been declared
// (재선언 불가능)

Block scope

let은 block안에 작성하게 되면 block안에서 변수를 출력하고 사용할 수 있지만,
block 밖에서는 사용할 수 없다.

{
  let name = 'daseul';
  console.log(name); // 'daseul'출력
}
console.log(name); // 아무값도 나오지 않음

만약 block 밖에 변수를 선언하게 되면 어디에서나 접근이 가능하다.
이러한 변수를 global variable 또는 전역 변수라고 하는데 이 변수들은 애플리케이션이 실행되는 동안 메모리안에 항상 탑재되어 있기 때문에 최소한으로 사용하는 것이 좋으며 조건문이나 반복문처럼 필요한 부분에서만 정의해 쓰는 것이 좋다.

let globalName = 'globla name';
{
  let name = 'daseul';
  console.log(name); // 'daseul'출력
  console.log(globalName); // 'globla name'출력 (block안에서 접근가능)
}
 console.log(globalName); // 'globla name'출력 (block밖에서 접근가능)

var

Mutable variable

let과 마찬가지로 값을 할당하고 다른 값으로 변경가능하다. 재선언 또한 가능하다

Hoisting

변수 var는 javascript에서 가장 먼저 사용된 변수로 hoisting이 가능하다.
hoisting이란 어디에 선언했는지에 상관없이 항상 제일 위로 선언을 끌어 올려주는 것을 말한다.
따라서 var는 변수를 선언 전 값을 할당할 수 있다.
또한 값을 할당하기전에 출력도 가능하다.

값 할당 전 출력시

console.log(age);   // 오류가 나는 것이 아닌 'undefined'라고 출력
age = 4; // 변수 선언 전 값 할당
var age; // 변수 선언

변수 선언 전 값 할당하고 출력시

age = 4;
var age;
console.log(age); // 변수를 선언전 값을 할당하였어도 '4'가 출력된다. 

이를 let을 이용해 실행하면 참조 에러(ReferenceError)가 나게 된다.

No block scope

var는 let과 다르게 중괄호로 block scope안에서 할당해도 block scope을 무시하고 벗어난 곳에서도 출력이 가능하다.
따라서 아무리 깊은 block안에 선언하더라도 어디에서나 var를 불러올 수 있다.

{
  age = 4;
  var age;
}
console.log(age); // '4'출력

이러한 유연한 특징을 이용해 초창기, 프로그램을 만들때는 금방 개발이 가능했지만
프로그램이 점점 거대화 되면서 var를 사용하게 되면 많은 오류와 보안이 취약해짐으로 인해 지금은 var를 거의 사용하지 않는다.

const

Immutable variable

const는 let, var와 다르게 값을 한번 할당하면 값을 또다시 변경할 수 없는 immutable variable이다.
변수에 값을 할당할 때 포인터를 통해 값을 가리키는데 const는 이 가리키는 포인터가 잠겨있다.
따라서 const는 변수 재선언, 재할당이 모두 불가능하다.

const name = 'daseul';
console.log(name); // 'daseul' 출력
const name = 'happy';
console.log(name); 
// Uncaught SyntaxError: Identifier 'name' has already been declared
// (재선언 불가능)
name = 'javascript';
console.log(name);
// Uncaught TypeError: Assignment to constant variable
// (재할당 불가능)

Favor immutable data type

이렇게 변수의 값을 변경할 수 없는 const를 사용하게 되면 한번 할당한 값을 다른 해커들이 다시 바꾸지 못하게 하여 보안을 높일 수 있으며, 개발을 할 때 실수를 방지할 수 있다.

정리

✔️ let 변수 재할당 가능 / 재선언 불가능
✔️ var 변수 재할당 가능 / 재선언 가능
✔️ const 변수 재할당 불가능 / 재선언 불가능

어떤 변수 선언 방식을 사용하는 것이 좋을까?
변수 선언에는 const를 기본적으로 사용하고, 재할당이 필요한 경우를 한정해 let을 사용하는 것이 좋다.
객체를 재할당하는 경우는 생각보다 흔하지 않다. const를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.

💡 재할당이 필요한 경우에 한정해 let 을 사용한다. 이때, 변수의 스코프는 최대한 좁게 만든다.
💡 재할당이 필요 없는 상수와 객체에는 const 를 사용한다

참고 강의
드림코딩