1-1 var, let, const 차이 (호이스팅, 스코프)

1. 호이스팅(hoisting)

자바스크립트에서는 모든 선언문 (변수 선언문, 함수 선언문 등)을 런타임(runtime)이전 단계에서 실행한다.

 

이렇게 변수와 함수를 코드 맨 위로 끌어 올린 것 처럼 동작하는 특징을 호이스팅(hoisting : 끌어올리다, 게양하다) 이라고 한다.

 

 

2. 스코프(scope)

스코프는 식별자의 유효범위를 뜻한다.

 

전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 지닌다.

 

 

3. var의 문제점

var은 변수의 중복 선언을 허용한다. 이는 오류가 발생할 확률을 줄여 줄 수 있다.

변수를 중복선언 해주더라도 값을 넣는대로 문제 없이 정상 작동한다.

 

하지만 여기서 스코프의 범위 문제가 발생한다.

의도는 지역변수 a의 값으로 5를 넣어주려 했지만 이미 전역변수로서 a가 생성되어 있어 값이 전역으로 들어가게 된다.

현재 예제 코드는 짧기 때문에 바로 알아챌 수 있지만 코드가 길어질 경우 코드 어딘가에 전역변수 선언이 되어있어 재할당이 되어버리는 등의 예상치 못한 결과가 나올 수 있다.

 

 

4. let과 const의 출현

이러한 문제를 해결하기 위하여 ES6에서 let과 const 키워드를 도입하였다.

 

1) let

1-1) 중복선언 불가능

중복 선언 시 오류가 발생한다.  // 구문오류 : 식별자 'a'가 이미 선언되었습니다.

1-2) 블록레벨 스코프

if문 안의 let a가 블록레벨의 스코프를 지닌다.(지역변수로 따로 선언됨)

블록레벨 스코프가 지원되므로서 개발자가 이전에 전역변수로 선언된 변수명을 함수나 조건문 등에서 선언하여 사용하더라도

의도에 맞게 지역변수로서 내부에서만 작동하게 된다.

 

if문 안에서 따로 선언하지 않고 사용한다면 값이 의도에 맞게 전역변수에 적용된다.

1-3) 변수 선언 이전 참조 방지

변수 선언 이전 참조시 오류가 발생한다.  // 참조오류 : 초기화 전에 'a'에 액세스 할 수 없습니다.

변수 선언 이전 참조가 가능하게 되는 것은 의도와 다른 값을 반환하게 되므로 좋은 방식이 아니다.

(ex. var의 경우 변수 선언 이전에 참조하게 되면 무조건 undefined을 반환한다.)

 

오류로 취급하여 개발자가 인식하게 해주는 것이 좋다.

 

2) const

2-1) const 또한 let와 같은 특징을 지닌다. 하지만 const는 선언과 동시에 초기화를 해야한다.

const의 선언과 동시에 초기화를 해주지 않으면 오류가 발생한다.   // 구문오류 : const 선언에 초기화가 없습니다

 

 

2-2)  const는 값의 재 할당도 불가능하다.

const에서는 값의 재 할당이 불가능 하다.  // 유형오류 :상수 변수에 대한 할당

 

const는 변경하지 않는 값(상수)을 넣을 때 사용하는 것이 좋다.

 

※ 변수와 상수

ex) y = x +2 의 식에서 변하는 값인 x를 변수, 변하지 않는 고정된 값인 2를 상수라 한다.

 

 

2-3) 다만 const는 재할당을 금지하는 것이지 불변은 아니다.

const의 원시값 자체를 변경할 순 없으나 내부 객체의 값은 변경할 수 있다.

이러한 특징 때문에 const는 객체 타입의 변수 선언에도 사용된다.

객체 자체는 보호하되 객체의 내용 (프로퍼티 추가, 삭제, 값의 변경)이 가능하기 때문이다.