5.1.2 기본값 설정하기 - 함수에 기본값 주기

📘 5.1.2 기본값 설정하기 - 함수에 기본값 주기

이전 시간의 기억들이 여러분 마음에 아직 생생하게 남아있나요? 우리는 함께 함수를 만드는 두 가지 방법을 배웠어요. 오늘은 함수를 더욱 똑똑하고 안전하게 만드는 특별한 기법을 배워보려 해요. 바로 기본값이에요.

이것은 마치 레스토랑의 정성스러운 기본 메뉴처럼, 손님이 특별히 주문하지 않아도 자연스럽게 제공되는 따뜻한 서비스와 같아요.

🧠 새로운 단어들과 친해지기

새로운 개념을 배우기 전에, 그 언어와 먼저 친숙해지는 것이 좋겠어요.

단어	쉬운 설명
기본값	함수를 호출할 때 값을 안 주면 자동으로 사용되는 값이에요.
받을 값	함수가 받아서 사용할 입력값의 이름이에요.
전달값	함수를 호출할 때 실제로 전달하는 값이에요.
undefined	값이 정해지지 않은 상태를 나타내요.

예를 들어 음식 주문을 생각해보세요. "햄버거 주세요"라고 하면 기본 세트가 나오고, "햄버거에 콜라 추가로 주세요"라고 하면 원하는 음료가 나오는 것과 같아요.

✨ 기본값이 뭔지 알아보기

기본값은 함수를 만들 때 "만약 이 값을 안 주면 이걸 대신 사용해줘"라고 미리 정해두는 것이에요. 이렇게 하면 함수를 사용할 때 깜빡하고 값을 안 줘도 에러가 나지 않고 안전하게 작동해요.

기본값을 설정하는 방법은 function 함수이름(받을값 = 기본값) 형태로 받을 값 이름 뒤에 등호(=)와 기본값을 적어주면 돼요. 참 간결하고 아름다운 문법이에요.

함수를 호출할 때 값을 주면 그 값을 사용하고, 값을 안 주면 기본값을 자동으로 사용해요. 이렇게 하면 undefined 때문에 생기는 문제들을 해결할 수 있어서 함수가 훨씬 안전하고 사용하기 편해져요.

일상 속의 비유: 레스토랑의 기본 메뉴

기본값을 더 친근하게 이해하기 위해 레스토랑에서 주문하기의 이야기를 해볼게요.

상상해보세요. 여러분이 좋아하는 레스토랑에 갔어요. 메뉴판에 "파스타 기본 세트"라고 적혀있다면 어떨까요?

손님이 "파스타 주세요"라고 하면 자동으로 기본 세트(파스타 + 기본 음료 + 기본 사이드)가 나와요. 하지만 손님이 "파스타에 콜라 추가로 주세요"라고 하면 콜라가 포함된 파스타가 나오죠.

함수의 기본값도 똑같아요. 함수를 만들 때 "기본 메뉴"를 정해두면, 나중에 함수를 부를 때 특별한 주문을 안 해도 기본 메뉴로 동작해요. 하지만 특별한 값을 주면 그 값으로 바뀌어서 작동하죠.

⚙️ 기본 사용법 배우기

기본값의 문법은 정말 우아하고 직관적이에요.

🔹 기본값 설정 방법

// 방법1에서 기본값
function 함수이름(받을값1 = 기본값1, 받을값2 = 기본값2) {
    // 함수가 할 일
}

// 방법2에서 기본값
let 함수이름 = function(받을값1 = 기본값1, 받을값2 = 기본값2) {
    // 함수가 할 일
};

🔹 기본값 동작 방식

호출 방법	결과
함수이름()	모든 받을 값이 기본값 사용
함수이름(값1)	첫 번째는 값1, 나머지는 기본값
함수이름(값1, 값2)	모든 받을 값이 전달받은 값 사용

🔹 기본값으로 사용할 수 있는 것들

• 숫자: age = 10
• 문자열: name = "익명"
• boolean: isActive = true

🧪 직접 해보면서 배우기

이제 실제 예시를 통해 기본값이 어떻게 작동하는지 차근차근 살펴보겠어요.

