[ONEBITE-REACT] JS 심화 - Spread 연산자 & Rest 매개변수

Spread 연산자

의미

스프레드 연산자는 배열이나 객체를 펼쳐서 개별 오소로 분리하는 연산자이다.
스프레드 연산자는 주로 여러개의 배열이나 객체를 복사하거나 하나로 합칠 때 사용한다.

예를 들어 아래와 같은 두 개의 배열이 있는데, arr1을 arr2의 요소 중 4와 5사이, 즉 arr2 배열의 0번 인덱스와 1번 인덱스 사이에 넣고 싶다면 원래대로라면 이렇게 코드를 작성할 수 있다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// 정석적인 방법대로 추가
let arr2 = [4, arr1[0], arr1[1], arr1[2], 5, 6];
console.log(arr2); // [4, 1, 2, 3, 5, 6]

그런데 배열이라는 것은 원래 값을 유동적으로 바꾸기 위해서 사용하는 것이기 때문에 나중에 arr1의 요소 중 하나가 삭제되거나 수정해야 할 때 번거롭다.
이럴 때 spread 연산자를 사용하면 arr1이 어떻게 수정되든 바로 반영할 수 있다.

기본형

...변수명

배열과 객체에서 모두 동일하다.

사용법

위의 예시를 spread 연산자를 사용하면 이렇게 사용할 수 있다.

배열에서의 사용

let arr1 = [1, 2, 3];
let arr2 = [4, ...arr1, 5, 6]
console.log(arr2); // [4, 1, 2, 3, 5, 6]

객체에서의 사용

let obj1 = {
    a: 1,
    b: 2,
    c: 3,
}

let obj2 = {
    d: 4,
    ...obj1,
    e: 5,
    f: 6,
}
console.log(obj2); // {d: 4, a: 1, b: 2, c: 3, e: 5, f: 6}

함수에서의 사용

let arr1 = {
    a: 1,
    b: 2,
    c: 3,
}

function myFunction(f1, f2, f3) {
    console.log(f1, f2, f3)
}

myFunction(arr1); // {a: 1, b: 2, c: 3}

Rest 매개변수 (Rest Parameter)

Rest는 우리말로 나머지라는 뜻을 가지고 있다.
Rest 매개변수는 함수를 정의할 때 일련의 인수를 배열로 받을 수 있는 매개변수이다.
주의 객체 아님[]. 배열을 넣을 수 있는 것임.{}
사용법은 함수의 매개변수를 정의할 때 (...매개변수명)으로 정의하면 된다.

기본형

function 함수명(...매개변수명) {}

사용법

let arr1 = [1, 2, 3];

function myFunction(another, ...rest) {
  console.log(rest);
  console.log(another);
}

myFunction(...arr1); // [2. 3] // 1

rest 매개변수는 객체가 아닌 배열을 함수 내부로 풀어쓸 수 있는 기능이다.
위의 코드를 보면 arr1이라는 배열을 하나 만들었다.
그리고 myFunction이라는 함수를 정의하고 매개변수로 another라는 매개변수와 ...rest라는 매개변수를 정의했다.
이 함수를 실행하면 로그를 두 줄 출력하도록 하는데 rest라는 매개변수의 값을 출력하고 another라는 매개변수의 값을 출력하도록 했다.
따라서 [2, 3]이라는 배열이 담긴 rest 매개변수와 1이라는 값이 담긴 another라는 매개변수가 출력된다.

이유는 매개변수를 두 개를 담았는데 ...rest 매개변수 하나일 경우 arr1 배열의 1, 2, 3 모든 값이 rest 변수에 값으로 초기화되는데,
앞에 another라는 매개변수를 하나 더 추가해줬기 때문에 0번 인덱스는 이 변수로 저장이 되고, 나머지인 [2, 3]만 rest에 초기화되기 때문이다.

참고로 콘솔에 출력할 때 console.log(rest)가 아닌 ...rest라고 적게되면 콘솔에서도 해당 배열이 풀어져서 출력된다. 즉 [2, 3]과 같은 배열 형태가 아니라 2, 3으로 출력되어 array 타입이 아닌 number 타입으로 출력된다.

주의사항

rest 매개변수 앞에는 다른 매개변수를 넣어도 되는데, 뒤에는 다른 매개변수를 추가할 수 없다.
즉, rest 매개변수가 함수의 매개변수 중 가장 마지막에 와야 한다는 의미이다.
이유는 rest 매개변수의 의미가 myFunction(another, ...rest)와 같은 매개변수가 있을 때 another 뒤에 오는 모든 변수를 배열로 저장한다는 의미이기 때문에 이 뒤의 모든 배열은 이미 저장되어, 더 저장할 배열 자체가 존재하지 않게 되기 때문이다.