변수선언 const,let,var? 그리고 변수 호이스팅 등 정확하게 알고 지나가자

자바스크립트의 키워드는 오랜 기간 var <- 하나의 선언에 의존해 왔습니다.
ES6의 문법에서 많은 변화가 일어난 문법중에 const,let,var 라는 키워드가 생겼습니다.
중요한 개념 중 하나인 const,let,var에 대해 파해쳐 보도록 합시다.

const
const는 상수를 선언하는 키워드입니다. 상수? 즉, 재할당이 필요없는 값을 담아 둘 때 사용을 합니다.
왜 그럴까요? 기존 자바스크립트에 익숙한 개발자들은 var를 남발하며 자유롭게 바꾸고 싶을때 가져다가 바꿉니다.
그러다 보니 여러명이 협업할 경우 변경되지 말아야 할 값까지 바꾸는 경우가 많았죠.
그리고, 많은 버그들이 변수 때문에 고통을 겪는 일이 많았던 것이 사실입니다.

const example = 'example';
example = 'changed'; // Error: "example" is read-only
const example; // Error: const' declarations must be initialized.

위의 코드를 입력하는 순간 에러문구를 띄웁니다.
에러의 이름이 보이시나요? read-only 이렇게 const는 변수가 아닌 상수입니다.
그리고 const의 초기 값을 지정해 주어야 합니다.
let와var
var는 함수단위의 스코프, let은 블록단위의 스코프 변수입니다. 자바스크립트를 오래 하셨던 분들은 var의 모호함에 고통을 겪으신 분들이 있으실꺼에요.
대표적인 예로는 같은 이름의 변수를 재할당해도 에러를 띄우지 않는다는 겁니다.

var example = 'example';
var example = 'changedExample'; // 에러가 없이 잘 동작함

위에 코드는 아무런 에러가 발생하지 않습니다. 이상하죠? 자바스크립트가 그렇죠.. 그래서 아무렇게 짜도 잘 되는 너무 자유로운 환경이였습니다. 저렇게 변수의 할당을 중간에서 바꿀 수 있다는 건 언제든 내가 선언한 변수를 누군가 중간에서 바꿔버릴 수 있다는 것이죠.
그렇게 되면 잘 되던 코드가 어느날 누군가의 손에 의해 내가 해놓은 변수를 다른 사람이 바꿔버리면 에러가 발생하게 될 수도 있던 것이죠.
그래서 let을 쓰길 권장 하는 겁니다.
사실 const와 let만 있어도 이제는 왠만한 프로그래밍은 다 가능합니다. 물론, var도 필요할 경우가 있습니다. 의도적으로 말이죠.
이제 let의 예를 들어볼께요.

let example = 'example';
let example = 'example'; // Error: Identifier 'example' has already been declared

let으로 했을 경우 같은 스코프 내에 동일한 변수 네임이 존재할 경우 에러를 띄워줍니다.
이 작은 변화가 많은 에러를 방지해 줍니다. 또한, 변질되는 것에 대한 안심 수 있게 되죠.
let이 이 경우만 막아 줄까요?
더 큰 장점이 있습니다.

{
    var example = 'example';
}
console.log(example); // 'example'

스코프를 생성하고 var를 선언해 보았습니다. 스코프 밖에서도 해당 변수의 값을 출력을 하죠?
아래의 코드로 다시 입력해 보세요.

{
    let example = 'example';
}
console.log(example); Uncaught ReferenceError: example is not defined

not defined 에러가 뜹니다. 왜그럴까요? let은 블록단위 스코프에서만 존재하게 됩니다.
이러한 것 역시 많은 에러와 변수가 변질되는 것을 도와줍니다.
var의 호이스팅
var의 제일 나쁜 경우가 호이스팅입니다. 아직 제 블로그에 호이스팅이라는 글을 포스팅 하지 않아 처음 듣는 분도 있으실꺼라 말 뜻 그대로 끌어올리다라는 의미입니다.
코드로 이해해 보죠.

console.log(example); // undefined 로그 출력
var example = 'example'; // 변수의 값이 할당됨
console.log(example); // example 로그 출력

잘 정상 동작이 됩니다..; 일반적인 상식선상에선 동작이 되면 안되는 겁니다. 에러를 뱉어야겠죠. 하지만 에러가 발생하지 않고 동작합니다.
그 이유는 var 키워드는 자바스크립트 해석기가 호이스팅을 통해 재 해석 하기 때문입니다.

var example;
console.log(example); // undefined 로그 출력
var example = 'example'; // 변수의 값이 할당됨
console.log(example); // example 로그 출력

이런식으로 말이죠.
자바스크립트 var 식별자의 호이스팅의 중요한 점은 선언만 끌어 올려진다는 것이며, 할당은 끌어올려지지 않는 다는 것입니다.
이런 var의 호이스팅을 막기 위해서는 자바스크립트 scope(전역스코프나, 함수스코프)에 use strict(엄격한 자바스크립트를 사용하겠다는 키워드)를 사용해야 합니다.

'use strict'
console.log(example); // Uncaught ReferenceError: example is not defined
var example = 'example'; // 변수의 값이 할당됨
console.log(example); // example 로그 출력

위와같이 use strict모드를 사용하면 호이스팅은 동작하지 않고 에러를 토해내게 됩니다.
한가지 더 let 키워드를 사용할 경우 해당 스코프에 use strict를 사용하지 않아도 변수를 사용하기 전에 미리 선언하지 않으면 오류가 발생합니다.

console.log(example); // Uncaught ReferenceError: example is not defined
let example = 'example'; // 변수의 값이 할당됨
console.log(example); // example 로그 출력

이렇게 에러를 토해 냅니다. 조금 더 자신의 개발환경에 대해 명확하고 안정성이 보장된 프로그래밍이 가능해 진 것이죠.
매우 중요한 개념이고 사용법을 정확히 알고 있어야 되는 개념이니 꼭 숙지 하시고, 개발을 해야 합니다.