스프레드 연산자 예제

// spread operator 스프레드 연산자 ... 펼칠수있다.
// 펼침 연산자는
// 배열이나 문자열 등을 풀어서 요소 하나 하나로 전개 시킬 수 있다.
//...만 붙이면 자유롭게 그 객체를 펼칠 수 있어서 여러 곳에서 유용하게 사용할 수 있습니다.
///////////////////////////////////////////////////////////////

  //       함수 호출 시 인자로 넘길 때
  // function mul(x, y, z){
  //   return x * y * z;
  // }
  // const arr = [1, 3, 5];

  // const result1 = mul.apply(null, arr); // (1) apply() 방법
  // const result2 = mul(...arr); // (2) spread operator 방법

  // console.log(result2); // 15
  // 배열 각각의 엘리먼트를 인자로 넘기고 싶을 때, ...가 없었을 경우에는 위의 (1) apply()를 사용해야 했습니다.

  // 하지만 ...을 사용하면 간편하게 [1, 3, 5]가 전개되어 함수 인자의 x, y, z에 각각 1, 3, 5가 넘겨지게 됩니다.
  /////////////////////////////////////////////////////////////////////////////////

  //배열 리터럴의 전개
  //       const arr1 = [0, 1, 2];
  // const arr2 = [3, 4, 5];

  // // (1) 배열 복사
  // const arr3 = [...arr1]; // arr3은 [0, 1, 2]

  // // (2) 배열에 추가 요소로 넣기
  // const arr4 = [1, 2, ...arr2, 9, 10]; // arr4는 [1, 2, 3, 4, 5, 9, 10]

  // // (3) 두 배열 이어 붙이기
  // const arr5 = [...arr1, ...arr2]; // [0, 1, 2, 3, 4, 5];
  // Array.prototype 객체의 메서드들(apply, unshift..)을 이용해야 했던 부분들을 간편하게 ... 연산자로 대체할 수 있게 되었습니다.

  //////////////////////////////////////////////////////////////////////////////////

  //       Object Spread Properties - ES2018에서 새롭게 추가

  // 어떤 한 객체의 프로퍼티를 다른 새로운 객체에 복사할 때에도 ...가 유용하게 사용됩니다.

  // 사실 Object 자체는 iterable 객체가 아니며, 아래와 같이 사용하면 에러가 발생합니다.

  // const obj = { name: 'John', age: '20' };
  // console.log(...obj); // TypeError: obj is not iterable

  // 위와 같은 방식이 아니라, ES2018(ES9) 에서는
  //객체의 프로퍼티를 전개할 수 있도록 지원하고 있으며
  //아래와 같이 객체 내부에서 사용할 수 있습니다.

  // const obj1 = { name: 'John', age: '20' };
  // const obj2 = { name: 'Tom', age: '23' };

  // const clonedObj1 = { ...obj1 };
  // //Object { name: 'John', age: '20 }

  // const mergedObj = { ...obj1, ...obj2 };
  // // Object { name: 'John', age: '20', name: 'Tom', age: '23' }

  // 위에서 clonedObj1은 obj1의 프로퍼티만 복사받은 객체입니다.

  // 따라서 두 객체의 참조값 자체는 다릅니다.

  // console.log(obj1 === clonedObj1); // false
  // 이러한 ... 연산자의 성질은 상태의 불변성(immutable) 유지에도 응용됩니다.

  // (불변성은 그 내용이 중요해서 별도의 포스팅으로 다루겠지만,
  //간단히 말해서 기존에 메모리에 담겨 있던 값이 다시 변경되지 않는 것을 말하며,
  //이 불변성을 유지함으로써 상태 변화를 빠르게 탐지할 수 있습니다.)

  // 예를 들어 obj1의 name 프로퍼티만 변경하고 싶은 경우, 아래와 같이 사용하면 됩니다.

  // const obj1 = { name: 'John', age: '20', flag: 'true', foo: 'bar' };
  // const newObj = { ...obj1, name: 'Alice' };
  // // Object { name: 'Alice', age: '20', flag: 'true', foo: 'bar' }

  // console.log(obj1 === newObj); // false
  // newObj의 선언부를 확인해 보면, 객체 내부에서 obj1의 프로퍼티를 전달받고
  //그 뒤에 name: 'Alice'를 적어서 name의 값만 바꾸고 있습니다.

  // 이렇게 하면 복사받은 값에서 이처럼 뒤에 적은 name 값만 변경(덮어씌우는)하는 효과를 가집니다.

  // 그리고 obj1과 newObj는 서로 다른 객체가 됩니다.

  // 만약 이것을 name 상태값이 변했다는 상황으로 대입해 본다면,
  //이처럼 이전 상태를 가진 객체(obj1)와 다음 상태를 가진 객체(newObj)가
  //서로 다르다는(false) 성질을 활용해 상태가 변화했음을 감지할 수 있게 됩니다.

  // 또한 기존의 obj1은 변경하지 않았으므로 불변성을 유지한 것입니다.

  //
  ////////////////////////////////////////////////////////////////
  ///////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////

  //실습

  const arr1 = [1, 2, 3, 4, 5];
  const str = "string";
  console.log(...arr1); // 1 2 3 4 5
  console.log(...str); // "s" "t" "r" "i" "n" "g"

  const list = [1, 2, 3];
  list2 = [...list]; // list와 똑같은 배열을 담은 새로운 배열 생성 즉,구성은 같고 메모리주소는 다르다.즉, 서로 다른 배열임!
  console.log(list2); //123

  list2 = [...list, 4, 5, 6]; // 이뮤터블(불변성)(상태관리할때 많이씀), 즉,원본(list)은 유지하면서, 새로운배열(list2)을 만들때 쓴다.
  console.log(list2); //123456

  const divs = document.querySelectorAll("div"); //모든 div 가지고와.
  console.log(divs); // 노드list형태로, 유사배열로 가지고와서
  [...divs]; //펼쳐서 진짜배열로 생성

  const foods = [..."abcdef"];
  console.log(foods); //펼쳐짐

  for (let item of foods) {
    console.log(item);
  } //열거 가능함 즉, 스프레드연산자 를 for of 에 쓸 수 있다.
  // 스프레드 연산자는 Symbol.iterator 즉, 이터레이터 , 열거 가능한 객체에 쓸 수 있다.

  /////////////////////////////////////////////////////

  // 스프레드 연산자를 Set과 함께 쓰면, 각각 펼쳐져서 나열되면서 중복도 제거해 준다.
  //Set 사용가능 ,참고로 Set은 중복 제거 됨 , Set은 집합개념 객체, 인덱스가없음 , Set자료구조는 이터러블임 ,이터러블 오브젝트임.
  // 셋 쓰면 객체집합로 리턴된다.
  const newSet = [...new Set([...foods])];
  console.log(newSet);

  const foodList = [...foods];
  const foodSet = new Set(foodList);
  console.log(foodSet);

  const arr = [...foodSet];
  console.log(arr);

  for (item of foodSet) {
    console.log(item);
  }