모던 자바스크립트 (자료구조와 자료형) 3-3. iterable 객체 / 구조 분해 할당

iterable 객체

: 배열을 일반화한 객체

: for .. of 를 사용할 수 있는 객체 (배열, 객체, 문자열 등)

 

 

 

Symbol.iterator

: 반복이 되지 않는 객체를 반복 가능한 객체로 만드는 함수

: next()내에 있는 객체를 무조건 반환

: next()의 반환 값은 { done: Beoolean, value: any } 형태이며 done이 true면 반복 종료 / false면 다음 값을 value에 저장

: 아래 코드에서 range.to를 infinity로 설정하면 무한으로 가능

let range = {
  from: 1,
  to: 5
};

// 1. for..of 최초 호출 시, Symbol.iterator가 호출됩니다.
range[Symbol.iterator] = function() {

  // Symbol.iterator는 이터레이터 객체를 반환합니다.
  // 2. 이후 for..of는 반환된 이터레이터 객체만을 대상으로 동작하는데, 이때 다음 값도 정해집니다.
  return {
    current: this.from,  // 반복이 얼마나 진행 되었는지도 저장
    last: this.to,

    // 3. for..of 반복문에 의해 반복마다 next()가 호출됩니다.
    next() {
      // 4. next()는 값을 객체 {done:.., value :...}형태로 반환해야 합니다.
      if (this.current <= this.last) {
        return { done: false, value: this.current++ };
      } else {
        return { done: true };
      }
    }
  };
};

// 이제 의도한 대로 동작합니다!
for (let num of range) {
  alert(num); // 1, then 2, 3, 4, 5
}

 

 

 

 

이터레이터를 명시적으로 호출하기

: for of 보다 반복 과정을 더 잘 통제할 수 있음

let str = "Hello";

// for..of를 사용한 것과 동일한 작업을 합니다.
// for (let char of str) alert(char);

let iterator = str[Symbol.iterator]();

while (true) {
  let result = iterator.next();
  if (result.done) break;
  alert(result.value); // 글자가 하나씩 출력됩니다.
}

 

 

 

 

유사배열 (array like)

: index와 length 프로퍼티가 있어서 배열 처럼 보이는 객체

let arrayLike = { // 인덱스와 length프로퍼티가 있음 => 유사 배열
  0: "Hello",
  1: "World",
  length: 2
};

// Symbol.iterator가 없으므로 에러 발생
for (let item of arrayLike) {}

 

 

 

 

Array.from

: 이터러블이나 유사배열을 받아 진짜 Array를 만들어주는 함수

: 매핑함수를 선택적으로 적용 가능

let arrayLike = {
  0: "Hello",
  1: "World",
  length: 2
};

let arr = Array.from(arrayLike); // (*)
alert(arr.pop()); // World (메서드가 제대로 동작합니다.)



// 매핑함수 적용 (Array.from(obj[, mapFn, thisArg]))
let range = {
  from: 1,
  to: 5
};

// 각 숫자를 제곱
let arr = Array.from(range, num => num * num);

alert(arr); // 1,4,9,16,25

 

 

 

 

구조 분해 할당

: 객체나 배열을 변수로 분해할 수 있는 자바스크립트의 문법

: 매개변수가 많거나 기본값이 필요할 때 사용

: 값을 복사한 후에 변수로 분해

 

- 배열 분해

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

// 동일한 기능
let [firstName, surname] = "Bora Lee".split(' ');

 

 

 

 

할당자

: 할당자 우측에는 모든 이터러블이 올 수 있음

: 할당자 좌측에는 모든 값이 올 수 있음

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

let user = {};
[user.name, user.surname] = "Bora Lee".split(' ');

alert(user.name); // Bora

 

 

 

entries를 이용해 객체 순회하기

let user = {
  name: "John",
  age: 30
};

// 객체의 키와 값 순회하기
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, age:30이 차례대로 출력
}

let user = new Map();
user.set("name", "John");
user.set("age", "30");

for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:John, then age:30
}

 

 

 

 

변수 교환 트릭

let guest = "Jane";
let admin = "Pete";

// 변수 guest엔 Pete, 변수 admin엔 Jane이 저장되도록 값을 교환함
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane(값 교환이 성공적으로 이뤄졌습니다!)

 

 

 

나머지 값 가져오기

: 배열 마지막에 ...변수명 으로 선언하면 배열의 나머지 값을 가져올 수 있음

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar

// `rest`는 배열입니다.
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

 

 

 

 

배열 기본값 설정하기

// 기본값
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius (배열에서 받아온 값)
alert(surname); // Anonymous (기본값)

 

 

 

 

배열 분해하기

: 존재하지 않는 키에 대해서도 가능

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

 

 

 

 

객체 프로퍼티를 목표변수에 할당

: 존재하지 않는 키에 대해서도 가능

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { 객체 프로퍼티: 목표 변수 }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 이름이 title인 프로퍼티
// rest = 나머지 프로퍼티들
let {title, ...rest} = options;

// title엔 "Menu", rest엔 {height: 200, width: 100}이 할당됩니다.
alert(rest.height);  // 200
alert(rest.width);   // 100

 

 

 

 

중첩 구조 분해

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
  size: { // size는 여기,
    width,
    height
  },
  items: [item1, item2], // items는 여기에 할당함
  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

 

 

 

 

매개변수에 대한 기본 값 설정

// 함수에 전달할 객체
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// 똑똑한 함수는 전달받은 객체를 분해해 변수에 즉시 할당함
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – 객체 options에서 가져옴
  // width, height – 기본값
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

 

 

 

 

 

중첩 객체와 콜론을 활용한 매개변수 기본 값 지정

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  // width는 w에,
  height: h = 200, // height는 h에,
  items: [item1, item2] // items의 첫 번째 요소는 item1에, 두 번째 요소는 item2에 할당함
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);

 

 

 

 

 

 

Refference

https://ko.javascript.info/iterable

https://ko.javascript.info/destructuring-assignment