Spread syntax/Rest parameter/Destructing

Spread 문법

빵에 잼을 spread해서 바르는것 처럼... 물에 잉크 떨어트리면 spread 하는 것처럼....

배열을 풀어서 인자로 전달하거나 배열을 풀어서 각각의 요소로 넣을 때 사용하는 문법

Spread 문법은 배열에서 강력한 힘을 발휘한다.

배열을 합치거나, 복사하거나, 여러 개의 배열을 이어붙이거나, 여러개의 객체를 병합하거나 하는데에 사용할 수 있다.

1. 배열 합치기

let fruits = ['kiwi', 'banana'];
let fruitBasket = ['apple', ...fruits, 'watermelon', 'plum'];

// fruitBasket의 값은 ['apple', 'kiwi', 'banana', 'watermelon', 'plum'];

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

arr1 = [...arr1,...arr2]; // 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr1의 값을 바꾸려면 새롭게 할당해야 합니다.

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

2. 배열 복사

let arr = [0,1,2];
let arr2 = [...arr]; // arr.slice()와 유사
arr2.push(3); // 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr2를 수정해도 arr이 바뀌지 않습니다.

// arr = [0,1,2];
// arr2 = [0,1,2,3];

객체에서 사용하기 - 객체 복사, 객체 합병

let obj1 = {foo:'bar', x: 12};
let obj2 = {foo:'bars', y: 23};

let clonedObj = {...obj1};
let mergedObj = {...obj1, ...obj2};

// clonedObj = {foo:'bar', x:12};
// mergedObj = {foo:'bars', x:12, y: 23};

함수에서 나머지 파라미터 받아오기

function howTogetRestParameter(a,b,...moreArgs){
  console.log("a",a);
  console.log("b",b);
  console.log("moreArgs", moreArgs);
 }
 
 howTogetRestParameter("one","two","three","four","five","six");
 
 // 콘솔값
 // a one
 // b two
 // howTogetRestParameter["three","four","five","six"]

빈 배열에 spread(전개) 문법을 사용할 경우, 아무것도 전달되지 않는다.

const spread = [];
const arr = [0, ...spread, 1];

// arr = [0,1];

Rest Parameter

rest parameter는 spread syntax를 통해 간단하게 구현된다.

파라미터를 배열의 형태로 받아서 사용한다. 파라미터 개수가 가변적일 때 유용하다.

항상 배열 ! 한개 하고 ...나머지 이런 느낌

인자의 수가 정해져 있지 않은 경우에도 유용하게 사용할 수 있다.

인자의 일부에만에도 적용할 수 있다.

마지막 파라미터만 "Rest 파라미터"가 될 수 있다.

 

Rest 파라미터와 arguments 객체의 차이

여기서 arguments 객체란??

함수로 실행하면 자동으로 객체가 생성됨.

• Rest 파라미터는 구분된 이름이 주어지지 않은 유일한 대상인 반면, arguments 객체는 함수로 전달된 모든 인수 포함
• arguments 객체는 실제 배열이 아니고, rest 파라미터는 유사배열이다.
• rest 파라미터는 sort, map, forEach, pop같은 메서드 적용 가능

구조 분해 (Destructing)

구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정

객체에서 구조 분해 할당을 사용하는 경우 선언(const,let,var)과 함께 사용하지 않으면 에러가 발생할 수 있다.

 

* Array.from()

유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운  배열을 만드는 것