스프레드 연산자(Spread Operator)와 REST 매개변수

 

스프레드 연산자는 '...'을 사용하는 연산자로 배열, 객체, 함수를 다루는데 편리함을 제공해줍니다.

 

 

 

전개 구문 - JavaScript | MDN

 

 

 

---

 

Spread 연산자의 기본 사용형태

... 복사하려는 변수(참조하려는 변수)

 

Spread Operator - 전개 연산자

 

 

 

Spread 연사자를 사용하면 배열, 객체, 문자열 등을 분리하거나 병합하거나, 복사 등이 가능하며 이를 코드와 함께 정리해보겠습니다.

 

Spread 연산자를 사용한 배열 복사

const numberArr1 = [1, 2, 3];
const numberArr2 = [...numberArr1, 4, 5, 6];

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

위의 코드처럼 복사하고자 하는 변수나 상수를  앞에 '...'을 붙여주면 복사하고자 하는 배열의 값들이 담기게 됩니다.

 

즉, numberArr1의 배열을 복사하여 numberArr2의 배열에 복사한 값을 넣고자 하는 곳에 입력하였습니다.

 

 

 

Spread 연산자를 사용한 배열의 개별 요소 분리

const strArr1 = "STARBUCKS";
const strArr2 = [...strArr1];

console.log(strArr2); //['S', 'T', 'A', 'R', 'B', 'U', 'C', 'K', 'S']

위의 코드처럼 문자열을 복사할 경우 개별의 요소로 분리하여 배열에 저장을 하게 됩니다.

 

결국에는 위의 배열 복사 예시와  같으며, Spread 연산자를 사용하면 값들을 개별 요소로 분리하여 복사하여 값을 저장한다고 생각하시면 될 것 같습니다.

 

for of 반복문처럼 작동한다고 생각하시면 이해에 도움이 될 것 같습니다.

 

for - of and for - in loop

 

 

Spread 연산자를 사용한 배열 병합

const numberArr1 = [1, 2, 3];
const numberArr2 = [4, 5, 6, 7];
const numberArr = [...numberArr1, ...numberArr2];

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

위의 코드처럼 두 개의 배열을 다른 배열에 복사하여 사용할 수 있습니다. 

 

 

 

 

Spread 연산자 작동

let numberArr1 = [1, 2, 3];
let numberArr2 = [4, 5, 6, 7];
let numberArr = [...numberArr1, ...numberArr2];

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

numberArr1.push(0);

console.log(numberArr1); // [1, 2, 3, 0]
console.log(numberArr); // [1, 2, 3, 4, 5, 6, 7]

원래 배열의 경우 참조값에 해당하기 때문에 참고하고자 하는 배열의 값이 바뀌면, 참조하고 있는 배열의 값도 바뀌게 됩니다.

 

하지만 Spread 연산자를 사용하는 것은 참조하는 메모리 주소 값을 복사하는 것이 아닌 배열의 값을 복사해서 사용하는 것이기 때문에

 

위의 코드처럼 numberArr1의 배열 값을 수정해도 numberArr의 배열 값은 그대로를 유지합니다.

 

let personArr1 = [{ name: "SH", age: 28 }];
let personArr2 = [...personArr1];

personArr2[0].age = 30;

console.log(personArr1); // {name: 'SH', age: 30}

console.log(personArr2); // {name: 'SH', age: 30}

단, spread 연산자를 이용한 복사의 경우 shallow(얕은) 복사이기 때문에 배열 안에 객체가 있는 경우에는 객체는 복사된 것이 아닌 참조값을 유지하게 됩니다.

 

즉, 두 개의 변수는 객체에 대해 같은 참조값을 가지고 있기 때문에 둘 중 하나의 객체의 값을 수정하면 나머지 하나의 객체의 값도 변경되는 것입니다.

 

 

---

 

위의 Spread 연산자 형태를  함수의 매개변수 리스트 안에서도 사용이 가능하며 이를 Rest 매개변수라고 합니다.

 

Rest 매개변수를 사용하면 함수의 매개변수로 오는 값들을 모아서 배열에 집어넣게 되고, 이를 통해 보다 깔끔함 함수 표현이 가능해지게 됩니다.

 

Rest 매개변수 사용 기본 형태

const 상수명 = (...매개변수) => {
               // 함수 본문       
};


상수명(인자 값 1, 인자 값 2, 인자 값 3, 인자 값 4);

함수의 호출할 때 받은 인자 값을 Rest 매개변수로 넘겨주게 되는 이때 받는 인자 값들을 모아 배열에 넣게 되고

 

만들어진 배열을 함수 본문에서 사용하게 됩니다.

 

아래 코드로 예시로 작동 순서를 정리해보겠습니다.

const sumValue = (...number) => {
  let sum = 0;
  for (const num of number) {
    sum += num;
  }
  return sum;
};

console.log(sumValue(1, 5, 10, -3, 6, 10)); // 29 출력

1. 인자로 받은 1, 5, 10, -3, 6, 10을 매개변수 number로 넘깁니다.

2. 받은 인자를 [1, 5, 10, -3, 6, 10]로 배열로 만듭니다.

3. 만든 배열을 함수 본문에서 사용합니다.

 

즉, Rest 매개변수의 사용은 인자로 받은 값을 배열로 만들어 매개변수에 전달하는 것입니다.

 

 

 

주의하실 점은 Rest 매개변수의 사용은 매개변수 리스트의 마지막 자리에서 사용하여야 합니다.

 

(...number, a)로 사용할 경우 오른쪽 매개변수 a에 값이 전달되지 않기 때문입니다.

 

이는 Rest 매개변수는 들어오는 모든 인자를 배열로 만들기 때문입니다.