5.1.3 return으로 결과 돌려주기 - 함수의 답변 받기

📘 5.1.3 return으로 결과 돌려주기 - 함수의 답변 받기

지난 시간의 여운이 아직 마음에 남아있나요? 우리는 함께 함수에 기본값을 주는 따뜻한 방법을 배웠어요. 오늘은 함수에서 가장 중요한 기능 중 하나인 return에 대해 이야기해보려 해요.

return은 마치 선생님에게 질문하고 답을 받는 것처럼, 함수에게 일을 맡기고 그 결과를 고스란히 돌려받는 아름다운 방법이에요.

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

새로운 개념과 만나기 전에, 그 언어들과 먼저 인사를 나눠보겠어요.

단어	쉬운 설명
return	함수가 계산한 결과를 돌려주는 특별한 명령어예요.
돌려주는 값	함수가 return으로 돌려주는 값을 말해요.
일하기만 하는 함수	return 없이 일만 하고 끝나는 함수예요.
함수 호출	함수를 실행시키는 것을 말해요.
종료	함수가 끝나는 것을 말해요.

예를 들어 계산기를 생각해보세요. 계산기에 "3 + 5"를 입력하면 "8"이라는 결과를 보여주죠. 함수의 return도 이와 똑같은 역할을 해요.

✨ return이 뭔지 알아보기

return은 함수가 계산한 결과를 돌려주는 아주 중요한 명령어예요. return 값; 형태로 사용하며, return을 만나는 그 즉시 함수가 종료돼요. 마치 퀴즈쇼에서 정답을 말하면 그 문제가 끝나는 것처럼요.

return이 있는 함수는 결과를 변수에 저장하거나 다른 계산에 바로 사용할 수 있어요. 하지만 return이 없는 함수는 일만 하고 끝나며, 결과값으로 undefined라는 특별한 값을 돌려줘요.

정말 중요한 특징 중 하나는 return 다음에 있는 코드는 절대 실행되지 않는다는 점이에요. 함수가 이미 끝났으니까요.

일상 속의 비유: 똑똑한 자판기

return을 더 친근하게 이해하기 위해 똑똑한 자판기의 이야기를 해볼게요.

상상해보세요. 학교에 특별한 똑똑한 자판기가 있어요. 이 자판기에 동전을 넣고 버튼을 누르면 (함수 호출), 자판기가 내부에서 열심히 음료를 준비하고 (함수 내부 처리), 마지막에 음료수를 밖으로 내보내줘요 (return).

return이 있는 함수는 이 똑똑한 자판기처럼 결과물을 돌려줘요. 여러분은 그 결과물을 받아서 마시거나, 친구에게 줄 수도 있어요.

return이 없는 함수는 세차장처럼 일만 하고 끝나요. 세차장에 차를 맡기면 깨끗하게 닦아주지만, 따로 뭔가를 돌려주지는 않죠. 그냥 일을 해줄 뿐이에요.

가장 중요한 점: 자판기에서 음료가 나오면 작동이 끝나듯이, 함수에서 return을 만나면 그 즉시 함수가 완전히 끝나요.

⚙️ 기본 사용법 배우기

return의 기본 문법은 정말 간결하고 아름다워요.

🔹 return 기본 문법

function 함수이름(받을값) {
    // 함수가 할 일들
    return 돌려줄값;        // 값을 돌려주고 함수 종료
    // 이 아래 코드는 절대 실행되지 않음!
}

// 함수 사용하기
let 결과 = 함수이름(값);    // 결과를 변수에 저장해서 사용

🔹 return 사용 패턴들

패턴	예시
값 직접 반환	return 10;
변수 반환	return result;
계산 결과 반환	return a + b;
조건부 반환	if(조건) return 값;

🔹 return 있는 함수 vs 없는 함수

구분	return 있는 함수	return 없는 함수
목적	결과를 계산해서 돌려줌	일만 하고 끝남
사용법	let 결과 = 함수();	함수();
반환값	지정한 값	undefined
예시	계산기, 변환기	출력, 알림

🧪 직접 해보면서 배우기

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

🔹 첫 번째 예시: 계산 함수 만들고 결과 활용하기

첫 번째 예시에서는 return이 있는 함수와 없는 함수의 차이점을 명확히 보여드릴게요.

