[JS] 기본값 매개변수(default parameters) / 나머지 매개변수(rest parameters)

📌 기본값 매개변수(default parameters)

function 함수명(변수 = 기본값) {
                           ...
}

 

: 함수를 정의할 때 매개변수의 기본 값을 설정해 놓는 기능

• 함수 호출 시 인수를 제공하지 않았을 때 기본 값이 자동으로 사용된다.
• 함수 호출 시 평가된다.
  
  • 함수가 호출될 때마다 새 객체가 생성됨

 

 

 

✨ 변수의 기본값 설정하는 방법

 

1. 기본 설정

const randomNumber = function(min, max) {
  if (min === undefined) {
    min = 0;
  }
  
  if (max === undefined) {
    max = 10;
  }

  return Math.round(Math.random() * (max - min)) + min;
};

let n1 = randomNumber();
console.log(n1, n1 >= 0 && n1 <= 10);

let n2 = randomNumber(5);
console.log(n2, n2 >= 5 && n2 <= 10);

let n3 = randomNumber(5, 7);
console.log(n3, n3 >= 5 && n3 <= 7);

 

 

2. 기본값 매개변수 사용

const randomNumber = (min = 0, max = 10) => {
  return Math.round(Math.random() * (max - min)) + min;
};

let n1 = randomNumber();
console.log(n1, n1 >= 0 && n1 <= 10); // [ 5, true ]

let n2 = randomNumber(5);
console.log(n2, n2 >= 5 && n2 <= 10); // [ 6, true ]

let n3 = randomNumber(5, 7);
console.log(n3, n3 >= 5 && n3 <= 7); // [ 6, true ]

 

 

 

3. nullish 연산자 사용

const randomNumber = (min, max) => {
  // nullish 연산자 사용 (null | undefined)
  min = min ?? 0; 
  max = max ?? 10;

  return Math.round(Math.random() * (max - min)) + min;
};

let n1 = randomNumber();
console.log(n1, n1 >= 0 && n1 <= 10); // [ 8, true ]

let n2 = randomNumber(5);
console.log(n2, n2 >= 5 && n2 <= 10); // [ 8, true ]

let n3 = randomNumber(5, 7);
console.log(n3, n3 >= 5 && n3 <= 7); // [ 6, true ]

 

 

---

📌 나머지 매개변수(rest parameters)

function 함수명(변수1, 변수2, ...변수3) {
                              ...
}

 

: 함수의 마지막 매개변수에 `...`를 사용하여 남은 인수들을 배열로 받는 기능

• 함수 호출 시 전달된 나머지 모든 인수를 배열로 수집 
• 마지막 매개변수만 나머지 매개변수(rest parameters)로 설정 ⭕
• 함수가 몇 개의 인수를 받을지 사전에 정확히 알 수 없는 경우에 유용 
• 나머지 매개변수는 배열이므로 배열 메서드 사용 가능 ⭕
  
  

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

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

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

 

 

 

예제 1

function sumAll(...args) { 
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

 

 

---

 

 

📢 나머지 매개변수   vs   arguments 객체(유사 배열)

나머지 매개변수(Rest Parameters)	arguments 객체
일반 배열	유사 배열 객체(array-like object)
배열 메서드 사용 ⭕	배열 메서드 사용 ❌ 👉 배열로 변환해야 함
`...매개변수` 이전에 정의한 매개변수는 포함 ❌	`...매개변수` 이전에 정의한 매개변수도 포함 ⭕

 

 

* arguments 객체

 

 

---

 

기본값 매개변수 - JavaScript | MDN

 

나머지 매개변수 - JavaScript | MDN

 

arguments 객체 - JavaScript | MDN

 

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