▶ JavaScript Functions

JavaScript Function Parameters

JavaScript Function Parameters: 매개변수 처리 방법

JavaScript에서 함수 매개변수는 함수가 호출될 때 인자를 전달받아 처리하는 중요한 역할을 합니다. JavaScript 함수는 다양한 방식으로 매개변수를 처리할 수 있으며, 기본값을 설정하거나 가변 인자를 처리하는 등 여러 유용한 기능을 제공합니다. 이 가이드는 JavaScript 함수의 매개변수를 정의하고 사용하는 방법을 설명합니다.

1. 기본 매개변수 (Default Parameters)

기본 매개변수는 함수 호출 시 인자가 전달되지 않았을 때 사용할 기본값을 설정하는 기능입니다. ES6부터 지원되며, 함수를 더 견고하게 만들 수 있습니다.

1.1. 기본 매개변수 사용 예시

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();           // Hello, Guest!
greet('Alice');    // Hello, Alice!

1.2. 주요 특징

기본값은 함수 정의 시 설정되며, 인자가 전달되지 않거나 **undefined*인 경우에만 기본값이 사용됩니다.
null 값은 기본값을 적용하지 않고 null 자체로 처리됩니다.

2. 나머지 매개변수 (Rest Parameters)

*나머지 매개변수(Rest Parameters)**는 가변 인자를 처리하기 위해 사용됩니다. 함수 정의 시 **...*을 사용하여 나머지 매개변수를 정의하면, 나머지 모든 인자를 배열 형태로 받을 수 있습니다.

2.1. 나머지 매개변수 사용 예시

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

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

2.2. 주요 특징

여러 개의 인자를 배열 형태로 받습니다.
함수가 전달받을 인자의 수가 가변적일 때 유용합니다.
나머지 매개변수는 함수 정의 시 마지막 매개변수로만 사용할 수 있습니다.

3. `arguments` 객체

arguments 객체는 함수 호출 시 전달된 모든 인자를 배열처럼 접근할 수 있게 해주는 유사 배열 객체입니다. 이 객체는 함수가 호출될 때 자동으로 생성되며, ES6 이전에는 가변 인자를 처리하기 위해 자주 사용되었습니다.

3.1. `arguments` 사용 예시

function showArguments() {
    console.log(arguments);
}

showArguments(1, 'two', true);
// [1, 'two', true] (유사 배열 형태)

3.2. 주요 특징

유사 배열 형태로, 인덱스를 통해 접근할 수 있지만 배열 메서드는 사용할 수 없습니다.
화살표 함수에서는 arguments 객체가 생성되지 않으며, 대체로 나머지 매개변수로 대체됩니다.
배열 메서드를 사용하려면 **Array.from()*이나 **전개 연산자(...)**로 배열로 변환해야 합니다.

3.3. `arguments` 변환 예시

function sum() {
    const args = Array.from(arguments);  // 유사 배열을 실제 배열로 변환
    return args.reduce((acc, num) => acc + num, 0);
}

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

4. 전달된 매개변수의 유연성

JavaScript는 동적 타입을 가지기 때문에, 함수에 전달되는 매개변수의 타입이 고정되지 않습니다. 함수는 임의의 타입의 값을 매개변수로 받을 수 있으며, 함수가 호출될 때 매개변수의 수가 일치하지 않아도 에러가 발생하지 않습니다.

4.1. 인자의 개수가 일치하지 않는 경우

function greet(name, message) {
    console.log(`${message}, ${name}!`);
}

greet('Alice');  // undefined, Alice! (두 번째 인자가 전달되지 않아 undefined 사용)

인자가 부족한 경우

인자를 적게 전달하면 **부족한 인자는 undefined*로 처리됩니다.

인자가 많은 경우

인자를 많이 전달하면 초과된 인자는 무시됩니다.

5. 매개변수 구조 분해 (Destructuring Parameters)

JavaScript에서는 구조 분해 할당을 사용하여 매개변수로 객체나 배열을 해체하여 직접 변수에 할당할 수 있습니다. 이 방법을 사용하면 함수 내부에서 필요한 값만 바로 추출할 수 있어 가독성을 높이고 코드 작성이 더 간결해집니다.

5.1. 객체 구조 분해

function displayUser({ name, age }) {
    console.log(`Name: ${name}, Age: ${age}`);
}

const user = { name: 'Alice', age: 25, city: 'New York' };
displayUser(user);  // Name: Alice, Age: 25

5.2. 배열 구조 분해

function printCoordinates([x, y]) {
    console.log(`X: ${x}, Y: ${y}`);
}

const coordinates = [10, 20];
printCoordinates(coordinates);  // X: 10, Y: 20

5.3. 기본값과 구조 분해 결합

구조 분해와 기본 매개변수를 함께 사용할 수도 있습니다.

function greet({ name = 'Guest', age = 18 }) {
    console.log(`Hello, ${name}. You are ${age} years old.`);
}

greet({});  // Hello, Guest. You are 18 years old.
greet({ name: 'Alice' });  // Hello, Alice. You are 18 years old.

6. 함수 인자 전개 (Spread Operator)

*전개 연산자(...)**는 배열이나 객체의 값을 개별 요소로 펼쳐서 전달할 수 있게 해줍니다. 이는 배열을 인자로 전달할 때 매우 유용합니다.

6.1. 전개 연산자 사용 예시

const numbers = [1, 2, 3];

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

console.log(sum(...numbers));  // 6

6.2. 주요 특징

배열 요소를 개별 인자로 펼쳐서 함수에 전달.
배열이나 객체의 복사와 병합에도 사용 가능.

7. 함수 매개변수의 유효성 검사

함수에 전달된 매개변수가 유효한지 확인하는 것은 매우 중요합니다. 이를 위해 조건문이나 타입 체크를 사용해 매개변수를 검증할 수 있습니다.

7.1. 매개변수 유효성 검사 예시

function divide(a, b) {
    if (typeof a !== 'number' || typeof b !== 'number') {
        return 'Both arguments must be numbers';
    }
    if (b === 0) {
        return 'Cannot divide by zero';
    }
    return a / b;
}

console.log(divide(6, 2));  // 3
console.log(divide(6, 'x'));  // Both arguments must be numbers

요약

JavaScript에서 함수의 매개변수는 다양한 방식으로 처리할 수 있으며, 각 방식은 유연한 함수 호출을 가능하게 합니다.

기본 매개변수: 인자가 전달되지 않았을 때 사용할 기본값을 정의.
나머지 매개변수: 여러 개의 인자를 배열로 처리.
arguments 객체: 함수에 전달된 모든 인자를 유사 배열 형태로 접근.
구조 분해 할당: 객체나 배열을 함수 매개변수에서 직접 해체하여 필요한 값을 쉽게 추출.
전개 연산자: 배열을 펼쳐서 개별 인자로 전달할 수 있음.

이러한 기능들을 활용하면 유연하고 견고한 함수를 정의할 수 있으며, 다양한 상황에 맞는 매개변수 처리를 할 수 있습니다.

코딩 스쿨 JavaScript