// return이 있는 더하기 함수 (결과를 돌려줘요)
function addNumbers(a, b) {              // 두 숫자를 받아요
    let sum = a + b;                     // 두 숫자를 더해서 sum에 저장
    return sum;                          // 계산 결과를 돌려주고 함수 종료
}

// return이 없는 출력 함수 (일만 하고 끝나요)
function printMessage(message) {         // 메시지를 받아요
    console.log("알림: " + message);     // 메시지를 출력하기만 해요
    // return이 없으므로 undefined가 자동으로 반환돼요
}

console.log("=== return 차이점 체험 ===");

// return 있는 함수 사용하기
let result1 = addNumbers(5, 3);          // 결과를 변수에 저장할 수 있어요
console.log("5 + 3 = " + result1);      // "5 + 3 = 8" 출력

// return 없는 함수 사용하기
let result2 = printMessage("안녕하세요!"); // undefined가 저장되어요
console.log("함수 결과: " + result2);    // "함수 결과: undefined" 출력

// return 값을 바로 다른 계산에 사용하기
let finalResult = addNumbers(10, 20) + addNumbers(5, 15);  // 30 + 20 = 50
console.log("조합 계산: " + finalResult); // "조합 계산: 50" 출력

console.log("return의 차이점을 잘 보셨나요?");

이 예시를 통해 return이 있으면 결과를 받아서 다른 곳에 사용할 수 있다는 걸 확인할 수 있어요!

🔹 두 번째 예시: 조건에 따라 다른 값을 return하기

두 번째 예시에서는 조건문과 return을 함께 사용해서 상황에 따라 다른 결과를 돌려주는 똑똑한 함수를 만들어보겠어요.

// 학생 등급을 판정하는 똑똑한 함수
function getStudentGrade(score) {               // 점수를 받아요
    console.log("점수 확인 중: " + score + "점");  // 현재 확인하는 점수 출력

    // 조건에 따라 다른 등급을 return해요
    if(score >= 90) {                    // 90점 이상이면
        return "A등급 - 훌륭해요!";         // "A등급"을 돌려주고 함수 종료
    } else if(score >= 80) {             // 80점 이상이면
        return "B등급 - 잘했어요!";         // "B등급"을 돌려주고 함수 종료
    } else if(score >= 70) {             // 70점 이상이면
        return "C등급 - 조금 더 노력해요!"; // "C등급"을 돌려주고 함수 종료
    } else {                             // 70점 미만이면
        return "F등급 - 다음엔 더 열심히!"; // "F등급"을 돌려주고 함수 종료
    }

    // 이 코드는 절대 실행되지 않아요 (위에서 이미 return으로 종료)
    console.log("이 메시지는 보이지 않아요!");
}

console.log("=== 조건부 return 테스트 ===");

// 다양한 점수로 테스트해보기
let grade1 = getStudentGrade(95);               // "A등급 - 훌륭해요!"가 저장됨
let grade2 = getStudentGrade(85);               // "B등급 - 잘했어요!"가 저장됨
let grade3 = getStudentGrade(65);               // "F등급 - 다음엔 더 열심히!"가 저장됨

console.log("95점 결과: " + grade1);
console.log("85점 결과: " + grade2);
console.log("65점 결과: " + grade3);

console.log("조건에 따라 다른 답을 받았어요!");

이처럼 조건문과 return을 함께 사용하면 상황에 맞는 다양한 답을 받을 수 있어요.

🔹 세 번째 예시: 함수들을 조합해서 복잡한 계산하기

세 번째 예시에서는 여러 함수의 결과를 조합해서 더 복잡한 계산을 하는 방법을 보여드릴게요.

// 기본 계산 함수들 (모두 return으로 결과를 돌려줘요)
function multiply(x, y) {                // 곱하기 함수
    return x * y;                        // 곱한 결과를 돌려줘요
}

function subtract(x, y) {                // 빼기 함수
    return x - y;                        // 뺀 결과를 돌려줘요
}

// 복잡한 수학 공식을 계산하는 함수
function calculateSimpleFormula(a, b, c) {  // 간단한 수식: (a × b) - c
    console.log("계산 시작: (" + a + " × " + b + ") - " + c);

    let step1 = multiply(a, b);          // 1단계: a × b
    console.log("1단계: " + a + " × " + b + " = " + step1);

    let step2 = subtract(step1, c);      // 2단계: (a × b) - c
    console.log("2단계: " + step1 + " - " + c + " = " + step2);

    return step2;                        // 최종 결과 반환
}

