[JavaScript] 스프레드 구문 (... 문법) 사용법

모던 JavaScript에서 스프레드 구문은 배열과 객체를 효율적으로 다루는 방법을 제공한다. 이 글은 스프레드 구문을 깊이있게 알아보고, 그 사용법을 설명하고 흔히 발생하는 오류를 해결한다.

스프레드 구문 이해하기

JavaScript에서 스프레드 구문(...)은 배열 표현식이나 문자열과 같은 순회 가능한 요소를 확장하여 함수 호출의 인자나 배열 리터럴의 요소가 예상되는 곳에 사용할 수 있다.

배열에서의 기본 사용법

다음 예제를 살펴보자

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

[1, 2, 3, 4, 5]

여기서는 두 배열을 병합하기 위해 스프레드 구문을 사용했다.

객체에서의 기본 사용법

스프레드 구문은 객체에도 적용할 수 있다. 이를 통해 객체의 복사, 병합 및 속성 재정의가 가능하다.

객체 복사하기

다음 예제를 살펴보자:

const user = { name: 'John', age: 25 };
const copiedUser = { ...user };
console.log(copiedUser);

{ name: 'John', age: 25 }

여기서는 스프레드 구문을 사용하여 user 객체의 얕은 복사본을 생성했다.

객체 병합하기

스프레드 구문을 사용하여 객체를 병합할 수 있다. 속성이 겹치면 오른쪽(마지막) 속성이 우선된다.

const user = { name: 'John', age: 25 };
const details = { age: 26, city: 'New York' };
const mergedObject = { ...user, ...details };
console.log(mergedObject);

{ name: 'John', age: 26, city: 'New York' }

details 객체의 age 속성이 user 객체의 age 속성을 재정의했다.

함수 인자에서의 스프레드 구문과 배열

함수 인자에서 사용될 때, 이는 나머지 매개변수처럼 동작한다.

예제:

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));

6

numbers 배열은 sum 함수의 별도의 인자로 확장되었다.

함수 인자에서의 스프레드 구문과 객체

스프레드 구문을 함수 인자와 함께 사용하면, 객체의 속성을 동적으로 별도의 인자로 전달할 수 있다.

사용자 세부 정보를 인자로 받는 함수가 있다고 가정해보자:

function displayUser(name, age, city) {
  console.log(`이름: ${name}, 나이: ${age}, 도시: ${city}`);
}

const user = { name: 'John', age: 26, city: 'New York' };
displayUser(...Object.values(user));

이름: John, 나이: 26, 도시: New York

위의 예에서는 Object.values()를 사용하여 user 객체에서 값을 추출하고 displayUser 함수의 인자로 확장했다.

흔히 발생하는 오류와 그 해결 방법

스프레드 구문과 관련된 가장 흔한 오류 중 하나는 아래와 같다.

a spread argument must either have a tuple type or be passed to a rest parameter.

이 오류는 스프레드 구문이 적절하지 않은 곳에서 사용될 때 주로 발생한다.

오류 해결하기

객체를 배열로 확장하려고 시도한다고 가정해보자. 이럴 경우 위의 오류가 발생한다. 확장하려는 것이 순회 가능한지 확인하여 이를 해결해보자.

const obj = {a: 1, b: 2};
const arr = [...obj]; // 이것은 오류를 발생시킵니다

올바른 방법

const obj = {a: 1, b: 2};
const arr = {...obj};
console.log(arr);

{a: 1, b: 2}

스프레드 구문을 JavaScript에서 이해하고 활용하는 것은 간결하고 효율적인 코드를 작성하기 위해 중요하다. 이를 통해 배열과 객체 조작이 더 직관적으로 이루어진다.

자주 묻는 질문

1. JavaScript에서 스프레드 구문의 주요 목적은 무엇입니까?
   스프레드 구문은 인자나 요소가 예상되는 곳에서 순회 가능한 것을 확장할 수 있게 해준다.
2. 두 객체를 병합하기 위해 스프레드 구문을 사용할 수 있나요?
   네, 두 객체의 속성을 새로운 것으로 병합하기 위해 스프레드 구문을 사용할 수 있다.
3. 스프레드 구문은 rest parameter와 같나요?
   둘 다 ... 구문을 사용하지만, 목적이 다르다. 스프레드 구문은 배열을 개별 요소로 "확장"하는 반면, 나머지 매개변수는 여러 요소를 배열로 모읍니다.
4. 순회 불가능한 것을 확장할 수 있나요?
   아니오, 순회 불가능한 것을 확장하려고 시도하면 오류가 발생한다. 배열이나 문자열과 같은 순회 가능한 것을 확장하려고 시도하는지 확인해보자.
5. 객체를 배열로 어떻게 확장하나요?
   객체를 직접 배열로 확장하려고 하면 오류가 발생한다. 대신, 객체를 다른 객체로 확장하거나 스프레드 구문을 사용하기 전에 객체를 순회 가능한 것으로 변환해보자.