자바스크립트 기본 파라미터와 Rest 파라미터 완벽 가이드 - 코드카인 티스토리

안녕하세요 😊 코드카인 여러분!

오늘은 자바스크립트에서 자주 쓰이는 두 가지 강력한 도구, 기본 파라미터와 Rest 파라미터에 대해 알아볼 거예요. 이 두 가지는 함수를 더욱 유연하고 강력하게 만들어주는데요, 실생활에 빗대어 쉽게 이해해볼게요!

---

🌟 기본 파라미터란?

기본 파라미터(Default Parameters)는 함수를 호출할 때 값을 전달하지 않아도 자동으로 기본값을 할당하는 기능이에요.

🍴 예시: 레스토랑 예약

레스토랑에 예약을 할 때, 원하는 자리를 지정하지 않으면 기본적으로 창가 자리를 배정해주는 것과 같아요.

function reserveTable(seat = "창가 자리") {
  console.log(`예약된 자리는: ${seat}`);
}

reserveTable(); // 예약된 자리는: 창가 자리
reserveTable("중앙 자리"); // 예약된 자리는: 중앙 자리

이처럼 기본 파라미터는 함수의 호출자가 값을 생략했을 때 기본값을 설정할 수 있어요. 덕분에 예외 상황을 처리하기 쉬워지고, 코드도 더 간결해지죠.

---

🌟 Rest 파라미터란?

Rest 파라미터(Rest Parameters)는 함수에 전달된 나머지 인자들을 배열로 묶어주는 기능이에요.

🍕 예시: 피자 토핑 추가

피자를 주문할 때, 기본적으로 정해진 토핑 외에 추가 토핑은 모두 리스트에 담기는 상황을 떠올려보세요!

function makePizza(base, ...toppings) {
  console.log(`피자 베이스: ${base}`);
  console.log(`추가 토핑: ${toppings.join(", ")}`);
}

makePizza("치즈", "페퍼로니", "버섯", "파프리카");
// 피자 베이스: 치즈
// 추가 토핑: 페퍼로니, 버섯, 파프리카

Rest 파라미터를 사용하면 함수가 여러 개의 인자를 깔끔하게 받을 수 있어요. 특히, 매개변수 개수를 미리 알 수 없을 때 유용하답니다!

---

🛠 기본 파라미터와 Rest 파라미터를 함께 사용하기

두 가지를 함께 사용하면 더욱 강력해요. 아래는 정산 시스템을 구현한 간단한 예제입니다.

💳 예제: 정산 시스템

function calculateTotal(basePrice = 0, ...extraCharges) {
  const total = basePrice + extraCharges.reduce((sum, charge) => sum + charge, 0);
  console.log(`총액: ${total}원`);
}

calculateTotal(10000, 2000, 3000); // 총액: 15000원
calculateTotal(); // 총액: 0원

🔍 작동 원리

1. basePrice는 기본값을 0으로 설정했어요.
2. extraCharges는 Rest 파라미터로 나머지 값을 모두 배열로 받아요.
3. reduce() 메서드로 배열의 합계를 계산해 총액을 출력합니다.

---

🤔 알아두면 좋은 점

1. 기본 파라미터는 Rest 파라미터보다 앞에 위치해야 해요.
   • 기본값 설정은 고정적인 값부터 시작하는 게 더 자연스럽습니다.
2. Rest 파라미터는 하나만 사용 가능하며, 반드시 마지막에 위치해야 해요.
   • Rest는 나머지를 모두 묶기 때문에 이후 다른 매개변수를 사용할 수 없답니다.

---

😊 마무리하며..

기본 파라미터와 Rest 파라미터는 자바스크립트에서 가독성 좋은 함수를 작성하는 데 필수적인 도구예요. 여러분도 꼭 활용해보세요!

💪 "조금씩 배워가는 여러분을 응원합니다! 계속 함께해요 😊"