모던 자바스크립트 Deep Dive 34장~36장 이러터블/스프레드 문법/디스트럭처링 할당

이러터블이 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. next 메서드를 호출하면 value, done 프로퍼티를 가진 이터레이터 리절트 객체를 반환한다.

for ...of 문은 some 과는 다르게, done 프로퍼티가 true가 될 때까지 반복한다.

---

Rest 파라미터와 스프레드 문법은 서로 반대의 개념이다.

// Rest 파라미터는 인수들의 목록을 배열로 전달받는다.
function foo(...rest) {
  console.log(rest); // 1, 2, 3 -> [ 1, 2, 3 ]
}

// 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다.
// [1, 2, 3] -> 1, 2, 3
foo(...[1, 2, 3]);

 

이터러블이 아닌 유사 배열 객체는 스프레드 문법의 대상이 될 수 없다.

---

destructuring assignment 구조를 분해하여 다시 할당한다는 뜻으로, 이러터블 또는 객체를 비구조화하여(구조 파괴) 변수에 할당하는 것을 말한다.

변수의 개수와 이터러블 요소의 개수가 반드시 일치할 필요는 없다.

const [a, b] = [1, 2];
console.log(a, b); // 1 2

const [c, d] = [1];
console.log(c, d); // 1 undefined

const [e, f] = [1, 2, 3];
console.log(e, f); // 1 2

const [g, , h] = [1, 2, 3];
console.log(g, h); // 1 3

 

객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 선언한다.

const user = { firstName: 'Ungmo', lastName: 'Lee' };

// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당하고,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당한다.
const { lastName: ln, firstName: fn } = user;

console.log(fn, ln); // Ungmo Lee

배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용하는 경우

const todos = [
  { id: 1, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JS', completed: false }
];

// todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출한다.
const [, { id }] = todos;
console.log(id); // 2