📚 spread

spread 라는 단어가 가지고 있는 의미는 '펼치다','퍼뜨리다'입니다. 즉, 객체 혹은 배열을 펼칠수있습니다.
스프레드 문법을 사용할 수 있는 대상은 이터러블 객체이면 전개 구문을 사용할 수 있습니다.

예시로 다음과 같은 객체들이 있다고 가정해봅시다.

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  name: '슬라임',
  attribute: 'cute'
};

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

위 코드에서의 핵심은 기존의 것을 건들이지 않고, 새로운 객체를 만든다는 것입니다. 이러한 상황에 사용할 수 있는 유용한 문법이 바로 spread 입니다. 밑에 코드에서 … 문자가 바로 spread 연산자 입니다.

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

다음은 배열입니다.

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals);
console.log(anotherAnimals);

기전 animals를 건들이지 않으면서 새로운 anotherAnimals 배열에 animals 가 가지고 있는 내용을 모두 집어넣고, ‘비둘기’ 라는 항목을 추가적으로 넣었습니다.

아래와 같이 이터러블 객체 여러 개를 전달하는 것도 가능합니다.

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(...arr1, ...arr2) ); // 8

아래와 같이 스프레드 문법을 평범한 값과 혼합해서 사용도 가능합니다.

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

아래와 같이 전개 구문은 배열을 합칠 때도 활용 가능합니다.

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2];

alert(merged); // 0,3,5,1,2,8,9,15 (0, arr, 2, arr2 순서로 합쳐집니다.)

문자열을 문자 배열로 변환 시켜 보겠습니다 !

let str = "Hello";

alert( [...str] ); // ["H", "e", "l", "l", "o"]

전개 구문은 for..of 와 같은 문자열을 구성하는 문자가 반환됩니다.

Array.from은 이터러블 객체인 문자열을 배열로 바꿔주기 때문에 Array.from을 사용해도 동일한 작업을 할 수 있습니다.

let str = "Hello";

// Array.from은 이터러블을 배열로 바꿔줍니다.
alert( Array.from(str) ); 

📚 rest 연산자

Rest 연산자는 나머지 값을 합치는 느낌으로 사용됩니다.

배열에서의 rest

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, ...rest] = numbers;

console.log(one);
console.log(rest); // [1, 2, 3, 4, 5, 6]

밑에 코드를 봐볼까요 ?

function myFunc(a, b, ...rest) {
  console.log(a, b);
  console.log(rest);
}

myFunc(1, 2, 3, 4, 5); // 1 2 / [3, 4, 5]

함수 myFunc의 인자 목록에서 …rest 는 첫번째와 두번째 인자를 제외한 나머지 인자들을 배열 형태로 rest 변수에 저장합니다.

객체에서의 rest

const user = { name: "John", age: 30, city: "New York", job: "developer" };
const { name, age, ...details } = user;

console.log(name); // John
console.log(age); // 30
console.log(details); // { city: "New York", job: "developer" }

객체 리터럴에서 ...rest는 특정 속성들을 제외한 나머지 속성들을 새로운 객체 details에 담습니다.