JS_기본 문법 (22)_ 매개변수 (기본값, arguments, 나머지 변수, 이상적인 함수?)

JS 다루는 함수의 매개변수에 대해서 살펴보자.

 

1. 함수의 매개변수 개수보다 많이 값을 전달한 경우

 

예시 1)

두 개의 인자를 받는 함수이다.

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

 

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

>>> 3 3 3

위의 결과처럼 JS에서는 다른 언어와 다르게

함수 정의 시 설정한 매개변수의 개수보다 많이 값을 전달하는 경우

순서대로 값을 받은 후 나머지는 무시하며 오류를 일으키지 않고 값을 반환한다.

 

 

---

2. 기본값

기본값(default parameter)은 매개변수에 값이 들어오지 않아도 기본적으로 값을 설정해주는 것이다.

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

console.log(
sum()
);

>>> 0

 

기본값 설정은 매개변수의 뒤쪽에 몰려서 설정해야한다.

 

---

3. arguments

arguments는 함수에 전달된 값들에 해당하는 Array형태의 객체이다.

함수 호출 시 전달된 모든 인수들을 배열의 형태로 형성하고 있다.

 

즉, 위에서 살펴봤듯 기존 설정된 매개변수 수보다 더 많은 값을 전달한다면

함수 연산에서는 넘친 데이터들이 무시된 채 연산에 대한 값을 반환하지만

전달되었던 데이터는 모두 arguments 객체 안에 존재한다.

 

주의할 점은 arguments 객체는 화살표 함수에서 사용이 불가하다!

function으로 정의한 함수가 고차함수일 때에만 가능하다.

 

예시 1)

function sum(a, b){
  console.log(arguments);
  return a + b;
}

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

>>> Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ] //arguments
>>> 3 //함수 연산 값

위처럼 전달한 모든 값들이 arguments 안에 존재한다.

 

특징 1_ 배열의 형태를 한 객체이므로 인덱싱 가능

function sum(a, b){
  console.log(arguments[3]);
  return a + b;
}

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

>>> 4 //인덱싱 값
>>> 3 //함수 연산 값

 

특징 2_ iterable이므로 for ~ of 활용 가능

function sum(){ //매개 변수 수를 정하지 않음
  let result = 0;
  for (item of arguments){ //입력받은 값들의 객체 활용
    if(typeof item !== 'number') continue; //타입 확인
    result += item;
  }
  return result
}

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

>>> 10 15

 

활용 하기

const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;

function combineFunc() {
  return (x, y) => {
    let result = x;
    for (const func of arguments){
      if (typeof func !== 'function') continue; //함수만 전달받음
      result = func(result, y); //현재 연산값과 y값 전달
    }
    return result;
  }
}

const add_mul = combineFunc(add, mul);

// console.log(add_mul); //함수 반환
console.log(add_mul(3, 2)); // (3 + 2) * 2
 
>>> 10

 

---

4. 나머지 변수 (... 그룹명)

나머지 변수(rest parameters)는 특정 매개변수 뒤에 임의 개수의 매개변수들을 받을 때 사용한다.

기본값과 같이 마지막 인자로만 사용이 가능하다.

또한 실제 배열이 반환된다.

 

예시 1)

console.log(
  reminder(3, 12, 'Kassid', '청소', '과제')
);

function reminder(month, day, name, ...doIt){
  console.log();
  let doItList = ''
  for (const item of doIt){
    if (doItList) doItList += ', ';
    doItList += item;
  }
  return `${month}월 ${day}일 Todo List : ${doItList}`
}

물론 위의 예시는 리스트의 메소드 중 하나인 join을 활용하면 간단하게 끝낼 수 있지만
for ~ of를 활용해도 구현이 가능하다.

 

예시 2)

const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;

function combineFunc(x, y, ...funcs) {
  let result = x;
  for (const func of funcs) {
    if (typeof func !== 'function') continue;
    result = func(result, y);
  }
  return result;
}

console.log(
  combineFunc(3, 2, add, mul)
);
 
>>> 10

arguments 예시로 활용한 함수와 같은 기능을 하도록 만들어 보았다.

 

 

 

 

 

 

 

 

 

 

 

---

매개 변수와 인수 관점, 이상적인 함수?

함수를 구성할 때 이상적인 함수는 어떤 것일까?

매개 변수와 인수의 관점에서 바라보자.

 

먼저, 위험한 함수.

외부의 변수를 직접 변경하는 것은 위험한 함수라고 할 수 있다.

let a = 0;
let b = [1, 2];

function func(x, y){
  x++;
  y[0]++;
}

func(a, b);

console.log(a);
console.log(b);

>>> 0 //변경 X (원시 변수) 
>>> [2, 2] //변수 O (참조 변수)

 

 

반대로 이상적인 함수!

받은 값들에 대해서만 처리하고 새로운 값을 반환하는 것이 이상적인 함수라고 할 수 있다.

let a = 0;
let b = [1, 2];

function addOne(x){
  return x+1;
}

a = addOne(a);
b[0] = addOne(b[0]);

console.log(a);
console.log(b);

// 모두 변경
>>> 1
>>> [2, 2]

 

정리

위험한 함수 = 외부 환경 변경

이상적인 함수 = 받은 값들에 대해서만 처리 후, 새 값 반환