ecmascript_3_1

for-of 구문과 iterator

배열을 순회하는 방법

// twenty years ago,
for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

// Since ES5
myArray.forEach(function (value) {
  console.log(value);
});

forEach는 break나 return을 이용해 함수를 벗어날 수 없는 단점이 있다.

// for-in?
for (var index in myArray) {    // 실제 상황에서는 사용하지 마세요
  console.log(myArray[index]);
}

for-in 구문은 배열 순회를 위해서 만들어진것이 아니다.

• index에 할당되는 값은 숫자가 아니라 "1","2","3"과 같은 문자열이다.
• 배열의 요소뿐만 아니라 추가된 확장 속성까지도 모두 순회한다.
• 특정 환경에서는 루프의 순회 순서가 무작위다.

개선을 위한 노력

현존하는 수백만개의 웹 사이트가 for-in 구문을 사용하기 때문에 for-in을 고칠수 없었기에,
유일한 방법은 새로운 종류의 루프 문법을 추가하는 것 뿐이었다.

아래가 노력의 결과물이다.

// for-of
for (var value of myArray) {
  console.log(value);
}

• 문법적으로 가장 간결하다.
• for-in의 단점을 모두 배제한다.
• forEach() 구문과 달리, break, continue, return 구문과 함께 사용할 수 있다.
• 배열의 요소들만 순회한다.
• Map, Set과 같은 collection 객체를 순회할 수 있다. (이터레이블 객체 순회)

// Set iteration by for-of
var uniqueWords = new Set(words);
for (var word of uniqueWords) {
  console.log(word);
}

// Map iteration by for-of and destructuring
for (var [key, value] of phoneBookMap) {
  console.log(key + "'s phone number is: " + value);
}

for-of 구문으로 Object를 순회할 수 있을까?

기본적으로 for-of 구문은 Object를 대상으로 동작하지 않는다.
for-of 구문도 내부적으로는 어떤 메소드를 반복 호출하는 방식으로 동작한다.

for-of 구문으로 Object를 순회해보자.

그렇다면, for-of로 Object가 순회 가능하도록 약속(protocol)을 정하면 Object를 순회할 수 있지 않을까?
약속을 정해보자.

// Object에 순회가능한 약속 정하기
var foo = {
  [Symbol.iterator]: () => ({
    items: ['p', 'o', 'n', 'y', 'f', 'o', 'o'],
    next: function next () {
      return {
        done: this.items.length === 0,
        value: this.items.shift()
      }
    }
  })
}

for (let pony of foo) {
  console.log(pony)
  // <- 'p'
  // <- 'o'
  // <- 'n'
  // <- 'y'
  // <- 'f'
  // <- 'o'
  // <- 'o'
}

// for-of in depth
for (VAR of ITERABLE) {
  STATEMENTS
}

var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while (!$result.done) {
  VAR = $result.value;
  STATEMENTS
  $result = $iterator.next();
}

Array, Map, Set이 for-of 구문으로 순회가 가능한것은 공통적으로 이터레이터(iterator) 메소드를 제공하기 때문이다.

• 이터러블 프로토콜 : [Symbol.iterator]() 를 구현
• 이터레이터 프로토콜 : next()를 구현

Default Parameter

디폴트 파라미터는 함수호출시 함수의 파라미터들을 모두 채울필요가 없는 경우 사용한다.
특별히 값을 전달하지 않을 경우 undefined였지만 ES6에서는 임의의 새로운 값을 지정할 수 있게 하는 새로운 방법을 제공한다.

