[콜럼Vue스] Dynamic Arguments

동적 아규먼트(Dynamic Arguments)는 함수에 전달되는 인자의 개수가 고정되지 않고, 상황에 따라 다른 개수의 인자를 받을 수 있는 경우를 의미함.

자바스크립트에서는 다양한 방법으로 동적인 인자를 처리할 수 있으며, 이를 통해 더 유연한 함수 호출이 가능해짐.

 

 

요약:

• 동적 아규먼트는 함수에 전달되는 인자의 개수가 유동적일 때 사용되며, 자바스크립트에서는 arguments 객체나 Rest 파라미터로 처리할 수 있음.
• arguments 객체는 함수 호출 시 전달된 모든 인자를 배열처럼 처리할 수 있지만, 배열 메서드를 사용할 수 없고 ES6 이후에는 덜 사용됨.
• Rest 파라미터는 ES6에서 도입된 기능으로, 인자를 배열로 받아 배열 메서드를 사용할 수 있는 방식이며, 가변 인자 처리에 더 유용함.

 

1. arguments 객체

ES6 이전에는 함수 내에서 동적 인자를 처리하기 위해 arguments 객체를 사용했음. arguments 객체는 함수가 호출될 때 전달된 모든 인자를 배열 형태로 가지고 있으며, 인자의 개수에 상관없이 모든 인자에 접근할 수 있음.

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

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

 

• arguments 객체는 배열과 유사한 형태로, 전달된 모든 인자에 접근할 수 있음.
• 이 방식은 인자의 개수가 가변적일 때 매우 유용하지만, 배열 메서드를 직접 사용할 수 없는 불편함이 있음.

2. Rest 파라미터(Rest Parameter)

ES6에서는 arguments 객체보다 더 직관적이고 유용한 **Rest 파라미터**가 도입됨. Rest 파라미터는 함수의 매개변수 앞에 **...**을 붙여서 사용하며, 전달된 모든 인자를 배열로 수집함. 이를 통해 동적인 인자 처리뿐만 아니라 배열 메서드를 사용할 수 있는 장점이 있음.

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

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

 

 

• Rest 파라미터는 **...numbers**와 같이 정의되며, 모든 인자를 배열로 수집함.
• Rest 파라미터는 배열이기 때문에 배열 메서드(예: reduce, map, filter)를 사용할 수 있음.

3. Rest 파라미터와 다른 인자 함께 사용하기

Rest 파라미터는 다른 고정된 인자와 함께 사용할 수 있음. Rest 파라미터는 항상 마지막 매개변수로 위치해야 하며, 나머지 인자는 고정된 값을 받을 수 있음.

function multiply(factor, ...numbers) {
  return numbers.map(num => num * factor);
}

console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]
console.log(multiply(3, 4, 5));    // [12, 15]

 

 

• factor는 고정된 값으로 받으며, 나머지 인자들은 numbers 배열에 수집됨.
• 이처럼 Rest 파라미터는 고정된 인자와 함께 사용할 수 있어 유연성이 높음.

4. 동적 아규먼트 활용 예시

(1) 동적으로 인자를 처리하는 함수

여러 개의 인자를 받는 함수에서 동적으로 인자를 처리하는 예시임. 이 방식은 유효성 검사나 동적인 연산을 할 때 유용하게 사용될 수 있음.

function concatenateStrings(separator, ...strings) {
  return strings.join(separator);
}

console.log(concatenateStrings(", ", "apple", "banana", "cherry")); // "apple, banana, cherry"
console.log(concatenateStrings(" - ", "car", "bike", "bus"));       // "car - bike - bus"

 

separator고정된 값이고, 나머지 문자열들은 Rest 파라미터로 받아서 join()을 통해 연결함.

 

(2) 다양한 타입의 동적 인자 처리

동적 아규먼트를 사용하면 다양한 타입의 인자를 처리하는 유연한 함수를 작성할 수 있음.

function handleInputs(...inputs) {
  inputs.forEach(input => {
    if (typeof input === "string") {
      console.log(`String: ${input}`);
    } else if (typeof input === "number") {
      console.log(`Number: ${input}`);
    } else {
      console.log(`Unknown type: ${input}`);
    }
  });
}

handleInputs("hello", 42, true, "world"); 
// "String: hello"
// "Number: 42"
// "Unknown type: true"
// "String: world"

• 다양한 타입의 인자를 받아, 각각의 타입에 맞는 처리 방식을 적용함.

5. arguments 객체 vs Rest 파라미터

• arguments 객체:
  • 배열과 유사한 객체로, 함수에 전달된 모든 인자를 저장함.
  • 배열 메서드를 직접 사용할 수 없으며, 배열로 변환해야 함.
  • 화살표 함수에서는 사용할 수 없음.
• Rest 파라미터:
  • ES6에서 도입된 배열로, 인자를 더 직관적이고 편리하게 처리할 수 있음.
  • 배열 메서드를 사용할 수 있어 더 유용함.
  • 함수의 마지막 매개변수로만 사용 가능함.

function usingArguments() {
  console.log(arguments); // arguments 객체
}

function usingRest(...args) {
  console.log(args); // 배열 형태로 출력
}

usingArguments(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }
usingRest(1, 2, 3);      // [1, 2, 3]

arguments는 배열과 유사한 객체지만, Rest 파라미터는 배열로 반환되므로 배열 메서드를 사용할 수 있다는 점에서 Rest 파라미터가 더 강력함.