[양재동코드랩] 자바스크립트 강의 1일차 - Iteration, Spread, Rest

Iteration

• 반복을 의미
• 반복하기 위한 프로토콜 필요
  • 프로토콜은 규약을 의미
• 반복을 처리하기 위한 함수를 가지고 있는 오브젝트여야 함
• 구성
  • iterable 프로토콜
  • Iterator 프로토콜
• 빌트인 오브젝트는 기본적으로 이터러블 프로토콜을 가지고 있기 때문에 반복 가능
  • String, Array, TypedArray, Map, Set
  • Arguments, DOM NodeList
• 이터러블 오브젝트는 빌트인 오브젝트 외에 이터러블 프로토콜이 설정된 오브젝트를 의미
• 이터러블 오브젝트 조건
  • Symbol.iterator()가 있어야 함
    • 실제로 반복을 수행하는 메소드
  • Array를 상속받으면 이터러블 오브젝트가 됨
  • 개발자 코드로 이터러블 프로토콜 정의 가능

iterator protocol

• iterator의 next 메소드를 통해 값 순회
• 반환 값은 {value: 1, done : false}의 형태
• value에 undefined가 들어갈 수 있기 때문에 value로 반복의 끝을 판단하면 안됨
• done이 true가 되면 반복이 끝

spread

• 문법 : [...iterable]

• 이터러블 오브젝트를 하나씩 전개

• 예제

  const two = [21,22];
  const five = [51,52];
  const one = [11, ...two, 12, ...five]

  • array안에 array가 또다시 들어가는 것이 아니라 분리시켜서 하나의 array를 만듦
  • 결과는 [11, 21, 22, 12, 51, 52]

• 문자열 분리

  const str = "music";
  const chars = [...str];
  console.log(charas)

  • 결과는 ['m','u','s','i','c']

• 파라미터로 전달

  const two = [21,22];
  const five = [51,52];
  two.push(...five);

• 오브젝트 spread

• const one = [{name1: 11}, {name2: 22}];
  const two = [{name3: 33}, ...one];

• function spread (가장 많이 사용됨)

  function get(one, two, three){};
  const values = [10,20,30];
  get(...values);

  • 배열의 순서대로 함수의 파라미터에 각각 할당됨

rest 파라미터

문법 : function(param, paramN, ...rest)

• 호출받는 function 파라미터에 ...에 이어서 파라미터 이름 작성
• 파라미터 값들을 모아서 배열 형태로 사용
  • Array.isArray로 타입검사를 해보면 true 반환. 즉, 배열타입임
• spread로 분리시키고 rest로 다시 묶는 식으로 활용
• Rest 파라미터를 사용하면 arguments 오브젝트를 만들지 않음
  • 명확하게 명시할 수 있는 Rest 파라미터 사용 권장
  • argument는 보이지 않는 곳에서 생성됨

Array-like

• 배열처럼 반복이 가능한 오브젝트

• Argument 오브젝트가 바로 Array-like 오브젝트임

• 프로토콜을 지켜야함

  • 프로퍼티 키 값이 0부터 순서 값

    • 순서 값의 순서가 지켜지지 않으면 오류

  • 전체 프로퍼티수를 length로 작성

    const values = {0: value, 1: value, length: 2}
    for(const key in values) {	// for-in의 경우 작성 순서가 아닌, 숫자 > 영문 > length 순서로 전개
        console.log(key, values[key]);
    }
    
    for(let k = 0; k < values.length; k++){ // 작성한 순서대로 전개하려면 for문 사용
        console.log(values[k]);
    }