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!