Spread 연산자와 Rest 연산자

개발하다 종종 '...' 표현을 사용하여 개발한 경험이 있는데 대략적으로 배열이나 객체여 펼쳐서 복사하여 사용하는 정도로만 알고 사용했었다 문뜩 이 표현에 대한 정확한 용어와 의미를 알기 위해 정리 하려고 한다.

 

Spread 연산자 (...):

• 객체나 배열의 속성 혹은 요소를 "펼쳐서" 복사합니다.
• 주로 배열이나 객체를 복제하거나 속성을 합칠 때 사용됩니다.:

  • const obj1 = { a: 1, b: 2 };
    const obj2 = { ...obj1, c: 3 }; // obj2는 { a: 1, b: 2, c: 3 }
    const arr1 = [1, 2, 3];
    const arr2 = [...arr1, 4]; // arr2는 [1, 2, 3, 4]

  • React 컴포넌트에서 props를 다른 컴포넌트로 전달할 때 자주 사용됩니다:

  • <MyComponent {...props} />

Rest 연산자 (...):

• 함수의 매개변수에서 사용될 때, 개별 매개변수를 배열로 결합합니다.
• 나머지 매개변수(rest parameters)라고도 불립니다.
• 객체에서의 rest

• const purpleCuteSlime = {
    name: '이름',
    attribute: '요소',
    color: '색상'
  };
  
  const { color, ...cuteSlime } = purpleCuteSlime;
  console.log(color); //색상
  console.log(cuteSlime);// {name:'이름',attibute:'요소'}
  
  const { attribute, ...slime } = cuteSlime;
  console.log(attribute); // 요소
  console.log(slime); // {name:이름}

• 배열에서의 rest

• const numbers = [0, 1, 2, 3, 4, 5, 6];
  
  const [one, ...rest] = numbers;
  
  console.log(one); // 0
  console.log(rest); // [1,2,3,4,5,6]

• 함수에서의 rest 

• function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
  }
  sum(1, 2, 3); // 6을 반환

 

Spread 연산자는 객체나 배열의 속성을 확장하거나 복사할 때 유용하며, Rest 연산자는 함수가 받을 수 있는 변수의 개수를 동적으로 처리할 수 있게 해줍니다. React에서 이러한 표현들은 주로 props의 전달, 상태 관리, 또는 다양한 객체와 배열의 조작에 사용됩니다.