6.2 나머지 매개변수와 전개 문법

📢 많은 자바스크립트의 내장 함수는 인수의 개수에 제약을 두지 않는다. 

◾️ 임의의 수의 인수를 받는 방법

◾️ 함수의 매개변수에 배열을 전달하는 방법

 

나머지 매개변수 ...

◾️ 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수엔 제약이 없다. 

◾️ 함수를 정의할 땐 인수를 두 개만 받도록 하고, 실제 함수를 호출할 땐 이보다 더 많은 인수를 전달했지만 에러가 발생하지 않는다. 

◾️ 반환 값은 처음 두 개의 인수만을 사용해 계산된다. 

function sum(a, b) {
  return a + b;
}

console.log( sum(1, 2, 3, 4, 5) ); // 3

◾️ 여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 뒤에 ...붙여주면 함수 선언부에 포함시킬 수 있다. 

◾️ ... → "나머지 매개변수들을 한데 모아 배열에 집어넣어라"

function sumAll(...args) { // 배열 args
  let sum = 0;
  
  for(let arg of args) sum += arg; // arg는 배열 args의 원소
  
  return sum;
}

console.log( sumAll(1) ); // 1
console.log( sumAll(1, 2) ); // 3
console.log( sumAll(1, 2, 3) ); // 6

◾️ 변수와 배열을 같이 쓸 수도 있다. 

◾️ 처음 두 인수는 변수에, 나머지 인수들은 titles배열에 할당된다. 

function showName(firstName, lastName, ...titles) {
  console.log(firstName + ' ' + lastName); // julius Caesar
  
  // titles = ['Consul','Imperator'];
  console.log( titles[0] ); //Consul
  console.log( titles[1] ); //Imperator
}

showName('julius','Caesar','Consul','Imperator');

⚠️ 나머지 매개변수는 항상 마지막에 있어야 한다. 

◾️ 나머지 매개변수는 남아있는 인수를 모으는 역할을 한다. 
◾️ function f(arg1, ...rest, arg2) { ... }  →  ❌

 

 

'arguments' 변수

◾️ arguments라는 특별한 유사 배열 객체(array-like object)를 이용하면 인덱스를 사용해 모든 인수에 접근할 수 있다. 

function showName() {
  console.log( arguments.length );
  console.log( arguments[0] );
  console.log( arguments[1] );
}

showName('suzu','ruru'); // 2, suzu, ruru

◾️ arguments는 이터러블 객체이기 때문에 for(let arg of arguments) 를 사용해 인수를 나열 할 수 있다. 

💡 반복 가능한(iterable, 이터러블)객체는 배열을 일반화한 객체이다.
     이터러블 이라는 개념을 사용하면 어떤 객체에든for..of반복문을 적용할 수 있다.

 

◾️ arguments는 완전한 배열은 아니기 때문에 배열 메서드를 사용할 수 없다. 

◾️ arguments는 인수 전체를 담기 때문에 나머지 매개변수처럼 인수의 일부만 사용할 수 없다. 

 

💡 배열 메서드를 사용하고 싶거나 인수 일부만 사용하고자 할 때는 나머지 매개변수를 사용하는 것이 좋다. 

 

 

✳️ 화살표 함수에는 'arguments'가 없다.

◾️ 화살표 함수에서 arguments 객체에 접근하면, 외부에 있는 '일반' 함수의 arguments 객체를 가져온다. 

function f() {
  let showArg = () => console.log( arguments[0] );
  showArg();
}
f(1); //1

 

spread 문법

📢 배열을 통째로 매개변수에 넘겨주는 방법

 

◾️ 내장함수 Math.max는 인수로 받은 숫자 중 가장 큰 숫자를 반환한다. 

console.log( Math.max(1, 5, 3) ); // 5

◾️ 아무런 조작 없이 배열을 그대로 넘기면 NaN을 반환한다. (Math.max는 숫자 목록을 인수로 받기 때문)

let arr = [1, 5, 3];

console.log( Math.max(arr) ); // NaN

