4.1 함수의 매개변수
JavaScript에서 함수의 매개변수는 값을 함수로 전달하여 처리할 수 있게 해줘. 이 기능 덕분에 함수가 더 유연하고 적응할 수 있어져. 이번 주제에서는 매개변수를 사용한 JavaScript 함수의 기본적인 작업들을 알아볼 거야. 기본 매개변수와 나머지 매개변수는 제외하고 말이야.
매개변수는 함수 이름 뒤의 괄호 안에 적어. 함수를 호출할 때 이 매개변수의 값들이 함수 내부의 해당 변수들로 전달돼.
예시:
함수 greet()에는 두 개의 매개변수 name과 age가 정의되어 있어. 함수를 호출할 때 Alice와 30이라는 값이 이 매개변수에 전달돼.
function greet(name, age) {
return `Hello, ${name}! You are ${age} years old.`;
}
console.log(greet('Alice', 30)); // "Hello, Alice! You are 30 years old."
정의되지 않은 매개변수 처리하기
함수 호출할 때 매개변수가 전달되지 않으면 그 매개변수의 값은 undefined야. 이렇게 되면 undefined를 지원하지 않는 연산을 수행할 경우 오류가 발생할 수도 있어.
예시:
함수 greet()에서는 name 매개변수가 전달됐는지 확인해. 전달되지 않았다면 Guest라는 문자열을 사용해.
function greet(name) {
if (name === undefined) {
return 'Hello, Guest!';
}
return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"
console.log(greet('Bob')); // "Hello, Bob!"
4.2 기본 매개변수
기본 매개변수는 호출 시 인수가 전달되지 않았거나 undefined로 전달됐을 때 사용할 값을 지정할 수 있어. 선택적 매개변수를 가진 함수를 작성할 때 특히 유용해.
문법:
function name (arg1 = value1, arg2 = value2) {
// function body
}
예시 1: 기본 매개변수를 가진 간단한 함수
이 예시에서 함수 greet()는 기본값 Guest를 가진 매개변수 name을 가지고 있어. 인수가 전달되지 않으면 기본값이 사용돼.
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet('Alice')); // 출력: Hello, Alice!
console.log(greet()); // 출력: Hello, Guest!
예시 2: 표현식을 사용하는 기본 매개변수
이 예시에서 매개변수 tax는 다른 인수가 전달되지 않았다면 price의 20%로 기본값이 계산돼.
function calculatePrice(price, tax = price * 0.2) {
return price + tax;
}
console.log(calculatePrice(100)); // 출력: 120
console.log(calculatePrice(100, 15)); // 출력: 115
예시 3: 다른 매개변수에 의존하는 기본 매개변수
이 예시에서 기본 매개변수는 미리 정의된 역할과 상태로 사용자를 생성할 수 있게 해줘.
function createUser(name, role = 'user', isActive = true) {
return { name, role, isActive };
}
console.log(createUser('Alice')); // 출력: { name: 'Alice', role: 'user', isActive: true }
console.log(createUser('Bob', 'admin')); // 출력: { name: 'Bob', role: 'admin', isActive: true }
console.log(createUser('Charlie', 'moderator', false)); // 출력: { name: 'Charlie', role: 'moderator', isActive: false }
4.3 나머지 매개변수
나머지 매개변수는 함수가 임의의 수의 인수를 받아 배열로 수집할 수 있게 해줘. 이는 임의의 수의 인수로 작업할 수 있는 함수를 만들 때 유용하지.
문법:
function name (arg1, arg2, ...argArray) {
// function body
}
예시 1: 전달된 모든 인수의 합계
이 예시에서 함수 sumAll()는 나머지 매개변수를 사용하여 전달된 모든 인수를 합산해.
function sumAll(...numbers) {
return numbers.reduce((sum, num) => sum + num, 0);
}
console.log(sumAll(1, 2, 3)); // 출력: 6
console.log(sumAll(4, 5, 6, 7, 8)); // 출력: 30
예시 2: 고정된 매개변수와 나머지 매개변수를 사용하는 함수
이 예시에서 함수 showItems()는 고정 매개변수 firstItem과 배열 otherItems로 수집된 불특정 수의 나머지 인수를 받아.
function showItems(firstItem, ...otherItems) {
console.log(`첫 번째 요소: ${firstItem}`);
console.log(`다른 요소들: ${otherItems.join(', ')}`);
}
showItems('apple', 'banana', 'cherry', 'date');
// 출력:
// 첫 번째 요소: apple
// 다른 요소들: banana, cherry, date
예시 3: 동적인 인수를 사용하는 함수
이 예시에서 함수 createMessage()는 첫 번째 인수 messageType을 받고 나머지 모든 매개변수를 messages 배열에 모아서 메시지를 생성해.
function createMessage(messageType, ...messages) {
return `[${messageType.toUpperCase()}]: ${messages.join(' ')}`;
}
console.log(createMessage('info', 'This', 'is', 'an', 'informational', 'message'));
// 출력: [INFO]: This is an informational message
console.log(createMessage('error', 'An', 'error', 'occurred'));
// 출력: [ERROR]: An error occurred
GO TO FULL VERSION