JavaScript

[자바스크립트] 스프레드 문법

문승주 2023. 10. 3. 17:50
반응형

본 내용은 이웅모 님의 "모던 자바스크립트 DeepDive" 책을 보고 정리한 내용입니다. 저작권 보호를 위해 책의 내용은 요약되었습니다.

 

스프레드 문법이란?

  • ES6에서 도입된 스프레드 문법(Spread Syntax)은 배열과 객체를 확장하거나 병합할 때 사용되는 문법이다.
  • 스프레드 문법은 ... 연산자를 사용하여 구현되며, 배열의 요소를 분해하여 개별적인 값들의 목록을 만들거나 객체의 프로퍼티를 복사하거나 병합하는 등의 작업에 사용된다.

예시) 스프레드 문법

const array = [1,2,3,4,5]
const string = "sjmoon";
const map = new Map([['a',1], ['b',2], ['c',3]])
const set = new Set([1,2,3,4,5]);
const object = {a:1, b:2, c:3};

// 배열, 문자열, map, set 은 이터러블이다.
console.log(...array); // 출력 : 1 2 3 4 5
console.log(...string); // 출력 : s j m o o n
console.log(...map); // 출력 : [ 'a', 1 ] [ 'b', 2 ] [ 'c', 3 ]
console.log(...set); // 출력 : 1 2 3 4 5
// 이터러블이 아닌 일반객체는 스프레드 문법의 대상이 아니다.
console.log(...object); // TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function

 

스프레드 문법을 사용하는 경우

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

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

  • 요소들의 집합인 배열을 개별적인 값들의 목록으로 만들고, 함수의 인수 목록으로 전달해야 하는 경우 스프레드 문법을 사용하면 간결하고 가독성이 좋다.
  • Rest 파라미터와 형태는 스프레드 문법가 동일하지만 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 사용되므로 반대의 개념이다.

예시)

const array = [1,2,3,4,5];

// 숫자가 아닌 배열이 인수이면 최댓값을 구할 수 업으므로 NaN을 출력한다.
console.log(Math.max(array)); // 출력 : 

// Function.prototype.apply 을 사용하여 배열을 개별적인 값들의 목록으로 만든다.
console.log(Math.max.apply(null, array)); // 출력 : 5

// 스프레드 문법을 사용하여 array를 개별적인 값들의 목록으로 만들고 최댓값을 구한다.
console.log(Math.max(...array)); // 출력 :

 

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

스프레드 문법을 배열 리터럴 내부에서 사용하면 ES6 이전 방식보다 간결하고 가독성이 좋게 표현할 수 있다.

 

예시) concat 메서드를 사용하여 2개의 배열을 1개로 결합한다.

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

// concat 메서드 사용
console.log(arr1.concat(arr2)); // 출력 : [ 1, 2, 3, 4, 5, 6 ]

// 스프레드 문법 사용
console.log([...arr1, ...arr2]); // 출력 : [ 1, 2, 3, 4, 5, 6 ]

 

예시) splice 메서드를 사용하여 arr1 배열의 2번째 인덱스부터 2개의 요소를 제거하고 arr2를 추가한다.

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

// arr1 배열의 2번째 인덱스부터 2개의 요소를 제거하고 arr2 추가

// splice 메서드 사용 
Array.prototype.splice.apply(arr1, [2,2].concat(arr2))
console.log(arr1); // 출력 : [ 1, 2, 3, 4 ]

// 배열값 초기화
arr1 = [1,2,0,0];
arr2 = [3,4];

// 스프레드 문법 사용
arr1.splice(2,2,...arr2);
console.log(arr1); // 출력 : [ 1, 2, 3, 4 ]

 

예시) slice메서드를 사용하여 배열을 복사한다.

const arr1 = [1,2,3];

// slice 메서드 사용
let arr2 = arr1.slice();
console.log(arr2); // 출력 : [ 1, 2, 3 ]

// 스프레드 문법 사용
arr2 = [...arr1];
console.log(arr2); // 출력 : [ 1, 2, 3 ]

 

예시) Function.prototype.call 메서드를 사용하여 유사배열 객체를 배열로 변환한다.

// slice.call 메서드 사용
function sum1() {
    // 유사 배열 객체인 arguments를 배열로 변환
    const args = Array.prototype.slice.call(arguments);
    // reduce 배열을 순환하며 인수로 전달받은 콜백함수를 반복 호출
    return args.reduce((x,y) => x+y,0);
}
console.log(sum1(1,2,3,4,5)) // 출력 : 15

// 스프레드 문법 사용
function sum2(){
    return [...arguments].reduce((x,y) => x+y,0);
}
console.log(sum2(1,2,3,4,5)) // 출력 : 15

// rest 파라미터 사용
const sum3 = (...args) => args.reduce((x,y) => x + y, 0);
console.log(sum3(1,2,3,4,5)); // 출력 : 15

 

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

  • 객체 리터럴의 프로퍼티 목록에서 스프레드 문법을 사용하려면 TC39 프로세스의 stage 4단계에 제안되어 있는 스프레드 프로퍼티를 사용하면 된다.
  • 스프레드 프로퍼티 제안은 일반 객체 대상으로도 스프레드 문법을 사용할 수 있다.

예시) Object,assign 메서드를 사용하여 객체를 병합한다.

const object1 = { a:1, b:2 };
const object2 = { b:2, c:3 };

// Object.assign 메서드를 사용하여 객체를 병합
// 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선이다.
const merge1 = Object.assign({},object1,object2);
console.log(merge1); // 출력 : { a: 1, b: 2, c: 3 }

// 스프레드 문법 사용하여 프로퍼티 추가
// 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선이다.
const merge3 = {...object1, ...object2};
console.log(merge3); // 출력 : { a: 1, b: 2, c: 3 }

 

반응형