spread문법 , rest파라미터 , arguments의 차이

이 셋 각각의 개념을 알고있다고 생각했는데, 또 모아놓고 생각해보니 뒤죽박죽이 되어버렸다.
이 꼴은 개념을 정확히는 모르고 있다는 말이겠지!
이번에 확실히 정리해보겠다.

 

 

✅ rest 파라미터

- 파라미터에 ...를 이용해서 받으면 나머지 인자를 받아 하나의 "배열"로 만들어 사용하게 됨.

- ( "배열"이기 때문에 배열의 메소드 사용가능함.)

- rest 파라미터는 항상 마지막에 있어야 함. 

 

function x(a, ...rest) {
  console.log(Array.isArray(rest)); // true
  console.log(a, rest); // 1, [2,3,4,5]
}
 x(1, 2, 3, 4, 5);

 

✅  arguments

- 함수를 호출할때 입력한 모든 인자가 담겨있음.

- rest는 배열, arguments는 유사배열임.

- "유사배열"이기 때문에 배열의 모든 메소드 사용 불가능. 그러나 length() , for of 등은 사용가능

- 실행컨텍스트 생성시 arguments객체 생성됨.

 

function x1() {
  console.log(arguments); // {0:"a" , 1:"b" , 2:"c" , 3:"d" , 4:"e"}
}

 x1('a', 'b', 'c', 'd', 'e');

✅ spread 

- 배열 또는 이터러블(iterable)을 "개별" 요소로 분리한다.

- rest는 마지막에 써야 하지만, spread는 어디든 써도 상관없음.

 

사용1) 객체에도 spread 쓸 수 있음.

 const obj = {
    a: 'ㄱ',
    b: 'ㄴ',
    c: 'ㄷ',
    d: 'ㄹ',
    e: 'ㅁ',
  };
  // console.log({ ...obj, f: 'ㅂ' });

 

사용2) 객체나 배열을 복사할 떄 사용

const arr1 = [1, 2, 3, 4];
const arr2 = [...arr1, 5, 6];
// console.log(arr2); [1,2,3,4,5,6]

사용3) spread를 활용해 배열을  -> 객체로 바꿀 수 있음.
: 참고로 배열은 객체로 펼칠 수 있지만, 객체를 배열로 펼칠 수는 없음.

// 1)배열을 객체로
const members = ['ali', 'koko', 'julli'];
const membersObj = { ...members };
// console.log(membersObj); // {0: 'ali', 1: 'koko', 2: 'julli'}

// 2)객체를 배열로
const topic = {
  name: '모던 자바스크립트',
  language: 'JavaScript',
};
const newArray = [...topic]; // TypeError!