디폴트 매개변수와 나머지 매개변수 (with arguments 객체)

 디폴트 매개변수(default parameter)와 나머지 매개변수(rest parameter)는 ECMAScript 6부터 추가되었다. 이전 버전의 자바스크립트에서는 함수에서 매개변수의 개수를 동적으로 처리하기 위해 arguments 객체를 사용해야 했지만, ECMAScript 6부터는 나머지 매개변수를 사용해 인수를 배열 형태로 전달하는 것을 권장한다.

 

👾 디폴트 매개변수(default parameter)

 디폴트 매개변수란 함수를 호출할 때 명시된 인수를 전달하지 않았을 경우에 사용하게 될 기본값이다.

자바스크립트에서 함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined 이 된다. 매개변수에 값을 전달하지 않아도 그 값이 undefined 가 되지 않게 하려면 함수를 선언할 때 =를 사용해 기본값을 설정해주면 된다.

 

function greeting(name = "guest", text) {}

function showMessage(from, text = anotherFunction()) {
  // anotherFunction()은 text값이 없을 때만 호출됨
  // anotherFunction()의 반환 값이 text의 값이 됨
}

→ 문자열 뿐만 아니라 복잡한 표현식도 기본값으로 설정할 수 있다.

→ 매개변수 기본값은 함수를 호출할 때, 해당하는 매개변수가 없을 경우에만 평가된다. 매개변수에 값이 전달되는 경우에는 기본값은 적용되지 않는다.

 

 

👩🏻‍💻 example

/* 디폴트 매개변수를 사용하지 않았을 경우, 
  매개변수 값이 undefined인지 명시적으로 확인하고, 일치하는 경우 기본값을 설정한다. */

function mul(a, b) {
  b = (typeof b !== 'undefined') ? b : 1;
  return a * b;
}
console.log("인수가 2개 전달되면 반환값은 " + mul(3, 4) + "입니다.");
console.log("인수가 1개만 전달되면 반환값은 " + mul(3) + "입니다.");

/* 출력값
인수가 2개 전달되면 반환값은 12입니다.
인수가 1개만 전달되면 반환값은 3입니다.
*/

⬇︎

// 디폴트 매개변수를 사용한 경우

function mul(a, b = 1) {
  return a * b;
}
console.log("인수가 2개 전달되면 반환값은 " + mul(3, 4) + "입니다.");
console.log("인수가 1개만 전달되면 반환값은 " + mul(3) + "입니다.");

/* 출력값
인수가 2개 전달되면 반환값은 12입니다.
인수가 1개만 전달되면 반환값은 3입니다.
*/

 

 

✨ 디폴트 매개변수를 설정할 수 있는 다른 방법들

 함수를 선언할 때가 아닌 함수 선언 후에 매개변수 기본값을 설정하는 것이 적절한 경우도 있는데, 이런 경우 함수를 호출할 때 매개변수를 undefined와 비교하여 매개변수가 전달되었는지를 확인한다.

// 1. if문 사용 예제

function showMessage(text) {
    ...
    if (text === undefined) {
      text = '빈 문자열';
    }
    console.log(text);
  }
  
  showMessage("안녕하세요."); // 안녕하세요.
  showMessage(); // 빈 문자열

// 2. 논리연산자 (||) 사용 예제

function showMessage(text) {
  text = text || '빈 문자열';
  ...
}

// 3. nullish 병합 연산자 사용 예제

function showCount(count) {
  alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); // unknown
showCount(); // unknow

 

 

👾 나머지 매개변수(rest parameter)

 나머지 매개변수는 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지를 한 번에 지정하여 배열에 담는다.

 

function sumAll(...theArgs) { // [1,2,3] 이렇게 배열로 들어간다.
  let sum = 0;
  for (let arg of theArgs) {
    sum += arg;
  }
  return sum;
}
  
sumAll(1,2,3)  // 6

 → 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다.

 

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a); // a one
  console.log("b", b); // b two
  console.log("manyMoreArgs", manyMoreArgs); // manyMoreArgs [ 'three', 'four', 'five', 'six' ]
}

myFun("one", "two", "three", "four", "five", "six");

 → 나머지 매개변수는 남아있는 인수를 모으는 역할을 하므로 항상 마지막에 있어야 한다.

 

 

👾 arguments 객체 (ES6 이후에는 rest parameter 사용 권장)

 arguments 객체는 함수 내에서 현재 실행 중인 함수에 전달된 인수를 나타내는 유사 배열 객체이다. 이 객체는 함수의 매개변수와 달리 이름이 없으며, 인덱스를 통해 각 인수에 액세스할 수 있다.

 

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

showSubject('html','css'); // length 2, html, css 출력
showSubject('html') // // length 1, html, undefined 출력

 → 인수의 총 개수는 arguments객체의 length 프로퍼티에 저장된다.

 → 첫 번째 인수는 arguments[0]에 저장되며, 다음 인수는 arguments[1]에 저장된다.

 → 전달되지 않은 인수는 undefined가 출력된다.

 

👩🏻‍💻 example

// argument의 총 합을 구하는 addNum
function addNum() {
  let sum = 0;
  for(let i=0; i<arguments.length; i++) {
    sum += arguments[i];					
  }
  return sum;
}
console.log("argument가 3개 전달되면 반환값은 " + addNum(1, 2, 3));
console.log("argument가 2개 전달되면 반환값은 " + addNum(1, 2));
console.log("argument가 1개 전달되면 반환값은 " + addNum(1));
console.log("argument가 아무것도 전달되지 않으면 반환값은 " + addNum());
console.log("argument가 10개가 전달되면 반환값은 " + addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));

/* 출력값
argument가 3개 전달되면 반환값은 6
argument가 2개 전달되면 반환값은 3
argument가 1개 전달되면 반환값은 1
argument가 아무것도 전달되지 않으면 반환값은 0
argument가 10개가 전달되면 반환값은 55
*/

 → addNum() 함수는 전달받은 인수의 개수에 상관없이 언제나 정상적인 계산을 수행한다.

 

📌 arguments 객체의 단점

1. arguments 객체는 유사 배열 객체이면서 이터러블(반복 가능한) 객체이다. 하지만 배열과 비슷할 뿐 실제 Array 객체는 아니기 때문에 index와 length 프로퍼티만 가지고 있을 뿐 배열 메서드를 사용할 수 없다.
   → 이러한 이유로 ECMAScript 6에서는 나머지 매개변수(Rest Parameter)를 도입하여 함수의 매개변수를 배열 형태로 직접 처리할 수 있게 되었다.
2. arguments 객체는 인수 전체를 담기 때문에 나머지 매개변수처럼 인수의 일부만 사용할 수 없다.
3. 화살표 함수는 arguments 객체를 지원하지 않는다.
   → 화살표 함수에서 arguments 객체에 접근하면 일반 함수의 arguments 객체를 가져온다.

 

---

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