console.log("=== 함수 조합 테스트 ===");

let result = calculateSimpleFormula(6, 4, 8);  // (6 × 4) - 8 = 16
console.log("🎉 최종 답: " + result);

// 결과를 또 다른 계산에 사용하기
let doubleResult = multiply(result, 2);  // 결과에 2를 곱하기
console.log("🎯 최종 답의 2배: " + doubleResult);

console.log("함수들을 레고처럼 조합했어요!");

이 예시를 통해 return이 있는 함수들을 레고 블록처럼 조합해서 복잡한 계산을 할 수 있다는 걸 확인할 수 있어요.

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

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

첫 번째 실수는 return 뒤에 코드를 작성하는 것이에요. return 이후의 코드는 절대 실행되지 않아요.

두 번째 실수는 return 없이 결과를 기대하는 것이에요. 결과가 필요한 함수라면 반드시 return을 사용해야 해요.

세 번째 실수는 모든 경우에 return을 넣지 않는 것이에요. if문을 사용할 때 일부 조건에서만 return이 있으면 다른 조건에서는 undefined가 반환돼요.

네 번째 실수는 return값을 저장하지 않는 것이에요. let 결과 = 함수(); 형태로 저장해야 계산 결과를 활용할 수 있어요.

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

이제 여러분이 직접 배운 내용을 체험해볼 시간이에요. 코딩은 단순히 이해하는 것을 넘어서, 실제로 만들어보며 그 의미를 깊이 체득하는 과정이기도 하거든요.

Ex1) 빼기 계산 함수

두 숫자를 빼는 함수를 만들고, 결과를 변수에 저장해서 출력해보세요.

// 두 숫자를 빼는 함수를 만들어보세요
function subtractNumbers(a, b) {
    return a - b;
}

// 사용 예시: 10 - 3 = 7
let result = subtractNumbers(10, 3);
console.log("10 - 3 = " + result);  // "10 - 3 = 7" 출력

Ex2) 짝수 홀수 판별기

숫자가 짝수인지 홀수인지 판단해서 "짝수" 또는 "홀수"를 return하는 함수를 만들어보세요.

// 짝수 홀수를 판별하는 함수를 만들어보세요
function checkEvenOdd(number) {
    if(number % 2 === 0) {
        return "짝수";
    } else {
        return "홀수";
    }
}

// 사용 예시
console.log(checkEvenOdd(4));   // "짝수"
console.log(checkEvenOdd(7));   // "홀수"

Ex3) 코드 결과 예측하기

다음 코드의 결과를 예측해보세요.

function testReturn() {
    console.log("첫 번째 메시지");
    return "중간 결과";
    console.log("두 번째 메시지");  // 이 줄은 실행될까요?
}

let result = testReturn();
console.log(result);

정답:

첫 번째 메시지
중간 결과

설명: return을 만나면 함수가 즉시 종료되므로 "두 번째 메시지"는 절대 실행되지 않아요.

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

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

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

return이 있는 합계 계산 함수를 만들고, for문으로 1부터 5까지의 합을 구해보세요.

// 해답:
function calculateSum(maxNumber) {
    let sum = 0;
    for (let i = 1; i <= maxNumber; i++) {
        sum += i;
    }
    return sum;  // 계산 결과를 돌려줘요
}

let result = calculateSum(5);  // 1+2+3+4+5 = 15
console.log("1부터 5까지의 합: " + result);

💫 마무리하며

오늘 배운 return은 함수에서 정말 중요한 기능이에요. return을 사용하면 함수가 계산한 결과를 받아서 다른 곳에서 활용할 수 있어요.

가장 중요한 포인트는 return은 결과를 돌려주고 함수를 즉시 종료시킨다는 것과, return이 있어야 함수의 결과를 다른 계산에 사용할 수 있다는 것이에요.

return은 마치 똑똑한 자판기처럼 우리가 원하는 정확한 결과물을 만들어서 돌려주는 역할을 해요. 여러분도 return을 활용해서 똑똑하고 유용한 함수들을 만들어보세요.

다음 시간에는 함수를 더 간단하게 쓸 수 있는 화살표 함수에 대해 배워볼 예정이에요. 여러분의 함수 실력이 하루하루 성장하는 모습을 보며 저도 함께 기뻐하고 있어요! 계속 함께해주세요! ✨

✅ 학습 완료 체크리스트

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

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

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

---