Spread / Rest 문법

이전에 array를 merge하는 방법에서 사용하고 포스팅 했었던 기억이 있다. (링크)

Rest 문법과 함께 다시 정리하려 한다.

🍫 Spread 문법

• 특정 배열 혹은 객체 값을 복제하는 문법이다.
• 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용된다.
• ... 을 이용해 표현한다.
• immutalbe 해서 기존 배열을 변형시키진 않는다. 바꾸고 싶으면 새로 할당해야한다.

function sum (x,y,z) {
  return x + y + z;
}

const numbers = [1,2,3]
sum(...numbers); // 6

🍫 Rest 문법

• 파라미터를 배열의 형태로 받아서 사용할 수 있다.
• 즉, 함수를 호출할 때 함수의 파라미터(매개변수)를 spread operator(...) 로 작성한 형태다.
• Rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 모아서 하나의 "배열"로 만들어준다.
• Spread 가 기존의 배열을 펼쳐서 표현한다면, Rest 는 배열이 아닌 개별 요소들을 하나의 배열로 만들어 준다.

function add(...rest) {
  let sum = 0;
  for (let p of rest) {
    sum += p;
  }
  return sum;
}

console.log(add(1,2,3)); // 6

위 예시에서 add라는 함수의 파라미터를 ...rest 로 설정했다.
add (1,2,3) 처럼 파라미터에 1,2,3 을 넣어주면
함수가 실행될 때 배열 [1,2,3] 으로 만들어준다.
그래서 for of 문 사용이 가능해져 위와 같은 결과가 나온다.
(참고 : 배열과 객체에서의 for of, for in)

다음과 같이 기본인자를 추가해서 사용하는 방법도 가능하다.

function addMul (method, ...rest) {
  if (method === 'add') {
    let sum = 0;
    
    for (let p of rest) {
      sum += p;
    }
    return sum;
  }
  
  if (method === 'multiply') {
    let mul = 1;
    
    for (let p of rest) {
      mul *= p;
    }
    return mul;
  }
}

console.log(addMul('add',1,2,3,4)); // 10
console.log(addMul('multiply', 1,2,3,4)); // 24

단, rest 파라미터는 항상 제일 마지막 파라미터로 있어야 한다.
function addMul( ...rest, method){ } 이런식으론 사용 불가능하다.

🍫 구조 분해 할당(Destructing)

• 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게끔 하는 Javascript 표현식이다.
• spread로 값을 해체한 뒤에, 개별 값을 변수에 새로 할당하는 과정이다.

배열 case

const [a, b, ...rest] = [1, 2, 3, 4, 5]

a; // 1
b; // 2
rest // [3,4,5]

rest라는 변수에 [ 3, 4, 5 ] 라는 배열이 할당 된다.

객체 case

const {a, b, ...rest} = {c :1,  a: 2, b: 3, d: 4, e: 5};

a; // 2
b; // 3
rest // { c:1, d: 4, e:5 }

rest라는 변수에 { c:1, d:4, e:5 } 라는 객체가 할당 된다.