var의 단점 1

변수를 사용하려면 반드시 선언이 필요하다.
var는 이전 포스팅에서도 말했듯이 단점이 분명한 키워드이다.
코드로 예를 들어보겠다

<script type="text/javascript">
       var name = "minhae";
       console.log(name); // minhae 출력
       var name = "minho";// minho 출력
       console.log(name);
    </script>

자 이제 콘솔로그에 찍힌 name이라는 변수에 담긴 값을 예상해보자

"minhae"
"minho"

두 가지 값 모두가 출력된다.

name 이라는 변수가 두번 선언되었음에도 불구하고, 오류가 발생하지 않았다.

큰 웹이나 앱을 개발할때 이와 같이 똑같은 변수를 사용한다면 , 오류가 발생하지 않으니,

로직 상의 오류가 많아질것이고 , 그 오류를 찾기도 굉장히 어렵게 될 것 이다.

var의 단점 2

변수 선언의 실행 시점과 변수 호이스팅이란?

<script>
console.log(mimamo) // 저는 변수를 참조하는 코드입니다. // undifined
var mimamo; // 저는 변수 선언문 입니다. 
</script>

여러분들은 항상 이 값을 먼저 예측해보길 바란다 .

일반적인 변수를 사용하려면 반드시 선언이 필요하고 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다.

식별자란? 변수, 클래스이름 ,함수이름을 지어 식별하는 녀석들을
식별자라고 한다. 겁 먹지 말자

ReferenceError는 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이
등록된 식별자를 찾을 수 없을 때 발생하는 에러이다.

이 코드를 보면 변수 선언문보다 변수를 참조하는 코드가 앞에 있다.
순차적으로 실행된다고 생각했을때 선언이 되기전에 참조부터 하려하니
ReferenceError 오류가 발생 할 것이라고 생각되지만 여기서 문제가 시작된다.

변수 선언문인 var mimamo; 보다 변수를 참조하는 코드인 console.log(mimamo); 가 앞에있다

만약 코드가 순차적으로 실행되는 런타임에 변수가 선언이 실행된다면 실행되는 시점에서 아직 변수가 선언되기 이전이므로 ReferenceError가 발생해야한다.

하지만 undifined가 출력된다.
이는 변수선언 코드가 순차적으로 실행되는 런타임 이전 단계에서 먼저 실행된다는 증거인데 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것이 변수 호이스팅 이라고 한다

그러면 호이스팅은 어떤 문제점이 있냐고 물어본다면 , 순차적으로 진행되어야할

코딩에서 아직 선언되지도 않은 변수가 선언되어 버리면 ,

예상치 못한 에러가 날 수 있다 .

또한 안좋은 코드 습관이 생길 수 있다.

이러한 단점을 극복하기위해 const 와 let 이 등장했다.

let

var 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언할 수 있었다. 하지만, let 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언할 수 없다. 변수를 중복 선언하면 문법 에러(SyntaxError)가 발생한다.

<script>
var number = 123;
var number = 456;  // 중복 선언 허용

let number2 = 123;
let number2 = 456;  // Uncaught SyntaxError: 
//Identifier'number2' has already been declared
</script>

그리고 또한 let 은 변할수 있는 값을 담는 키워드이기 때문에
값의 재할당또한 가능하다.

<script>
let a = 10

console.log(a) // 10



a = 30

console.log(a) // 30



</script>

const

const 는 상수 변수이기 때문에 한 번 우리가 정한 값들은 변하지 않는다.
cosnt 는 let 과 다르게 값의 재할당이 불가능하다.

<script>
 const FOO = 123;
FOO = 456; // TypeError: Assignment to constant variable.
</script>

주의할 점은 const는 반드시 선언과 동시에 할당이 이루어져야 한다는 것이다.
그렇지 않으면 다음처럼 문법 에러(SyntaxError)가 발생한다

<script>
const FOO; // SyntaxError: Missing initializer in const declaration
</script>

상수는 가독성과 유지보수의 편의를 위해 적극적으로 사용해야 한다.
또한 변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다.

다음시간에는 표현식과 문을 다뤄보고 천천히 같이 공부해나가길 바란다.

더 자세한 let 과 const 의 스코프레벨 , 객체 프로퍼티는 점차 내용이 깊어질 떄 알아가면 좋을 것 이다.