ES2015+ (const, let, 템플릿 문자열, 객체 리터럴)

2015년에는 자바스크립트 문법에 매우 큰 변화가 있었습니다.

 

바로 ES2015(ES6라고도 부릅니다)가 등장한 것이었습니다. 2015년을 기점으로 매년 문법 변경 사항을 발표하고, 새로운 문법 상세에 대해서도 활발한 논의가 이루어지고 있습니다. 

 

2018년 현재 ES2018까지 나왔습니다. 보통 자바스크립트를 배울 때는 ES5의 문법을 배웁니다. 하지만 이제는 ES2015
이상의 자바스크립트를 배울 때입니다. 

 

다른 언어들의 장점을 본딴 편리한 기능이 많이 추가되었기 때문입니다. 노드 6 버전부터 ES2015 문법을 사
용할 수 있습니다. 

 

여기서는 ES6 주요 문법에 대해 설명하겠습니다.

1. const, let

보통 자바스크립트를 배울 때 var로 변수를 선언하는 방법부터 배웁니다. 하지만 var은 이제 const와 let이 대체합니다. 

 

먼저 const와 let이 공통으로 가지는 특징인 블록 스코프에 대해 알아봅시다.

 

if (true) {
	var x = 3;
}
console.log(x); // 3

if (true) {
	const y = 3;
}
console.log(y); // Uncaught ReferenceError: y is not defined

코드는 크롬 개발자 도구(F12)의 Console 탭에 적으면 됩니다. 

x는 정상적으로 출력되는데 y는 에러가 발생합니다. 

 

var을 const으로 바꿨을뿐인데 차이가 발생하는 것입니다. 

var은 함수 스코프를 가지므로 if문의 블록과 관계없이 접근할 수 있습니다. 하지만 const와 let은 블록 스코프를 가
지므로 블록 밖에서는 변수에 접근할 수 없습니다. 블록의 범위는 if, while,for, function 등의 중괄호입니다. 

함수 스코프 대신 블록 스코프를 사용함으로써 호이스팅 같은 문제도 해결되고 코드 관리도 수월해졌습니다.

const와 let이 var과 다른 점은 어떤 스코프를 취하는지입니다.

 

그렇다면 const와 let의 차이는 무엇일까요? 

 

const는 한 번 대입하면 다른 값을 대입할 수 없습니다. const에 다른 값을 대입하려고 하면 에러가 발생합니다. 또한, 초
기화 시 값을 대입하지 않으면 에러가 발생합니다. 

 

const a = 0;
a = 1; // Uncaught TypeError: Assignment to constant variable.

let b = 0;
b = 1; // 1
const c; // Uncaught SyntaxError: Missing initializer in const declaration

 

자바스크립트를 사용할 때 한 번 초기화했던 변수에 다른 값을 대입하는 경우는 의외로 적습니다. 

따라서 기본적으로 변수 선언 시에는 const를 사용하고, 다른 값을 대입해야 하는 상황이 생겼을 때 let을 사용하면 됩니다.

 

2. 템플릿 문자열

ES2015 문법에 새로운 문자열이 생겼습니다. 큰따옴표나 작은따옴표로 감싸는 기존 문자열과는 다르게 백틱( ` )으로 감쌉니다(Tab 위에 있습니다).

특이한 점은 문자열 안에 변수를 넣을 수 있다는 것입니다.

다음은 기존 ES5 문법을 사용한 문자열입니다.

 

var num1 = 1;
var num2 = 2;
var result = 3;
var string1 = num1 +' 더하기' + num2 +'는 \'' + result +'\'';
console.log(string1); // 1 더하기 2는'3'

문자열 string1은 띄어쓰기와 변수, 더하기 기호 때문에 가독성이 좋지 않습니다. 

또한, 작은따옴표를 이스케이프하느라 코드가 지저분합니다. 

 

ES2015부터는 다음과 같이 사용할 수 있습니다.

const num3 = 1;
const num4 = 2;
const result2 = 3;
const string2 = `${num3} 더하기 ${num4}는'${result2}'`;
console.log(string2); // 1 더하기 2는'3'

 

훨씬 깔끔해졌습니다. 

${변수} 형식으로 변수를 더하기 기호 없이 문자열에 넣을 수 있습니다. 

기존 따옴표 대신 백틱을 사용하기 때문에 큰따옴표나 작은따옴표와 함께 사용할 수도 있습니다.

 

3. 객체 리터럴

객체 리터럴에는 편리한 기능들이 추가되었습니다.

 

var sayNode = function() {
	console.log('Node');
};

var es ='ES';

var oldObject = {
	sayJS: function() {
		console.log('JS');
	},
	sayNode: sayNode,
};

oldObject[es + 6] ='Fantastic';

oldObject.sayNode(); // Node
oldObject.sayJS(); // JS
console.log(oldObject.ES6); // Fantastic

oldObject 객체에 동적으로 속성을 추가하고 있습니다. 앞의 코드를 다음과 같이 다시 쓸 수 있습니다.

 

const newObject = {
	sayJS() {
		console.log('JS');
	},
	sayNode,
	[es + 6]:'Fantastic',
};
newObject.sayNode(); // Node
newObject.sayJS(); // JS
console.log(newObject.ES6); // Fantastic

oldObject와 newObject를 비교해서 보면 됩니다. 

 

sayJS 같은 객체의 메서드에 함수를 연결할 때 더는 콜론(:)과 function을 붙이지 않아도 됩니다.
sayNode: sayNode처럼 속성명과 변수명이 겹치는 경우에는 한 번만 쓸 수 있게 되었습니다. 

 

자바스크립트에서 다음과 같은 경우가 많이 나오는데, 이때 코드의 중복을 피할 수 있어 편리합니다.

{ name: name, age: age } // ES5
{ name, age } // ES2015

객체의 속성명을 동적으로 생성할 수 있습니다. 

 

예전 문법에서는 ES6라는 속성명을 만들려면 객체 리터럴(oldObject) 바깥에서 [es + 6]를 해야 했습니
다. 하지만 ES2015 문법에서는 객체 리터럴 안에 선언해도 됩니다. 

 

newObject 안에서 [es + 6]가 속성명으로 바로 사용되고 있습니다.

객체 리터럴에 추가된 문법은 코딩 시 편의를 위해 만들어진 것이라는 느낌이 강합니다. 

익숙해지면 코드의 양을 많이 줄일 수 있습니다.