기본 매개변수(Default Parameters)는 자바스크립트에서 함수를 훨씬 더 편리하게 다룰 수 있게 해주는 기능입니다. 기본 매개변수를 사용하면 함수 호출 시 인자를 전달하지 않았을 때 사용할 값을 미리 지정해 둘 수 있습니다. 이를 통해 예상치 못한 오류를 방지하고 코드의 가독성을 크게 높일 수 있습니다.
자바스크립트는 ES2015(ES6)부터 기본 매개변수를 공식적으로 지원하기 시작했습니다. 이 기능을 활용하면 함수를 미리 정의된 값으로 초기화할 수 있어, 별도의 조건문 없이도 안전하게 기본 동작을 보장할 수 있습니다.
이 글에서는 기본 매개변수가 무엇인지, 어떻게 사용하는지, 그리고 어떤 종류의 표현식을 기본값으로 지정할 수 있는지 살펴보겠습니다. 실제 동작하는 예제 코드와 함께 단계별로 설명하니, 글을 다 읽고 나면 바로 프로젝트에 적용할 수 있을 것입니다.
매개변수(Parameter) vs 인자(Argument): 무엇이 다를까?
본격적으로 시작하기 전에, 초보 개발자들이 가장 많이 헷갈려 하는 질문 하나를 짚고 넘어가겠습니다. 바로 '매개변수'와 '인자'의 차이입니다. 자바스크립트에서 기본 매개변수를 제대로 활용하려면 이 두 개념의 차이를 먼저 이해해야 합니다.
매개변수(Parameter)는 함수에 전달하기 위해 선언된 이름 붙은 변수입니다. 매개변수에는 직접적인 값이 할당되지 않으며, 함수에 전달될 값의 자리표(placeholer) 역할을 합니다. 아래 예제를 살펴보세요.
function sayHello(name) {
console.log("Hello, " + name);
}
이 예제에서 name이 바로 매개변수입니다. 아직 어떤 값도 할당되어 있지 않습니다.
반면 인자(Argument)는 함수를 호출할 때 실제로 전달되는 값입니다.
sayHello("Brett");
위 코드는 Hello, Brett을 출력합니다. 여기서 "Brett"이 인자이며, 함수에 실제로 전달된 값입니다.
그렇다면 함수를 호출할 때 모든 매개변수에 값을 전달하지 않으면 어떻게 될까요?
sayHello()
위 코드는 Hello, undefined를 출력합니다. 함수에 값이 전달되지 않았기 때문에 매개변수가 undefined가 되어버린 것입니다.
JavaScript 기본 매개변수 사용법
이러한 문제는 기본 매개변수를 지정하면 간단히 해결할 수 있습니다. 기본 매개변수를 사용하면 인자가 전달되지 않았을 경우 자동으로 할당될 값을 미리 정해둘 수 있습니다.
기본값 할당에는 대입 연산자(=)를 사용합니다.
function sayHello(name="World") {
console.log("Hello, " + name);
}
sayHello();
위 코드는 Hello, World를 출력합니다. 함수 호출 시 인자를 전달하지 않았지만, 기본 매개변수 덕분에 name 매개변수가 자동으로 "World"라는 값을 갖게 된 것입니다. 즉, 인자가 전달되지 않는 한 언제나 "World"가 사용됩니다.
이 방식은 값이 전달되었는지 일일이 조건문으로 확인하는 것보다 훨씬 간결하고 효율적입니다.
기본 매개변수에는 원시 값(primitive value)이나 객체 등 어떤 값이든 지정할 수 있습니다. 유효한 기본값의 예는 다음과 같습니다.
- 문자열(String):
"Latte" - 숫자(Number):
2.40 - 불리언(Boolean):
true - 배열(Array):
["Steven", false] - 객체(Object):
{name: "Steven", loyaltyCustomer: false}
여러 개의 기본 매개변수 지정하기
함수 하나에 지정할 수 있는 기본 매개변수의 개수에는 제한이 없습니다. 다음 코드를 살펴보세요.
function createOrder(coffee="Espresso", price=1.75) {
console.log("Order: " + coffee);
console.log("Price: $" + price);
}
createOrder();
위 코드는 다음과 같이 출력됩니다.
Order: Espresso Price: $1.75
이 예제에서는 coffee와 price, 두 개의 기본 매개변수를 지정했습니다. 또한 기본 매개변수와 일반 매개변수를 섞어서 사용할 수도 있습니다. 다만 이 경우에는 반드시 일반 매개변수를 기본 매개변수보다 앞에 배치해야 합니다. 아래 예제를 보겠습니다.
function createOrder(coffee, price=1.75) {
console.log("Order: " + coffee);
console.log("Price: $" + price);
}
createOrder("Cappuccino");
위 코드는 다음과 같이 출력됩니다.
Order: Cappuccino Price: $1.75
여기서는 "Cappuccino"라는 인자 하나만 전달했습니다. coffee 매개변수에는 기본값이 설정되어 있지 않으므로, 반드시 인자를 전달해야 하며 그렇지 않으면 undefined가 반환됩니다.
반면 price 매개변수에는 기본값 1.75가 설정되어 있기 때문에, 가격을 따로 지정하지 않으면 자동으로 1.75가 적용됩니다.
일반 매개변수를 기본 매개변수 앞에 배치해야 하는 이유는, 인자 값이 함수 호출 시 전달된 순서대로 왼쪽부터 차례대로 할당되기 때문입니다. 만약 기본 매개변수가 먼저 위치하면 의도하지 않은 값이 잘못된 매개변수에 들어갈 수 있습니다.
함수를 기본 매개변수로 사용하기
기본 매개변수의 값으로 함수를 지정할 수도 있습니다. 이는 전달하려는 값을 다른 함수를 통해 계산해야 할 때 특히 유용합니다.
다음 코드에서는 게임에 새로 참여하는 플레이어에게 임의의 사용자 이름(username)을 생성해 주는 함수를 만들어 보겠습니다.
function getRandomUsername() {
var number = Math.floor(Math.random() * 100);
var username_list = ['Crash', 'Steve', 'Lucinda', 'Ellie'];
var username = username_list[Math.floor(Math.random() * username_list.length)];
var final_username = username + number;
return final_username;
}
function createUser(username = getRandomUsername(), email) {
console.log('Your username is: ' + username);
console.log('Your email is: ' + email);
}
createUser('test@test.com');
위 코드는 다음과 같이 출력됩니다.
Your username is: Crash87 Your email is: test@test.com
코드를 하나씩 분석해 보겠습니다.
먼저 getRandomUsername()이라는 함수를 선언했습니다. 이 함수는 난수를 생성하고, 네 개의 이름이 담긴 목록에서 무작위로 하나를 선택한 뒤, 선택된 이름 뒤에 난수를 붙여 새로운 사용자 이름을 만들어 반환합니다.
그다음 createUser 함수에서는 username 매개변수의 기본값을 getRandomUsername() 함수의 결과값으로 설정했습니다. 이렇게 하면 새 사용자를 생성할 때 사용자 이름을 직접 지정하지 않아도 자동으로 무작위 이름이 생성됩니다.
마지막으로 코드는 생성된 사용자 이름과 이메일 주소를 콘솔에 출력합니다.
마무리
기본 매개변수를 사용하면 함수 호출 시 인자가 전달되지 않았을 경우 자동으로 적용될 값을 미리 설정할 수 있습니다. 기본 매개변수를 활용하면 함수의 가독성이 좋아지고, 값이 누락되었을 때 발생할 수 있는 오류를 사전에 방지할 수 있습니다.
이제 여러분도 자바스크립트 기본 매개변수를 능숙하게 활용할 준비가 되었습니다. 실제 코드에 적용해 보면서 그 편리함을 직접 경험해 보세요!