[34장, 35장, 36장] 이터러블, 스프레드 문법, 디스트럭처링 할당

[juyeon-park]

데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎

아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!

Q. 퀴즈 내용
1.  1번
2.  2번
3.  3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답 설명
</div>
</details>

[suehdn]

Q. 다음 문장의 빈칸을 채워주세요!
[(1)] : [(2)]를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속 받은 [(2)] 메서드를 호출하면 [(3)]을 준수한 [(4)]를 반환한다. 이러한 규약을 [(1)]이라 하며, [(1)]을 준수한 객체를 [(5)](이)라한다. for...of문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할등의 대상으로 사용할 수 있다.

[(3)] : [(5)]의 [(2)] 메서드를 호출하면 [(3)]를 준수한 [(4)]를 반환한다. [(4)]는 next 메서드를 소유하며 next 메서드를 호출하면 [(5)]를 순회하며 value와 done 프로퍼티를 갖는 [(4)] 리절트 객체를 반환한다. 이러한 규약을 [(3)](이)라 하며, [(3)]을 준수한 객체를 [(4)]라 한다. [(4)]는 [(5)]의 요소를 탐색하기 위한 포인터 역할을 한다.

정답

읽는데 너무 헷갈려서 출제 해봤습니다
(1) 이터러블 프로토콜
(2) Symbol.iterator
(3) 이터레이터 프로토콜
(4) 이터레이터
(5) 이터러블

[hyoribogo]

Q. 해당 코드에서 에러가 나는 이유는 무엇일까요? 또한 해결 방법은 무엇일까요?

const fruits = {
  0: 'apple',
  1: 'banana',
  2: 'cherry',
  length: 3
}

for (const fruit of fruits) {
  console.log(fruit)
}

퀴즈 정답

에러가 나는 이유

fruits는 유사 배열 객체이기 때문입니다. 유사 배열 객체는 for 문으로 순회할 수 있고, 인덱스로 프로퍼티 키에 접근할 수 있지만 Symbol.iterator 메서드가 없기 때문에 for...of 문으로 순회할 수 없습니다.

해결 방법

Array.from 메서드를 사용하여 fruits를 배열로 만들어 줄 수 있습니다.

const fruits = {
  0: 'apple',
  1: 'banana',
  2: 'cherry',
  length: 3
}

for (const fruit of Array.from(fruits)) {
  console.log(fruit) // apple banana cherry
}

[ghost]

Q. 디스트럭처링을 활용해보려고 합니다. 다음 빈칸을 요구사항에 맞게 디스트럭처링을 통해 받도록 해주세요

해당 객체의 name은 NAME 이름으로 받고 기본값으로 'myName', age는 기본값으로 40으로 받도록 디스트럭쳐링을 작성해주세요

const  { ?? } = { name: 'gunwoo' }

console.log(NAME, age) // gunwoo 40

퀴즈 정답

const { name: NAME = 'myName', age = 40 } = { name: 'gunwoo' }

[eeseung]

Q. 다음은 배열 디스트럭처링 할당에 대한 설명입니다. 빈칸을 채우고 아래 코드의 실행 결과를 예상해 보세요.

배열 디스트럭처링 할당의 대상은 __(1)__이어야 하며, 할당 기준은 배열의 __(2)__이다.

const [name, study] = ['frong'];
console.log(name, study); // (3)

const [year = 2023, month = 8, date = 16] = [ , 10, 5];
console.log(year, month, date); // (4)

퀴즈 정답

(1) 이터러블 (2) 인덱스 (3) frong undefined (4) 2023 10 5

[jonghyunlee95]

Q. 다음 코드의 결과를 작성해주세요.

const devcorses = ['frong', 'backdung', 'AI'];

const [we, ...notWe] = devcorses; 

console.log(we); (1)
console.log(notWe); (2)

퀴즈 정답

1. we - 'frong'
2. notWe - ['backdung', 'AI']

[dudwns]

Q. 다음은 피보나치 수열을 구현한 사용자 정의 이터러블을 생성하는 함수입니다. 빈칸을 작성해 주세요.

const fibonacciFunc = function (max) {
  let [pre, cur] = [0, 1];

  return {
    [(1)]() {
      return {
        (2)() {
          [pre, cur] = [cur, pre + cur];
          return { (3): cur, (4): cur >= max };
        },
      };
    },
  };
};

for (const num of fibonacciFunc(10)) {
  console.log(num); // 1 2 3 5 8
}

퀴즈 정답

(1). Symbol.iterator

(2). next
(3). value
(4). done