1. spread, Array spread, String spread, Object spread, push(...spread)

spread

Syntax: [...iterable]

• [...iterable]

  • [...처럼 [ ]안에 점(.) 3개를 작성하고 이어서 이터러블 오브젝트를 작성합니다.

  const list = [21, 22];
  console.log([11, ...list, 12]); [11,21,22,12]
  
  const obj = {key: 50};
  console.log({...obj}); // {key: 50}
  

• 이터러블 오브젝트를 하나씩 전개합니다.

• {key: value}의 Object가 이터러블 오브젝트는 아니지만 전개가 가능합니다.

Array spread

• spread 대상 배열을 작성한 위치에 엘리먼트 단위로 분리및 전개합니다.

• Array spread 작성 형태

  const one = [21, 22];
  const two = [31, 32];
  const result = [11, ...one, 12, ...two];
  console.log(result);//[11,21,22,12,31,32];
  consoel.log(result.length);//6
  

• 값이 대체되지 않고 전개됩니다.

  const one = [21, 22];
  const result = [11, 12, ...one];
  console.log(result);//[11, 12, 21, 22];
  console.log(result.length);//4
  

  ⇒ 만일 값이 대체되었다면 [11, 12, [21, 22]]로 이차원 배열이 되고 length는 3이되었을 것입니다.

String spread

• spread 대상 문자열을 작성한 위치에 문자 단위로 전개합니다.

• String spread 작성 형태

  const target = "ABC";
  console.log([...target]);//[A, B, C]
  

  ⇒ target의 ABC를 문자 단위로 분리하여 전개합니다.

Object spread

• spread 대상 Object를 작성한 위치에 프로퍼티 단위로 전개합니다.