🔹 첫 번째 예시: 친구들에게 인사하는 함수

첫 번째 예시에서는 기본 이름으로 인사하는 친절한 함수를 만들어보겠어요.

// 기본값을 사용한 인사 함수 만들기
function greetFriend(name = "익명의 친구") {    // name의 기본값은 "익명의 친구"
    console.log("안녕하세요, " + name + "님! 오늘도 좋은 하루 보내세요!");
}

console.log("=== 친구 인사 테스트 ===");

// 이름을 주는 경우
greetFriend("철수");                    // "안녕하세요, 철수님! 오늘도 좋은 하루 보내세요!"

// 이름을 안 주는 경우 (기본값 사용)
greetFriend();                          // "안녕하세요, 익명의 친구님! 오늘도 좋은 하루 보내세요!"

console.log("인사 테스트 완료! 모든 친구들과 인사했어요!");

이 예시에서 가장 중요한 점은 이름을 안 줘도 함수가 에러 없이 잘 작동한다는 거예요!

🔹 두 번째 예시: 안전한 쇼핑 계산기

두 번째 예시에서는 기본값으로 안전한 계산 함수를 만들어보겠어요.

// 기본값이 있는 쇼핑 계산 함수 만들기
function calculateShopping(price = 0, tax = 0.1) {  // 가격과 세금에 기본값 설정
    let finalPrice = price * (1 + tax); // 세금을 추가한 최종 가격
    return finalPrice;                   // 최종 금액 반환
}

console.log("=== 쇼핑 계산기 테스트 ===");

// 모든 값을 주는 경우
let total1 = calculateShopping(1000, 0.2);    // 가격 1000원, 세금 20%
console.log("모든 값 입력: " + total1 + "원");       // "모든 값 입력: 1200원"

// 가격만 주는 경우
let total2 = calculateShopping(500);                // 가격만 500원, 세금은 기본값 10%
console.log("가격만 입력: " + total2 + "원");        // "가격만 입력: 550원"

// 값을 안 주는 경우
let total3 = calculateShopping();                   // 모든 값이 기본값
console.log("아무것도 안 입력: " + total3 + "원");   // "아무것도 안 입력: 0원"

console.log("계산기 테스트 완료! 모든 경우에 안전하게 작동해요!");

이렇게 기본값을 설정해두면 어떤 상황에서도 함수가 안전하게 작동해요.

🔹 세 번째 예시: 게임 캐릭터 생성기

세 번째 예시에서는 게임 캐릭터를 만드는 재미있는 함수를 만들어보겠어요.

// 게임 캐릭터 생성 함수 (기본 스탯이 있어요)
function createGameCharacter(name = "무명의 모험가", level = 1, health = 100) {
    console.log("🎮 === 새로운 캐릭터 탄생! ===");
    console.log("👤 이름: " + name);
    console.log("⭐ 레벨: " + level);
    console.log("❤️ 체력: " + health);
    console.log("🎉 캐릭터 생성 완료! 모험을 시작하세요!");
    console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
}

console.log("=== 캐릭터 생성 테스트 ===");

// 이름만 정하고 나머지는 기본값으로
createGameCharacter("용사 민수");

// 이름과 레벨만 정하기
createGameCharacter("마법사 지수", 5);

// 모든 스탯을 직접 설정
createGameCharacter("전사 다연", 10, 200);

// 완전 기본 캐릭터 (모든 기본값 사용)
createGameCharacter();

console.log("캐릭터 생성 테스트 완료! 멋진 캐릭터들이 만들어졌어요!");

이 예시를 통해 기본값이 얼마나 유연하고 편리한지 확인할 수 있어요.

🧠 자주 하는 실수와 주의할 점

기본값을 사용할 때 자주 하는 실수들을 미리 알아두면 더 부드러운 코딩을 할 수 있어요.

첫 번째 실수는 기본값이 없는 받을 값을 뒤에 두는 것이에요.

// 잘못된 예시
function test(a = 5, b) { } // b에 기본값이 없어서 문제!

// 올바른 예시
function test(a, b = 5) { } // 기본값 없는 받을 값이 앞에

