[JS] ES6 문법

2015년에 공개된 ECMAScript 6(ES6)는 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같이 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 있었습니다.

이때 도입된 몇 가지 문법에 대해 간단히 알아보도록 하겠습니다.

1. 기본 매개변수(Default Parameters)

• JavaScript에서, 함수의 매개변수는 undefined가 기본입니다. 그러나, 일부 상황에서는 다른 기본 값을 설정하는 것이 유용할 수 있습니다. 이때가 바로 기본값 매개변수가 필요할 때 입니다.

[1] ES6 이전의 기본 매개변수 설정

function multiply(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1
  return a*b
}

multiply(5, 2)   // 10
multiply(5)      // 5

• 과거에 기본값 설정을 위한 일반적인 방법은 함수 내부(body)에서 매개변수 값을 검사해 undefined인 경우 값을 할당하는 것이었습니다.

[2] ES6 기본 매개변수 설정

function multiply(a, b=1) {
  return a*b
}

multiply(5, 2)   // 10
multiply(5)      // 5

• ES6의 기본값 매개변수로 함수 내부 에서의 검사는 더 이상 필요치 않습니다. 이제, 간단히 함수 머리(head)에서 b의 기본값으로 1 로 설정할 수 있습니다.

2. 템플릿 리터럴(Template Literals)

• 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.

[1] Multi-line strings

source 내에 삽입되는 newline characters(\n)은 template literal의 일부가 됩니다.

// 과거 Multi-line strings
console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

// ES6 Multi-line strings
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

과거엔 \n을 이용하여 문자열을 개행하여 표현할 수 있었지만, ES6부터 백틱과 개행을 원하는 부분의 문자열을 개행(Enter)하여 사용하면 그대로 개행된 문자열의 결과를 호출할 수 있습니다.

[2] Expression interpolation

// 과거 Expression interpolation
var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

// ES6 Expression interpolation
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

과거엔 문자열로 표현할 부분만 큰따옴표로 감싸고 문자열이 아닌 표현식을 +로 감싸 표현식을 삽입했지만, ES6부터는 전체 문자열을 백틱으로 사용하고 표현식만 ${ }으로 감싸 훨씬 간단하게 표현할수 있게 되었다.

이외에도 템플릿 리터럴에는 템플릿을 중첩하는 Nesting templates, 함수를 파싱할 수 있는 Tagged templates, raw property를 이용하여 특수문자 입력이 가능한 Raw strings 등이 있습니다.

3. 구조 분해 할당(Destructuring assignment)

• 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

• 객체 및 배열 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있습니다. 구조 분해 할당의 구문은 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.

[1] 배열 구조 분해

var foo = ["one", "two", "three"];

var [red = 1, yellow = 2, green = 3] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

1. 기본 변수 할당 : 변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있습니다.
2. 기본값 : 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용합니다.
3. 변수 값 교환하기(XOR) : 하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있습니다.(구조 분해 할당 없이 두 값을 교환하려면 임시 변수가 필요합니다.)
4. 일부 반환 값 무시하기 : 필요하지 않은 반환 값을 무시할 수 있습니다.
5. 변수에 배열의 나머지를 할당하기 : 배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있습니다.

[2] 객체 구조 분해

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

1. 새로운 변수 이름으로 할당하기 : 객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있습니다.
2. 기본값 : 객체로부터 해체된 값이 undefined인 경우, 변수에 기본값을 할당할 수 있습니다.
3. 객체 구조 분해에서 Rest : rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모읍니다.
4. 속성 이름이 유효한 JavaScript 식별자명이 아닌 경우 : 구조 분해는 JavaScript 식별자 이름으로 적합하지 않은 속성명이 제공된 경우에도 이용할 수 있습니다. 이 때는 대체할 유효한 식별자명을 제공해야 합니다.

4. 스프레드 연산자(Spread Operator)

• 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다. 이를 스프레드 문법이라고 합니다.

// [1] 함수 호출

// 일반적으로 배열의 엘리먼트를 함수의 인수로 사용하고자 할 때 Function.prototype.apply() 를 사용하였습니다.
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

// 전개 구문을 사용해 위 코드는 다음과 같이 작성될 수 있습니다.
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);


// [2] 배열 리터럴과 문자열

// 전개 구문 없이, 이미 존재하는 배열을 일부로 하는 새로운 배열을 생성하기에, 배열 리터럴 문법은 더 이상 충분하지 않으며 push(), splice(), concat() 등의 조합을 사용하는 대신 명령형 코드를 사용해야 했습니다.

// 전개 구문으로 이는 훨씬 더 간결해졌습니다.
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

5. 화살표 함수(Arrow Function)

• 화살표 함수 표현(arrow function expression)은 전통적인 생성자 함수표현(function)을 간단하게 표현하는 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.

1. this나 super에 대한 바인딩이 없고, methods로 사용될 수 없습니다.
2. new.target키워드가 없습니다.
3. 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
4. 생성자(Constructor)로 사용할 수 없습니다.
5. yield를 화살표 함수 내부에서 사용할 수 없습니다.

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]

var triple = numbers.map(num => num*3);
// triple는 이제 [3, 12, 27]