[ES6] let 그리고 const

자바스크립트의 새로운 변수 선언 방법, let 그리고 const
var와 어떤 차이가 있고, let과 const는 무엇이 다른지 정리해보자.

브라우저 버전에 따라 ES6문법을 사용할 수 없는 경우가 있습니다. 물론, Babel을 사용한다면 걱정을 안 해도 되지만 새싹 개발자인 필자는 저런 놀라운 기술이 있는지 몰랐었습니다. 그래서 언제나 IE와 그리고 구식 브라우저들과의 지옥 같은 호환성을 위해 항상 var로 변수를 선언하곤 했습니다.

 

" var도 여지껏 개발에 문제없이 사용했는데, 왜 let과 const가 생기게 되었을까? "

 

var의 크리티컬한 문제점

1) 함수 레벨 스코프(Function-level scop)

함수 블록만을 스코프로 인정합니다. 즉, 함수 외부에 선언한 모든 변수는 전역 변수입니다. 한 가지 예시로 for문 조건문에 선언한 변수도 for문 밖에서 참조가 가능합니다..! 이는 전역 변수를 남발할 가능성을 높이고, 메모리 관리에 매우 비효율적일 수 있습니다.

 

2) 변수 중복 선언 허용

만약, 여러 명에서 같은 프로젝트를 진행한다면...? 의도치 않은 변수의 값 변경이 일어날 가능성이 큽니다.

 

3) var 생략 허용

암묵적인 전역 변수를 양산할 가능성이 존재합니다.

 

4) 변수 호이스팅

변수를 선언하기도 전에 참조할 수 있습니다. 유용하게 사용할 수 있지만, 프로젝트 규모가 커지면 커질수록 내가 선언한 변수가 어디까지 내려갈지 어디로 빨려 들어갈지 예상 불가능입니다.

 

즉, var의 문제는 너무 쉽게 전역 변수로 선언된다는 것입니다. 간단한 프로젝트에서는 이런 자유로움에 편할 수 있지만, 프로젝트 규모가 크면 클수록 참여하는 사람이 많아질수록 프로그래밍의 혹은 유지보수의 복잡성을 증가시키는 원인이 됩니다.

 

" let과 const는 var 키워드의 단점을 개선하기 위해 도입되었습니다. "

 

 

let, 블록 레벨 스코프(Block-level scope)

대부분의 프로그래밍 언어 방식은 블록 레벨 스코프를 따르고 있습니다. 블록 레벨 스코프란, 함수 블록 / for 문 / while 문 / try ... catch 문 등에서 선언된 변수는 해당 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없는 방식입니다.

이를 지역 변수라고 합니다.

 

1) 블록 레벨 스코프

var no = 1 			// 전역 변수
console.log(no) 		// 1
{
  var name = 'Codify' 		// 전역 변수
}
console.log(name) 		// Codify

{
  var title = 'var'		// 전역 변수
  let title2 = 'let and const'	// 지역 변수
}
console.log(title);	 	// var
console.log(title2); 		// ReferenceError: title2 is not defined

 

2) 변수 중복 선언 불가

 

3) 호이스팅 불가

자바스크립트는 모든 선언에 대하여 호이스팅(Hoisting)을 합니다. 선언된 선언명만 맨 위로 옮긴 것처럼 동작합니다. 그래서 아래서 선언한 변수도 위에서 불러도 에러가 발생하지는 않은 겁니다.

 

하지만, let 키워드로 선언된 변수는 선언문 이전에 참조하면 에러(ReferenceError)가 발생합니다. 이는 let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(TDZ: Temporal Dead Zone)에 빠지기 때문입니다.

 

4) 클로저

 

5) 전역 객체와 let

전역 객체(Global Object)는 브라우저에서는 window 객체이고, Node.js에서는 global 객체입니다.

var num = 123; // 전역변수
console.log(window.num); // 123

let no = 123; // 전역변수
console.log(window.no); // but, undefined

var 키워드로 전역 변수로 선언하면 전역 객체의 프로퍼티가 되지만, let 방식은 전역 객체의 프로퍼티가 아닙니다.

let 전역 변수는 보이지 않는 블록 내에 존재하고 있다는 의미입니다.

 

 

 

const, 변하지 않는 값(상수)

const는 상수를 위해 사용하지만, 반드시 상수만을 위해 사용되지 않습니다. 이 의미를 살펴보시죠!

 

1) 재할당 불가능( If not, TypeError: Assignment to constant variable. )

2) 선언과 할당 동시성( If not, SyntaxError: Missing initializer in const declaration. )

3) 상수( 코드의 가독성과 유지보수 시 의미 파악 용이. )

// 100의 의미는 무엇일까? 왜 100일까?
while(num <= 100) {
	...
}
// 아하, 100이 임계치구나!
const MAX_NUM = 100 
while(num <= MAX_NUM) {
	...
}

4) 객체와 const

const는 재할당이 불가능합니다. 만약, const 변수의 데이터 타입이 객체일 수 있습니다. 여기서 생각해봐야 할 점은 객체는 참조형 데이터라는 점입니다. 즉, 객체를 가리키는 주소값을 변경하지 못하는 것이지 객체의 프로퍼티는 보호되지 않는다는 점이 중요합니다.

 

const tistory = { name: 'Codify' };

tistory.name = 'javascript';
tistory.version = 'es6'

console.log(tistory);	// {name: "javascript", version: "es6"}

delete tistory.version;
console.log(tistory);	// {name: "javascript"}

 

객체의 내용이 변경되더라도 객체 타입 변수에 할당된 주소값이 변경되지 않기 때문에 객체 타입의 선언에서는 const를 사용하는 것이 좋습니다. 만약, 명시적으로 객체 타입 변수의 주소값을 변경(재할당) 해야 한다면 let을 사용하면 됩니다.

 

 

'var ' vs  'let'  vs  'const'

var와 let, 그리고 const는 다음처럼 사용하는 것을 추천합니다.

• 변수 선언 시 기본적으로 const를 사용하고, let은 재할당이 필요한 경우로 한정하여 사용하는 것이 좋다. (변수 스코프 최소화)

• 원시값의 경우, 가급적 상수(const)를 사용하는 편이 좋다. 재할당이 불가능하므로 보다 안전하다.

• 객체의 경우,  const 키워드를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.

• ES6를 사용한다면, var 키워드는 사용하지 않는다.

 

변수를 선언 시에는 재할당이 필요할지 잘 모르는 경우가 습니다. 의외로 객체의 경우 재할당을 하는 경우가 드물기 때문에 변수를 선언할 때에는 가급적으로 const 키워드를 사용하는 것이 좋습니다. 그 후, 재할당이 필요하다면 let 키워드로 변경해도 늦지 않는다.

( 반드시 재할당이 필요한지 생각해봐야 합니다 ^-^ )

 

 

 

 

---

- 출처 -

 

https://poiemaweb.com/es6-block-scope