Spread

const arr = [7, 8, 9];
const badNewArr = [1, 2, arr[0], arr[1], arr[2]];
console.log(badNewArr); // [1, 2, 7, 8, 9]
const newArr = [1, 2, ...arr];
console.log(newArr);// [1, 2, 7, 8, 9]

Spread 문법은 ...arr 이러한 형태로 쓰여진다. 위의 예제와 같이 배열안의 모든 정보를 풀어 원소 형태로 넣는 것을 말한다. 스프레드 문법은 비단 배열에서만 쓰이는 것은 아니다. 모든 iterable 형태의 자료구조에 모두 적용이 된다. 예를 들면, 모든 배열, 문자열, Map, Set등이 있다.

💡 Iterable : arrays, strings, maps, sets ❗️Not Objects

문자열에 spread 적용하기

const str = 'doodream';
const strArr = [...str];
console.log(strArr); //(8) ["d", "o", "o", "d", "r", "e", "a", "m"]

활용 예제

const testObj = {
  testFunc: function (name, age, gender) {
    console.log(name, age, gender);
  },
};
const tmp = ['doodream', 29, 'male'];
testObj.testFunc(...tmp);
//doodream 29 male

객체에 Spread 적용하기

• ES2018이후 객체에도 spread 문법을 적용할 수 있게 되었습니다.
• 배열과 다르게 순서는 중요하지 않습니다. 다만 똑같이 이중객체에 대해서 깊은 복사는 불가능합니다.

const testObj = {
  testFunc: function (name, age, gender) {
    console.log(name, age, gender);
  },
};
const testObj2 = {
  name: 'doodream',
  age: 28,
  ...testObj,
};
console.log(testObj2);
const testObjCopy = { ...testObj2 };
// {name: "doodream", age: 28, testFunc: ƒ}
testObjCopy === testObj2
  ? console.log(`it's not copy`)
  : console.log(`it's copy`);
// it's copy

• 복사후 이중객체의 속성을 수정했을때에 복사된 객체의 속성또한 같이 변하는 것을 볼수 있다. 깊은 복사가 이뤄지지 않는다는 것이다.

const testObj = {
  gender: 'male',
};

const testObj2 = {
  name: 'doodream',
  age: 28,
  testObj,
};

const testObjCopy = { ...testObj2 };
testObj2.testObj.gender = 'female';
console.log(testObjCopy.testObj.gender); // female
console.log(testObj2.testObj.gender); // female

testObjCopy === testObj2
  ? console.log(`it's not copy`)
  : console.log(`it's copy`);
// it's copy

배열에서의 ... rest

const testArr = [1, 2, 3, 4, 5];
const [a, b, ...other] = testArr;
console.log(a, b, other); // 1 2 (3) [3, 4, 5]

const testArr = [1, 2, 3, 4, 5];
const testArr2 = [6, 7, 8, 9];
const [a, , b, ...other] = [...testArr, ...testArr2];
console.log(a, b, other); // 1 3 (6) [4, 5, 6, 7, 8, 9]

위 예제들과 같이 중간에 건너 뛴 부분을 제외하고 other이란 변수에 배열이 압축이 된다. 이렇게 압축이 가능한 spread 문법을 rest라고 한다. rest는 항상 맨 마지막에 있어야 한다.

const testArr = [1, 2, 3, 4, 5];
const testArr2 = [6, 7, 8, 9];
const [a, , b, ...other, c] = [...testArr, ...testArr2];
console.log(a, b, other); 
//Uncaught SyntaxError: Rest element must be last element

위와 같이 Rest 관련 에러가 뜨기 때문이다. 따라서 이러한 이유 때문에 단한번의 한개의 데이터 구조화에서는 rest 문법이 딱 한번만 쓰일수 있다.

객체에서의 ... rest

const testObj = {
  gender: 'male',
};

const testObj2 = {
  name: 'doodream',
  age: 28,
  ...testObj,
};

const { name, ...rest } = testObj2;
console.log(name, rest);
// doodream, {age:28, gender: 'male'}

위 코드에서 처럼 spread 코드로 나머지 객체안에 있는 속성을 꺼내어 담을 수 있다.

function의 매개변수 전달

const testArr = [1, 2, 3, 4, 5];
const testObj = {
  gender: 'male',
};

const testObj2 = {
  name: 'doodream',
  age: 28,
  ...testObj,
};
const testFunc = (...number) => {
  console.log(number); 
};
testFunc(...testArr);// 1, 2, 3, 4, 5
testFunc(...testObj2); // [{name: "doodream", age: 28, gender: "male"}]

위 코드에서 보다시피 함수에서 매개변수로 ... 문법을 사용하면 해당 변수는 배열을 의미하게 된다. 여기에 객체를 전달해도 마찬가지이다.

const testObj = {
  gender: 'male',
};

const testObj2 = {
  name: 'doodream',
  age: 28,
  ...testObj,
};

const testArr = [1, 2, 3, 4, 5];
const testFunc = ({ name, ...number }) => {
  console.log(name); // doodream
  console.log(number);// {age: 28, gender: "male"}
};

testFunc(testObj2);

위 코드와 같이 객체안의 속성을 따로 분리하려면 {} 중괄호로 객체 분해 할당을 이용해야한다.