[JavaScript] ECMAScript 2015 / ES6 (1) / var, let, const

ECMAScript는 JavaScript 프로그래밍 언어를 정의하는 국제 표준의 기구이다.

ECMAScript의 6번째 표준인 ES 2015에서 모던 프로그래밍 요소를 도입해 문법이 혁신적으로 바뀌었고 사용하기 편리해졌다.

 

※  변수, 상수선언 (var, let, const)

var, let은 변수를 선언하는 키워드이고 const는 상수를 선언하는 키워드이다.var, let은 변수선언 키워드 이므로 값의 재할당이 가능하지만, const는 상수선언 키워드 이므로 값의 재할당이 불가능하다. 또한 const는 선언과 동시에 값을 할당해 줘야 한다.

const name = "LEE";
name = "KIM";    //error

let name = "LEE";
name = "KIM";

var name = "LEE";
name = "KIM";

 

※ var VS let (var대신 let을 써야 하는 이유)

● var 키워드는 변수명을 재선언해도 아무런 문제가 발생하지 않는다.

var name = "LEE";

/*
...
*/

var name = "KIM";  //이렇게 선언해도 아무런 에러가 발생하지 않는다.

반면 let키워드는 변수명 재선언시 에러를 발생시킨다.

let name = "LEE";

/*
...
*/

let name = "KIM";  // error 발생

   ★주의 재 할당과 재 선언을 혼동하지 말자. 

● var 키워드는 Hoisting(호이스팅) 이라는 메커니즘을 이용한다.

호이스팅이란 의미가 끌어올리다. 나르기로 해석된다. 자바스크립트에서 말하는 호이스팅도 비슷한 의미로 사용되고 있다.

다음과같은 상황이 var의 호이스팅 현상이다.

console.log(name);        // undefined 출력
var name = "KIM";
console.log(name);        // KIM 출력

첫 console.log의 name은 선언되지 않았다. 하지만 자바스크립트에선 에러가 나지 않는다. 

자바스크립트는 var변수 선언문을 위로 끌어올렸(호이스팅)기 때문에 선언이 없는 변수에도 오류없이 정상적으로 작동하게 된다.

즉 위의 소스는 아래와 같은 소스와 같이 재해석 될 수 있다.

var name;                //값은 할당받지 않았지만 선언은 위로 끌어 올린다.
console.log(name);
name = "KIM";
console.log(name);

이처럼 값의 할당은 끌어올리지 않지만 선언만 끌어 올려지므로 사람이 인식, 예측하기 힘든 코드의 작성을 야기할 수 있다.

반면 let키워드를 사용하면 미리 선언하지 않은 변수에 대해서 에러가 발생한다.

console.log(name); 
let name = "KIM";
console.log(name); 

 

● 전역 스코프 오염의 위험이 있다.

var 키워드는 function-scoped 이다. 즉 var 키워드 변수는 scope 안에 가두려면 반드시 함수가 필요하다. 하지만 let은 block-scoped이므로 블록단위의 영역에 고립된 변수를 선언할 수 있어 외부 scope의 오염을 막을 수 있다. 아래소스는 var키워드를 사용했을 때 실수로 if문 안에서 age라는 변수를 다시 선언해 잘못된 값(KIM이라는 text값)을 넣었다고 가정해보는 소스이다.

var age = 30

if(age == 30){
    var age = "KIM";
    console.log("age : " + age);                // KIM 출력
}

console.log("age : " + age);   // KIM 출력

위에서 보다싶이 var키워드는 중괄호 블록영역 내부의 var키워드 변수(if문 안에서 선언된 age)와 외부의 var키워드(if문 밖에서 선언된 age) 변수를 다른 스코프로부터 고립시키지 못한다. 이는 프로그램이 커지고 복잡해질수록 소스코드의 잠재적 위험도를 높히는 원인이 된다.

하지만 아래와 같이 let변수를 사용하게 된다면 문제는 해결이 된다.

let age = 30

if(age == 30){
    let age = "KIM";
    console.log("age : " + age);    //KIM 출력
}

console.log("age : " + age);        // 30출력

그리고 여담이지만 자바스크립트는 var키워드를 선언하지 않은 변수를 global 변수로 선언해 버린다.

그렇기 때문에 아래 예시와 같은 현상이 나올 수 있으니 항상 조심하도록 하자.

(function () {
    name = "KIM";
    console.log(name);    //KIM 출력
})();

//함수 안의 name는 내 의도와 상관없이 global scope가 되어버려 함수 밖에서도 출력이 된다.
console.log(name)         //KIM 출력

 

※ const 키워드

let 키워드와 유사하며, 단지 상수 선언 시 사용하며 값을 재할당 하는것이 불가능하고 선언과 동시에 값을 할당해야 한다.

const로 배열, 객체, 함수등을 선언 했더라도 식별자, 프로퍼티 형태로 직접 접근해서 값을 수정하는 것은 가능하다.

const user = {
	name : "KIM"
}
console.log(user.name);        // KIM 출력


user.name = "LEE";
console.log(user.name);        // LEE 출력

하지만 재 할당은 불가능하다. 

const user = {
	name : "KIM"
}

//재 할당을 하려 하므로 에러 발생
user = "LEE";

즉 const 식별자로 선언된 배열, 객체 같은 경우는 일종의 객체타입이라는 자료형을 유지하기 위한 수단으로 사용할 수 있다.