◾️ 전개문법은 나머지 매개변수와 반대의 역할을 한다. 

◾️ 함수를 호출할 때 ...arr을 사용하면, 이터러블 객체 arr이 인수 목록으로 확장된다. 

let arr = [1, 5, 3];

console.log( Math.max( ...arr ) ); // 5

◾️ 이터러블 객체 여러 개를 전달하는 것도 가능하다.

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

console.log( Math.max(...arr1, ...arr2) ); // 8

◾️ 평범한 값과 혼합해 사용하는 것도 가능하다. 

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

console.log( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

◾️ 배열이 아니더라도 이터러블 객체이면 전개 문법을 사용할 수 있다. 

let str = "Hello";

console.log( [...str] ); // H,e,l,l,o

◾️ 전개 문법은 for..of와 같은 방식으로 내부에서 iterator(반복자)를 사용해 요소를 수집한다. 

◾️ 매서드 Array.from은 문자열 같은 이터러블 객체를 배열로 바꿔주기 때문에 Array.from을 사용해도 동일한 작업을 할 수 있다. 

let str = "Hello";

// 이터러블 → 배열
console.log( Array.from(str) ); // ["H", "e", "l", "l", "o"]

◾️ Array.from(obj)와 [...obj]에는 미묘한 차이가 있다. 

• Array.from은 유사 배열 객체와 이터러블 객체에 둘다 사용할 수 있다. 
• 전개 문법은 이터러블 객체에만 사용할 수 있다. 

💡 무언가를 배열로 바꿀 때는 전개 문법보다 Array.from이 보편적으로 사용된다.

 

배열/객체의 복사

◾️ 전개문법은 Object.assign()과 같은 일을 할 수있다.  

let arr = [1, 2, 3];
let arrCopy = [ ...arr ]; // [1, 2, 3];

// 두 배열은 같은 contents를 가지고 있다. 
console.log(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true

// 두 배열은 같은 배열이 아니다(참조가 다르기 때문)
console.log(arr === arrCopy); // false

arr.push(4);
console.log(arr); // 1, 2, 3, 4
console.log(arrCopy); // 1, 2, 3

◾️ 객체를 복사할 때도 똑같다. 

let obj = {a: 1, b: 2, c: 3};
let objCopy = [ ...obj ]; // {a: 1, b: 2, c: 3};

// 두 객체는 같은 contents를 가지고 있다. 
console.log(JSON.stringify(obj) === JSON.stringify(objCopy)); // true

// 두 객체는 같은 객체가 아니다(참조가 다르기 때문)
console.log(obj === objCopy); // false

obj.d = 4;
console.log(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4}
console.log(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}

◾️ 전개 문법을 사용하면 let objCopy = Object.assign({}, obj) 또는 let arrCopy = Object.assign([], arr) 보다 짧은 코드로 객체나 배열을 복사 할 수 있다.

 

📝 요약

◽️ "..."는 나머지 매개변수나 전개 문법으로 사용된다.
◽️ 나머지 매개변수와 전개 문법 구분 방법
     ◽️ ... 이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 나머지 매개변수
     ◽️ ... 이 함수 호출 시 사용되면 배열을 목록으로 확장해주는 전개 문법
◽️ 사용 패턴
     ◽️ 인수 개수에 제한이 없는 함수를 만들 때 나머지 매개변수를 사용
     ◽️ 다수의 인수를 받는 함수에 배열을 전달할 때 전개 문법을 사용

 

 

 

---

📝 오늘 새롭게 배운 내용 📝

 

✅ ... 은 2가지의 패턴이 존재한다. 

✅ 나머지 매개변수 → 인수를 배열로 모아준다. 

✅ 전개 문법 → 배열을 목록으로 확장시켜준다. 

✅ 전개 문법을 사용하면 배열과 객체를 쉽게 복사할 수 있다. 

 

 

 

📌 [JAVASCRIPT_INFO 나머지 매개변수와 전개 문법]

나머지 매개변수와 전개 문법

 

📌 [MDN 전개 구문]

전개 구문