두 번째 실수는 문자열 기본값에 따옴표를 안 쓰는 것이에요.

// 잘못된 예시
function test(name = 익명) { } // 따옴표가 없어서 오류!

// 올바른 예시
function test(name = "익명") { } // 문자열은 따옴표 필수!

✏️ 연습문제로 개념 다지기

이제 여러분이 직접 배운 내용을 손끝으로 경험해볼 시간이에요. 학습은 마음속으로만 하는 것이 아니라, 실제로 만들어보며 체득하는 것이기도 하거든요.

Ex1) 자기소개 함수 만들기

기본 나이가 10살인 자기소개 함수를 만들어보세요.

// 기본 나이가 10살인 자기소개 함수를 만들어보세요
function introduce(name, age = 10) {
    console.log("안녕하세요! 제 이름은 " + name + "이고, 나이는 " + age + "살입니다.");
}

// 사용 예시
introduce("민수");          // 나이는 기본값 10
introduce("지수", 12);      // 나이는 12

Ex2) 도형 넓이 계산기

기본값이 있는 직사각형 넓이 계산 함수를 만들어보세요. (기본 크기: 가로 5, 세로 3)

// 기본 크기가 있는 직사각형 넓이 계산 함수를 만들어보세요
function calculateArea(width = 5, height = 3) {
    return width * height;
}

console.log(calculateArea());        // 15 (5 * 3)
console.log(calculateArea(8));       // 24 (8 * 3)
console.log(calculateArea(6, 4));    // 24 (6 * 4)

Ex3) 결과 예측하기

다음 함수 호출의 결과를 예측해보세요.

function greet(message = "안녕", name = "친구") {
    console.log(message + ", " + name + "!");
}

greet();                    // 결과는?
greet("좋은 아침");         // 결과는?
greet("반가워", "철수");     // 결과는?

정답:

• "안녕, 친구!"
• "좋은 아침, 친구!"
• "반가워, 철수!"

🔄 4단원 복습하기 - 반복문을 기억하고 있나요?

함수에 기본값을 설정하는 방법을 배웠는데, 지난 시간에 배운 반복문과 함께 사용하면 더욱 강력한 프로그램을 만들 수 있어요!

복습 문제) for문과 기본값 함수 조합하기

기본값이 있는 점수 출력 함수를 만들고, for문을 사용해서 여러 학생의 점수를 출력해보세요.

// 해답:
function printScore(name, score = 0) {
    console.log(name + "의 점수: " + score + "점");
}

let students = ["철수", "영희", "민수"];
let scores = [85, 92]; // 민수의 점수는 없어서 기본값 사용

for (let i = 0; i < students.length; i++) {
    printScore(students[i], scores[i]); // scores[2]는 undefined이므로 기본값 사용
}

💫 마무리하며

오늘 배운 기본값은 함수를 훨씬 더 안전하고 사용하기 편하게 만드는 멋진 기능이에요. 값을 깜빡해도 에러가 안 나고, 자주 사용하는 값을 미리 설정해둘 수 있어서 정말 편리해요.

가장 중요한 포인트는 받을 값 이름 뒤에 = 기본값을 써주는 것과, 문자열은 반드시 따옴표로 감싸는 것이에요. 그리고 기본값이 없는 받을 값은 앞쪽에 두는 것도 기억해주세요.

기본값은 마치 친절한 레스토랑처럼 여러분의 코딩을 도와줄 거예요. 특별히 지시하지 않아도 알아서 잘 동작하고, 특별한 지시를 하면 그대로 따라하는 똑똑한 동반자랍니다.

다음 시간에는 함수가 계산한 결과를 돌려받는 방법을 배워볼 예정이에요. 여러분의 함수 실력이 날마다 자라나는 모습을 보며 저도 함께 기뻐하고 있어요! 계속 함께해주세요! ✨

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 차근차근 확인해보세요!

학습 내용	이해했나요?
기본값의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 동작 방식	✅
자주 하는 실수들	✅
실전 예제 이해	✅
4단원 반복문 복습	✅

📂 마무리 정보

오늘 배운 5.1.2 내용이 여러분의 마음 속에 잘 자리잡았나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---