[Javascript] 스프레드 문법

yes·2022년 4월 11일

Javascript

목록 보기

9/13

Javscript를 사용하는 개발자라면 누구나 스프레드 문법에 대해서 들어보고 현재 사용하고 있을 것이다.
나 또한 스프레드 문법과 디스트럭처링 할당을 사용해왔다. 하지만, 완벽하게 이해하지 못하고 어설프게 사용하고 있는 것 같아서 이론적으로 정리하면서 마스터해보겠다😎

1. 스프레드 문법

ES6에서 도입된 스프레드 문법 ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.
스프레드 문법을 사용할 수 있는 대상은 Array, Strin, Map, Set, DOM 컬렉션, arguments와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다.

...[1, 2, 3]은 이터러블인 배열을 펼쳐서 요소들을 개별적인 값들의 목록 1 2 3으로 만든다. 이때 1 2 3은 값이 아니라 값들의 목록이다. 즉, 스프레드 문법의 결과는 값이 아니다. 이는 스프레드 문법 ...이 피연산자를 연산하여 값을 생성하는 연산자가 아님을 의미한다. 따라서 스프레드 문법의 결과는 변수에 할당할 수 없다.

예전에 이 내용을 제대로 인지하지 못하고 변수에 할당해서 에러가 났던 경험이 있다.
어떻게 보면 당연한 결과이지만 다시 한 번, 스프레드 문법의 결과는 값이 아니기 때문에에 변수에 할당할 수 없다.

이처럼 스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.

함수 호출문의 인수 목록
배열 리터럴의 요소 목록
객체 리터럴의 프로퍼티 목록

1-1 함수 호출문의 인수 목록에서 사용하는 경우

요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후, 이를 함수의 인수 목록으로 전달해야 하는 경우가 있다.

const arr = [1, 2, 3];
console.log(...arr) // 1 2 3
const max = Math.max(arr); // -> NaN
const max = Math.max(...arr); // 3

예제를 한 번 보면 바로 이해가 될 것이다~~

1-2 배열 리터럴 내부에서 사용하는 경우

예제를 통해 비교해보면서 슥슥 넘어가보자

1-2.1 concat

// ES5
var arr = [1, 2].concat([3, 4]);
console.log(arr); // [1, 2, 3, 4]
// ES6
const arr = [...[1, 2], ...[3, 4]];
console.log(arr); // [1, 2, 3, 4]

1-2.2 splice

// ES5
var arr1 = [1, 4];
var arr2 = [2, 3];

// 세 번째 인수 arr2를 해체하여 전달해야 한다.
// 그렇지 않으면 arr1에 arr2 배열 자체가 추가된다.
arr1.splice(1, 0, arr2);

// 기대한 결과는 [1, [2, 3], 4]가 아니라 [1, 2, 3, 4]다.
console.log(arr1); // [1, [2, 3], 4]

// ES6
const arr1 = [1, 4];
const arr2 = [2, 3];

arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]

1-2.3 배열 복사

// ES5
var origin = [1, 2];
var copy = origin.slice();

console.log(copy); // [1, 2]
console.log(copy === origin); // false

// ES6
const origin = [1, 2];
const copy = [...origin];

console.log(copy); // [1, 2]
console.log(copy === origin); // false

이떄 원본 배열의 각 요소를 얕은 복사하여 새로운 복사본을 생성한다.

1-3 객체 리터럴 내부에서 사용하는 경우

// 스프레드 프로퍼티
// 객체 복사(얕은 복사)
const obj = { x: 1, y: 2 };
const copy = { ...obj };
console.log(copy); // { x: 1, y: 2 }
console.log(obj === copy); // false

// 객체 병합
const merged = { x: 1, y: 2, ...{ a: 3, b: 4 } };
console.log(merged); // { x: 1, y: 2, a: 3, b: 4 }