JS 변수 선언하기

var, let, const

자바스크립트는 동적언어입니다. 그리고 4가지 방식으로 변수를 선언 할 수 있습니다.

기존에는 변수선언X, var , 그리고 ES6에서 let, const가 생겼습니다.

따라서 ES6에서는 var를 사용하지 않습니다.

그럼 4가지 차이점을 보려고합니다.

우선 변수를 선언하지 않는 것은 **global-scope(전역변수)**로 선언됩니다.

function foo(){
	x = 30;
}
foo();
console.log(x); //30

<br/>변수를 선언하지 않았기 때문에, 전역변수로 선언되어 에러를 출력하지 않습니다.
<br/>다음으로 var는 **function-scope **입니다. 그리고 호이스팅을 합니다.
<br/>
<br/>그리고 let, const는 block-scope 입니다.

다음 코드를 보면,

function func(){
  for(var i = 0; i < 10; i++){}
  console.log(i); // 10
}
func();

<br/>i값은 에러가 아니라 10을 출력합니다. var가 **function-scope **이기 때문입니다.

function-scope 이기때문에, for문 블록에서 선언되었더라도 함수의 영역으로 선언되어집니다.

그리고 이런 동작이 호이스팅에 의해 이루어집니다.

그럼 i를 var가 아닌 let으로 선언하면 어떻게될까요?

function func(){
	for(let i = 0; i < 10; i++){
  }
  console.log(i); //Uncaught ReferenceError: i is not defined
}
func();

<br/>let은 block-scope 이기 때문에, 블록외부영역에서는 정의되어있지 않았다는 에러를 출력합니다.

그럼 let과** const의 차이는 무엇일까요?**

const는 한번 바인딩 된 값은 변경 할 수 없습니다. <br />
const는 불변적 바인딩(immutable binding)을 합니다.<br />
ES6는 변수의 값이 ‘상수’이거나 불변적이라고 말하지 않습니다.const가 상수이거나 불변한다는 것은 굉장히 흔한 오해입니다!

const는 한번만 바인딩 될 수 있음을 의미합니다.

다음 코드를 보면 알 수 있습니다.

const obj = {};
obj.a = 10;
console.log(obj); // {a:10}

<br/>obj의 값이 변함에도, 에러가 발생하지 않습니다.

obj의 바인딩이 바뀌지 않았기 때문입니다.

하지만 다음 같은 경우는 에러가 발생합니다.

const val = 30;
val = 20; // Uncaught TypeError: Assignment to constant variable.

<br/>const값을 새로운 값으로 리바인딩 하려고 했기때문입니다.

const는 '상수', '불변'아니라 새로운 바인딩을 하지 않아야 하는 변수 입니다.

그럼 불변적인 값으로 어떻게 할 수 있을까요?

boolean, String, Number, null, undefined 와 같은 원시 자료형의 값들은 리바인딩 함으로서

값을 변경하기 때문에 const 로 선언함으로 불변할 수 있습니다.

Object의 경우에는 Object.freeze()메소드를 사용해야합니다.

다음과 같이 사용하면, 객체를 동결시켜 속성 추가/수정/삭제 할 수 없습니다.

const obj = Object.freeze({ 'a':1 , 'b' : 2});
obj.a = 3;
obj.b = 2;
delete obj.a;
console.log(obj); //{a: 1, b: 2}

하지만 Object.freeze() 메소드는 얕은 동결을 합니다.

obj안의 Object가 있다면, 그 값은 수정/추가/삭제 가 가능합니다. 따라서 깊은동결을 별도로 처리해주어야합니다.

const c = { 'c1' : 3};
const obj = Object.freeze({ 'a':1 , 'b' : 2, 'c' : c});
obj.a = 3;
obj.b = 2;
delete obj.a;
obj.c.c1 = 10;
console.log(obj); // {a: 1, b: 2, c: {c1 : 10}}

<br/>
<br/>

참고

<a href="https://medium.com/@khwsc1/es6-const는-불변성-immutability-과-관계-없어요-번역-118d3d50b909">ES6 const는 불변성(immutability)과 관계 없어요 [번역]</a>

<a href="https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d">var, let, const 차이점은?</a>
<br/>