[JavaScript] ... 스프레드(spread) 문법

자바스크립트에서 스프레드 문법(spread syntax)은 배열이나 객체를 펼쳐서 개별 요소로 분리하는 문법이다.

주로 배열과 객체의 결합, 복사, 함수 호출 시 인수 전달 등 다양한 상황에서 사용된다.

---

기본 스프레드 문법

스프레드 문법은 ... 연산자를 사용하여 배열이나 문자열을 개별 요소로 분해하여 결합할 수 있다. 예시를 들어 보자.

const arr = [1, 2, 3];
const newArr = [...arr];
console.log(newArr); // 출력 결과: [1, 2, 3]

위 코드에서 [...arr]은 배열 arr을 펼쳐서 새로운 배열 newArr에 복사한다. 따라서 newArr은 [1, 2, 3]과 동일한 요소를 가지게 된다.

 

문자열도 가능하다.

const str1 = "javascript book";
const str2 = [...str1];
console.log(str2);
// 출력 결과 : ["j", "a", "v", "a", "s", "c", "r", "i", "p", "t", " ", "b", "o", "o", "k"];

스프레드 문법을 사용하면 0개 이상의 인수(함수 호출용) 또는 원소(배열 리터럴용)가 예상되는 위치에서 배열 표현식 또는 문자열과 같은 이터러블(Iterable) 항목을 확장하거나 0개 이상의 키/값(객체 리터럴용)이 예상되는 위치에서 객체 표현식을 확장할 수 있다.

 

---

배열의 결합

배열과 배열을 결합해보자.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // 출력 결과: [1, 2, 3, 4, 5, 6]

위 코드에서 [...arr1, ...arr2]는 arr1과 arr2 배열을 펼쳐서 새로운 배열 mergeArr에 결합한다.

 

아래는 문자열을 결합한 코드이다.

const str1 = "Hello";
const str2 = "World";

const newString = [...str1, ...str2].join("");
console.log(newString); // 출력 결과: "HelloWorld"

위 코드에서 [...str1, ...str2]는 문자열 str1과 str2를 결합하여 새로운 배열을 생성한다. join("") 메소드를 사용하여 배열의 각 요소를 빈 문자열로 결합하여 "HelloWorld"라는 새로운 문자열을 생성할 수 있다.

---

배열의 복사

스프레드 문법은 배열의 복사본을 생성할 때 매우 유용하다. 우선 배열을 복사하는 원리를 살펴보자.

const veggie = ["tomato", "cucumber", "beans"];
const newVeggie = veggie;
veggie.push("peas");

console.log(veggie); // 출력 결과 : ["tomato", "cucumber", "beans", "peas"]
console.log(newVeggie); // 출력 결과 : ["tomato", "cucumber", "beans", "peas"]

위 코드에서는 기존 배열(veggie)을 수정하면 새 배열(newVeggie)도 변경된다. 이것은 실제로 복사본을 만든게 아니고 새 배열은 단순히 이전 배열을 참조하고 있기 때문이다.

 

다음은 ES5 및 오래된 버전에서 배열의 복사본을 만드는 방법이다.

// 기존 버전
const veggie = ["tomato", "cucumber", "beans"];
const newVeggie = [].concat(veggie); // 빈 배열을 새로 생성하고 기존 배열의 값을 새 배열에 이어 붙인다.
veggie.push("peas");

console.log(veggie); // 출력 결과 : ["tomato", "cucumber", "beans", "peas"]
console.log(newVeggie); // 출력 결과 : ["tomato", "cucumber", "beans", "peas"]

스프레드 문법을 사용하면 아래와 같이 동일한 결과를 얻을 수 있다.

const veggie = ["tomato", "cucumber", "beans"];
const newVeggie = [...veggie];
veggie.push("peas");

console.log(veggie); // 출력 결과 : ["tomato", "cucumber", "beans", "peas"]
console.log(newVeggie); // 출력 결과 : ["tomato", "cucumber", "beans", "peas"]

 

 

위 코드에서는 변수 newVeggie를 배열 veggie의 복사본으로 만들기 위해, 우선 newVeggie에 배열을 할당하고 그 내부에 스프레드 연산자를 통해 veggie 변수의 모든 원소를 넣었다.

 

---

함수 호출시 스프레드 문법 사용

함수 호출 시 인자로 스프레드 문법을 사용하여 배열을 펼칠 수도 있다. 이 방법을 통해 동적으로 길이가 변하는 배열을 함수에 전달하거나, 기존 배열을 복사하면서 추가 요소를 포함시킬 수 있다. 간단한 예시를 보자.

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers);
console.log(result); // 출력 결과: 6

위 코드에서 sum 함수는 세 개의 인자를 받아 합을 반환한다. numbers 배열을 스프레드 문법(...numbers)을 사용하여 함수 sum에 전달하면 배열의 요소들이 펼쳐져서 a,b,c의 인자로 전달된다. 전달된 인자들은 sum 함수 내부에서 1 + 2 + 3의 값인 6으로 반환되어 출력된다.

 

아래는 기존에 사용하던 함수 호출 방식과 스프레드를 사용해서 함수 호출을 하는 코드이다.

function doStuff(x, y, z) {
    console.log(x + y + z);
}
var args = [0, 1, 2];

// 기존 방식으로 함수 호출, 인수 전달
doStuff.apply(null, args);

// 스프레드 문법으로 함수 호출, 인수 전달
doStuff.(...args); // 3 (0 + 1 + 2)
console.log(args); // 출력 결과 : [0, 1, 2]

위 코드에서 doStuff 함수는 3개의 매개변수를 받는다. doStuff 함수를 호출할 때 args 배열을 ...args와 같이 써서 스프레드 연산자와 함께 함수에 전달할 수 있다. 이렇게 하면 굳이 .apply() 사용에 의존하지 않아도 되고, 더 간단하게 사용할 수 있다.

 

---

객체에서 스프레드 문법 사용

객체에서 스프레드 문법은 배열과 마찬가지로 ... 기호를 사용해서 객체를 펼친다. 객체를 이용한 스프레드 문법은 ES2018에서 도입되었다.

const obj = { x: 1, y: 2 };
const newObj = { ...obj };
console.log(newObj); // 출력 결과: { x: 1, y: 2 }

위 코드에서 {...obj}는 객체 obj를 펼쳐서 새로운 객체 newObj에 복사한다. newObj는 {x : 1, y : 2}와 동일한 속성을 가지게 된다.

 

또한, 객체를 병합할 때도 스프레드 문법을 사용할 수 있다.

const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 출력 결과: { x: 1, y: 2, z: 3 }

위 코드에서 {...obj1, ...obj2}는 obj1과 obj2 객체를 펼쳐서 새로운 객체 mergedObj에 병합한다.

 

스프레드 문법은 배열과 객체의 요소를 효율적으로 처리하는데 유용하며, 코드의 가독성과 유지 보수성을 향상 시킬 수 있다.

---

 

레스트 매개변수

레스트(rest) 문법은 점 3개로 이뤄졌다는 점에서 스프레드 문법과 똑같지만 기능적으로는 그 반대이다.

스프레드는 배열을 확장하는 반면, 레스트는 여러 원소를 하나의 원소로 압축한다.

const runners = ["Son", "Kevin", "Messi", "Saka"];
const [first, second, ...losers] = runners;

console.log(...losers); // 출력 결과 : Messi Saka

위 코드에서 처음 두 값은 first와 second 변수에 저장하고, 나머지 원소는 레스트 문법을 사용하여 losers 변수에 담았다. 마지막에는 이 배열을 스프레드 문법으로 풀어서 console.log()에 넘겨 출력한다.