🧩 매개변수

나머지 매개변수

나머지 매개변수 문법을 사용하면 남은 매개변수들을 하나의 배열에 모아옵니다.

• 나머지 매개변수: ... 을 붙인 매개변수로, 나머지 인수들을 전부 모아 요소로 가지는 배열이 됨
  • 배열 메서드 사용 가능
• 나머지 매개변수는 가장 마지막에 위치해야 함!
  • 전달된 인수 중 남아있는 것을 모두 모으기 때문에, 중간에 위치하면 ❌

---

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Bora Lee

  // 나머지 인수들은 배열 titles의 요소가 됨
  // titles = ["Software Engineer", "Researcher"]
  alert( titles[0] ); // Software Engineer
  alert( titles[1] ); // Researcher
  alert( titles.length ); // 2
}

showName("Bora", "Lee", "Software Engineer", "Researcher");

위처럼, 나머지 매개변수 ...titles 에 전달된 나머지 인수가 들어가 배열을 이룹니다.

유사 배열 객체 arguments

나머지 매개변수 문법이 나오기 전에 함수의 인수 전체를 얻기 위해 유사 배열 객체 arguments 를 사용했습니다.

• arguments
  • 유사 배열 객체 & 이터러블 객체
    • for..of 사용 가능
    • 인덱스를 사용하여 요소(인수)에 접근
  • 배열은 아님
    • 배열 메서드 사용 불가능
  • 인수 전체를 가져오므로 나머지 매개변수처럼 일부만 뺄 수는 ❌
  • 화살표 함수에서는 지원 ❌
    • 화살표 함수는 외부에 있는 일반 함수의 arguments 를 가져옴

---

arguments 는 배열이 아닌 유사 배열이므로, 배열 메서드 사용을 원한다면 나머지 매개변수 문법을 사용해야 합니다.

function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // arguments는 이터러블 객체이기 때문에
  // for(let arg of arguments) alert(arg); 를 사용해 인수를 펼칠 수 있습니다.
}

// 2, Bora, Lee가 출력됨
showName("Bora", "Lee");

// 1, Bora, undefined가 출력됨(두 번째 인수는 없음)
showName("Bora");

매개변수를 지정해주지 않아도, arguments 를 함수 내부에서 사용할 수 있습니다.
넘어온 인수를 arguments 가 저장하고 있습니다.

스프레드 문법

나머지 매개변수와 arguments 는 각각의 인수를 모아 가져옵니다.
개별 인수를 모아 배열로 만들거나, 유사한 형태로 취급합니다.

반대로, 인수에 배열 자체를 넘겨주고 함수 내부에서는 배열의 개별 요소를 각각의 인수로 넘겨준 것처럼 다루기 위해서는 스프레드 문법 을 사용합니다.

const arr = [1, 2, 3];

// 이렇게 배열 자체를 넘겨줘도
myFunc(arr);

// arr 의 개별 요소를 넘겨준 것처럼 하기 위해서는? => 스프레드 문법
myFunc(1, 2, 3);

• 인수로 배열을 넘겨줄 때 배열 앞에 ... 붙이기
  • 배열의 각 값들이 분해되어 그대로 넘어감
• 다른 값과 혼합해서 사용 가능
• 배열끼리 합칠 때도 사용 가능
• 배열 ❌ 여도, 이터러블 객체면 스프레드 문법 사용 가능
  • ex) 문자열, Set...

---

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

// arr1, arr2 의 각 요소들이 분해되어 인수로 넘겨짐
alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

// 이터러블 객체인 문자열의 각 문자를 분해
let str = "Hello";
alert( [...str] ); // H,e,l,l,o

배열, 객체 본사본 만들기

Object.assign() 을 활용해서 본사본을 만들곤 했는데, 스프레드 문법을 활용하면 더 깔끔하게 복사본 생성이 가능합니다.

스프레드 문법을 사용하면 각 요소를 분리해서 가져온 후, 그 목록을 할당해주기 때문입니다.
그렇게 얻은 개별 값을 빈 객체, 배열에 할당하므로 값은 같고, 참조값은 다릅니다.
그러나 1차적으로만 분리해주므로, 중첩되었을 경우는 참조값이 동일합니다.

• ... 를 붙여 객체나 배열의 개별 요소를 얻어와 새로운 객체, 배열에 할당
• 값은 동일
• 객체, 배열 자체의 참조값은 다름
  • 중첩된 부분의 참조값은 같음

---

// 배열 복사
let arr = [1, 2, 3];
let arrCopy = [...arr];

// 객체 복사
let obj = { a: 1, b: 2, c: 3 };
let objCopy = { ...obj };