[JS] 이해 안 가는 개념 정리 : iterator, spread, distructuring

이터러블

이터러블

Symbol.iterator 메소드를 구현하거나 프로토타입 체인에 의해 상속한 객체. 이터러블은 for…of 문에서 순회할 수 있으며 Spread 문법의 대상으로 사용할 수 있다. 일반 객체x

console.log(Symbol.iterator in obj); // false

이터레이터

이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이 이터레이터는 next 메서드를 갖는다.
next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할을 하며, 순회 결과를 나타내는 이터레이터 리절트 객체를 반환한다.

const array = [1, 2, 3];

const iterator = array[Symbol.iterator]();

console.log('next' in iterator); // true

console.log(iterator.next()); // {value: 1, done: false}

for...of문

for...of문은 내부적으로 이터레이터의 next메서드를 호출하여 이터러블을 순회하며 next 메서드가 반환한 이터레이터 리저트 객체의 value 프로퍼티 값을 for...of문의 변수에 할당한다.
이터레이터 리절트 객체의 done 프로퍼티 값이 false이면 이터러블의 순회를 계속하고 true이면 이터러블의 순회를 중단한다.

const iterable = [1, 2, 3];

const iterator = iterable[Symbol.iterator]();

for (;;) {
  const res = iterator.next();

  if (res.done) break;
}

유사 배열 객체
유사 배열 객체는 이터러블이 아닌 일반 객체임. 유사 배열 객체 중 DOM 콜렉션(arguments, NodeList,HTMLCollection)은 유사 배열 객체이면서 이터러블임.
유사 배열 객체지만 이터러블이 아닌 객체는 Array.from 메서드를 통해 배열로 변환할 수 있음.

const arrayLike={0:1,1:2,2:3};
const arr=Array.from(arrayLike);
//arr : [1,2,3]

스프레드 문법

스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 콜렉션(arguments, NodeList,HTMLCollection), arguments와 같이 for...of로 순회할 수 있는 이터러블에 한정됨.

객체 리터럴 내부

스프레드 문법의 대상은 이터러블 한정이었지만 Rest프로퍼티와 함께 객체 리터럴의 프로퍼티 목록에서도 사용할 수 있음.

const merged={...{x:1,y:2},...{y:10,x:3}};
//merged : {x:1,y:10,z:3}

디스트럭처링 할당

구조 분해 할당.

const user = { firstName: 'Tanaka', lastName: 'Yukio' };

// 이때 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
const { lastName, firstName } = user; 
// const { lastName: lastName, firstName: firstName } = user;

// firstName : 'Tanaka', lastName: 'Yukio'

프로퍼티 키 변경

const { lastName: ln, firstName: fn } = user;
// fn : 'Tanaka', ln: 'Yukio'

기본 값 설정

const { lastName: ln='Yukio', firstName: fn } = {firstname:'Tanaka'};
// fn : 'Tanaka', ln: 'Yukio'

프로퍼티 키를 이용해 특정 프로퍼티 값 추출

const str = 'Hello';
// String 래퍼 객체로부터 length 프로퍼티만 추출한다.
const { length } = str;
console.log(length); // 5

const todo = { id: 1, content: 'HTML', completed: true };
// todo 객체로부터 id 프로퍼티만 추출한다.
const { id } = todo;
console.log(id); // 1

함수의 인수

// 객체 디스트럭처링 할당을 사용하면 간단하고 가독성 좋게 표현이 가능하다.
function printTodo({ content, completed }) {
  console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({ id: 1, content: 'HTML', completed: true });
// 할일 HTML은 완료 상태입니다.

배열의 요소가 객체인 경우

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

중첩된 객체

const user = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

// address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
const { address: { city } } = user;
console.log(city); // 'Seoul'