[MJS] 스프레드 문법

Javascript 개념

모던 자바스크립트 딥 다이브 정리

스프레드 문법

스프레드 문법

spread synctax(전개 문법)이란?

ES6에서 도입된 문법으로 하나로 뭉쳐있는 여러 집합을 전개하여 개별적은 값들의 목록으로 만드는 문법

이터러블에만 사용이 가능하다.

배열: Array

유사 배열 객체: String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments

스프레드 문법의 결과는 값이 아니라 값들의 목록이므로 변수에 할당할 수 없다.

• Rest 문법 비교 형태는 동일하나 동작하는 것이 아예 반대이다. Rest 파라미터: 함수에 전달된 인수들의 목록들을 배열로 만들어 주는 문법. Spread 문법: 뭉쳐져 있는 이터러블(배열/이터러블 유사 배열 객체)을 여러 값들의 목록으로 만들어주는 문법.

스프레드 문법의 사용

1. 함수 호출문의 인수 목록

   배열의 요소들을 사용하여 인수로 전달할 때

   ex) Math.max()

   Math.max([1, 2, 3]); // -> NaN
   
   // Math.max(...[1, 2, 3])은 Math.max(1, 2, 3)과 같다.
   const max = Math.max(...[1, 2, 3]); // -> 3
   

   Math.max 메서드의 인수로는 배열이 아니라 여러 값들이 들어가야 한다. 따라서, 배열을 전달하면 NaN이 반환된다.

   스프레드 문법을 사용해서 배열을 개별적인 값으로 전개하여 전달하면 값을 확인할 수 있다.

2. 배열 리터럴의 요소 목록

• 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]
  

• splice (배열 자르고 추가)

  // ES5
  var arr1 = [1, 4];
  var arr2 = [2, 3];
  
  arr1.splice(1, 0, arr2);
  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]
  

• slice (배열 복사)

  // 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
  

  slice 메서드와 마찬가지로 스프레드 문법을 사용하여 배열에 넣어 할당하면 얉은 복사로 복사본을 생성한다.

• 이터러블 배열 변환 배열 안에 이터러블 객체를 스프레드 문법을 사용하여 넣으면 배열로 변환된다.

1. 객체 리터럴의 프로퍼티 목록

   객체 리터럴 프로퍼티 목록에도 스프레드 문법을 사용할 수 있다.

   이터러블이 아닌 일반 객체를 대상으로도 스프레드 문법을 사용할 수 있다.