FE/리뷰

[모던 자바스크립트 딥다이브] 35장 스프레드 문법

따봉치치 2024. 5. 5. 16:48

 

 

스프레드 문법
  • ... 하나로 뭉쳐 있는 여러 값ㄷ르의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬
  • Rest 파라미터와 형태가 동일하지만 전혀 다른 개념임!
  • 스프레드 문법 대상은 for ... of 문으로 순회할 수 있는 이터러블에 한정됨
  • 스프레드 문법의 결과물 (값으로 사용 불가)
    • 함수 호출문의 인수 목록
    • 배열 리터럴의 요소 목록
    • 객체 리터럴의 프로퍼티 목록

 

 

함수 호출문의 인수 목록으로 사용
  • 배열을 함수의 인수 목록으로 전달할 때 사용함
const arr = [1,2,3];

const max = Math.max(...arr); // 3

 

 

 

배열 리터럴 내부에서 사용
  • concat : 2개의 배열 합치기
// ES5
var arr = [1,2].concat([3,4]);

// ES6
const arr = [...[1,2], ...[3.4]];
  • splice : 배열 중간에 다른 요소 추가나 삭제
// ES5
var arr1 = [1,4];
var arr2 = [2,3];

Array.prototype.slice.apply(arr1, [1,0].concat(arr2));

// ES6
const arr1 = [1,4];
const arr2 = [2,3];
arr1.splice(1,0,...arr2);
  • 배열 복사
// ES5
var origin = [1,2];
var copy = origin.skice();

// ES6
const origin = [1,2];
const copy = [...origin];
  • 이터러블을 배열로 복사

 

 

객체 리터럴 내부에서 사용
  • 일반 객체를 대상으로도 스프레드 문법의 사용 허용함
  • Object.assign 메서드를 대체할 수 있음