function animalSentence(animals2="tigers", animals3="bears") {
    return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

디폴트 값은 함수를 호출하는 시점에 계산되므로 아래처럼 사용가능하다!

function animalSentenceFancy(animals2="tigers",
    animals3 = (animals2 === "bears") ? "sealions" : "bears")
{
  return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

디폴트값을 지정하지 않은 경우 암묵적으로 undefined이다.

function myFunc(a=42, b) {...}
> function myFunc(a=42, b=undefined) {...}

Rest Parameter

호출받는 함수의 파라미터에 spread 연산자로 파라미터를 작성한 형태를 rest 파라미터라고 한다. 가변인자를 가진 function을 작성할 때 사용된다.

전통적인 방식으로 구현한 코드는 아래와 같다.

function containsAll(haystack) {
  for (var i = 1; i < arguments.length; i++) {
    var needle = arguments[i];
    if (haystack.indexOf(needle) === -1) {
      return false;
    }
  }
  return true;
}

가변인자를 사용하기 위해 arguments를 사용했다. arguments는 가독성이 떨어지며, 객체를 순회할 때 인덱스가 1부터 시작한다. 레스트 파라미터는 이런 2가지 단점을 보완한다.

// In ES6
function containsAll(haystack, ...needles) {
  for (var needle of needles) {
    if (haystack.indexOf(needle) === -1) {
      return false;
    }
  }
  return true;
}

레스트 파라미터 배열변수의 값이 undefined 되는 경우는 절대 없고 값이 없는 경우 빈 배열이 된다.

Spread Operator

스프레드 연산자는 이터러블 오브젝트의 엘리먼트를 하나씩 분리하여 전개할 때 사용한다.

Uses of spread operator

• Apply 호출 없이 사용할 수 있다.

// Math.max()를 사용할때 N개의 값으로 호출하려면 배열을 만들어서 apply를 사용해 호출해야 했다.
function getMaxOfArray(numArray) {
  return Math.max.apply(null, numArray);
}

getMaxOfArray([1, 2, 3]);

/// In ES6
var arr = [1, 2, 3];
var max = Math.max(...arr); // or Math.max(...[1, 2, 3]);

• 배열을 결합하는 새로운 방법을 제공한다.

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// ["one", "two", "three", "four", "five"]

• 배열을 복사하는 새로운 방법을 제공한다.

var arr = [1,2,3];
var arr2 = [...arr]; // like arr.slice() in ES5
arr2.push(4)

• NodeList와 arguments와 같은 객체를 배열로 간단히 변환할 수 있다.

// ES5
var nodesArray = Array.prototype.slice.call(document.querySelectorAll("div"));
var nodesArray = [].slice.call(document.querySelectorAll("div"));

// ES6
var nodesArray = [...document.querySelectorAll('div')];
var myFn = function(...args) { } // rest parameter

• jQuery나 underscore와 같은 라이브러리에서 제공하는 extend 메서드와 같은 객체 병합을 간단히 할 수 있다.

// extend sample in ES5
function extend(target /* ,source ,... */) {  
  var args = [].slice.call(arguments, 1); 

  return args.reduce(function(merged, obj) {
    return Object.keys(obj).reduce(function(receiver, prop) {
      if (obj.hasOwnProperty(prop)) {
        receiver[prop] = obj[prop];
      }
      return receiver;
    }, merged);
  }, target);
}

var base = { a: 1, b: 2 },  
    src1 = { b: 3 },
    src2 = { c: 4 },
    merged;

merged = extend(base, src1, src2);  

// ES6 using object#assign
let merged = Object.assign(base, src1, src2);  
//=> { a: 1, b: 3, c: 4 }

// ES6 spread operator
let merged = { ...base, ...src1, ...src2 };
//=> { a: 1, b: 3, c: 4 }

spread 파라미터는 배열을 엘리먼트로 분리, 전개하고, rest 파라미터는 전개된 엘리먼트를 다시 배열에 설정한다.

• spread 예제
• spread, rest 구분 예제

Destructuring

디스트럭처링은 객체나 배열에서 값을 쉽게 가져오는 방법이다.
비구조화 할당 또는 분할 할당 등으로 불린다.

Uses of Destructuring

• 배열을 디스트럭처링 하기

// ES5
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

// ES6 Array destructuring
var [first, second, third] = someArray; // [ variable1, variable2, ..., variableN ] = array;

var [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo); // 1
console.log(bar); // 2
console.log(baz); // 3

// 일부 요소 건너뛰기
var [,,third] = ["foo", "bar", "baz"];
console.log(third); // "baz"

// rest operator를 사용해서 맨뒤 요소들을 다른 배열에 할당
var [head, ...tail] = [1, 2, 3, 4]; // new Array(1,2,3,4);
console.log(tail); // [2, 3, 4]

• 객체를 디스트럭처링 하기

var robotA = { name: "Bender" };
var robotB = { name: "Flexo" };

var { name: nameA } = robotA;
var { name: nameB } = robotB;

console.log(nameA); // "Bender" 
console.log(nameB); // "Flexo"

// 축약 문법 사용하기
var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo); // "lorem"
console.log(bar); // "ipsum"

// 중첩된 디스트럭처링 패턴
var complicatedObj = {
  arrayProp: [
    "Zapp",
    { second: "Brannigan" }
  ]
};

var { arrayProp: [first, { second }] } = complicatedObj;

console.log(first); // "Zapp"
console.log(second); // "Brannigan"

• 이터레이션 프로토콜과 함께 사용하기

var map = new Map();
map.set(window, "the global");
map.set(document, "the document");

for (var [key, value] of map) {
  console.log(key + " is " + value);
}
// "[object Window] is the global"
// "[object HTMLDocument] is the document"

// 순회하면서 key 값에만 접근하기
for (var [key] of map) {
  // ...
}

// 순회하면서 value 값에만 접근하기
for (var [,value] of map) {
  // ...
}

• 여러개의 값을 리턴하기

// 여러개의 값을 리턴하기
function returnMultipleValues() {
  return [1, 2];
}
var [foo, bar] = returnMultipleValues();

// 객체를 컨테이너로 이용해 리턴값의 이름을 지정
function returnMultipleValues() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = returnMultipleValues();

• ES5 vs ES6

참조

• ES6 In Depth: 이터레이터(iterator)와 for-of 루프 구문
• ES6 Iterators in Depth
• Spread_operator
• es6-in-depth-destructuring
• es6-rest-spread-defaults-and-destructuring

Object

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator http://www.datchley.name/es6-rest-spread-defaults-and-destructuring/ https://medium.com/ecmascript-2015/default-rest-spread-f3ab0d2e0a5e