5.1.1 선언식 vs 표현식 - 함수를 만드는 두 가지 방법

📘 5.1.1 선언식 vs 표현식 - 함수를 만드는 두 가지 방법

새로운 문을 열며 들어서게 되는 이 순간, 여러분과 함께 함수라는 아름다운 세계를 탐험해보려 해요. 함수는 마치 우리가 일상에서 사용하는 요리 레시피나 익숙한 계산기의 버튼처럼, 한 번 만들어두면 언제든지 불러와 사용할 수 있는 소중한 도구랍니다.

특히 오늘은 함수를 만드는 두 가지 서로 다른 방법을 살펴보려 해요. 마치 같은 목적지에 도달하는 여러 길이 있는 것처럼, 함수도 다양한 방법으로 만들어낼 수 있어요.

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

새로운 언어를 익히는 것은 새로운 친구를 사귀는 것과 같아요. 차근차근 인사부터 나누어 보겠습니다.

단어	쉬운 설명
함수 (function)	특정한 일을 하는 작은 프로그램 조각이에요.
함수 만드는 방법1	function 키워드로 시작해서 함수를 만드는 기본적인 방법이에요.
함수 만드는 방법2	변수에 함수를 담아두는 새로운 방법이에요.
호출 (call)	만든 함수를 실제로 사용하는 것을 말해요.
받을 값	함수가 받아서 사용할 입력값의 이름이에요.
돌려주는 값	함수가 계산해서 돌려주는 최종 결과예요.

예를 들어 계산기를 생각해보세요. 계산기에 숫자 두 개를 넣으면(받을 값), 더한 결과를 보여주죠(돌려주는 값). 함수도 이와 똑같은 원리로 작동해요.

✨ 함수가 뭔지 알아보기

함수는 프로그래밍에서 가장 중요하고 강력한 도구 중 하나예요. 같은 일을 반복해야 할 때, 매번 똑같은 코드를 다시 쓰는 대신 한 번만 만들어두고 계속 사용할 수 있게 해주는 정말 유용한 도구죠.

함수를 만드는 방법에는 크게 두 가지가 있어요.

방법1 (기본 방법)은 function 함수이름() { } 형태로 함수를 만드는 전통적인 방법이에요. 이 방법으로 만든 함수는 코드의 어느 곳에서든 사용할 수 있어요.

방법2 (변수 방법)은 let 변수이름 = function() { } 형태로 변수에 함수를 저장하는 현대적인 방법이에요. 이 방법으로 만든 함수는 변수가 만들어진 이후부터만 사용할 수 있어요.

둘 다 똑같은 일을 하지만 만드는 방법과 사용 규칙이 살짝 달라서, 상황에 따라 적절한 방법을 선택해야 해요.

일상 속의 비유: 요리 레시피

함수를 더 친근하게 이해하기 위해 요리 레시피의 이야기를 해볼게요.

라면을 끓이는 방법을 한 번 배워두면, 언제든지 그 방법을 사용해서 맛있는 라면을 끓일 수 있어요. 매번 "물을 끓이고, 면을 넣고, 3분 기다리고, 스프를 넣고..." 이렇게 전체 과정을 다시 생각할 필요가 없죠.

함수도 똑같아요. "두 숫자를 더하는 방법"을 함수로 한 번 만들어두면, 나중에 "더하기 해줘!"라고 부르기만 하면 자동으로 계산해줘요.

방법1은 요리책에 레시피를 적어두는 것처럼, 코드 어디에 적어도 전체에서 사용할 수 있어요. 마치 요리책을 펼치면 언제든지 레시피를 찾을 수 있는 것처럼요.

방법2는 메모지에 레시피를 적는 것처럼, 메모지를 만든 이후부터만 사용할 수 있어요. 메모지를 아직 안 만들었는데 레시피를 찾을 수는 없잖아요?

⚙️ 기본 사용법 배우기

이제 두 가지 방법의 문법을 차근차근 살펴보겠어요.

🔹 방법1: 기본 방식 (Function Declaration)

function 함수이름(받을값1, 받을값2) {
    // 함수가 할 일을 여기에 적어요
    return 결과;  // 결과 돌려주기 (선택사항)
}

// 함수 사용하기
함수이름(값1, 값2);

🔹 방법2: 변수 방식 (Function Expression)

let 변수이름 = function(받을값1, 받을값2) {
    // 함수가 할 일을 여기에 적어요
    return 결과;  // 결과 돌려주기 (선택사항)
};

// 함수 사용하기
변수이름(값1, 값2);

🔹 두 방법의 차이점 비교

구분	방법1 (기본)	방법2 (변수)
형태	function name() {}	let name = function() {};
사용 가능 시점	코드 어디서나 사용 가능	변수 생성 후부터만 사용 가능
끝에 세미콜론	안 써도 됨	꼭 써야 함
주요 용도	주요 함수들	조건부 함수, 임시 함수

🧪 직접 해보면서 배우기

이제 실제 예시를 통해 두 방법의 차이점을 명확히 확인해보겠어요.

🔹 첫 번째 예시: 방법1으로 친구들에게 인사하기

첫 번째 예시에서는 기본 방법을 사용해서 친구들에게 인사하는 함수를 만들어보겠어요.

// 방법1으로 인사 함수 만들기
function sayHello(friendName) {             // friendName이라는 이름을 받아요
    console.log("안녕하세요, " + friendName + "님! 오늘도 좋은 하루 보내세요!"); 
}

// 여러 친구들에게 인사해보기
console.log("=== 친구들에게 인사하기 ===");
sayHello("철수");                           // "안녕하세요, 철수님! 오늘도 좋은 하루 보내세요!"
sayHello("영희");                           // "안녕하세요, 영희님! 오늘도 좋은 하루 보내세요!"
sayHello("민수");                           // "안녕하세요, 민수님! 오늘도 좋은 하루 보내세요!"

console.log("모든 친구들에게 인사 완료!");

이렇게 한 번 만들어둔 함수로 여러 친구들에게 쉽게 인사할 수 있어요!

🔹 두 번째 예시: 방법2로 숫자 계산기 만들기

두 번째 예시에서는 변수 방법을 사용해서 두 수를 더하는 계산기를 만들어보겠어요.

// 방법2로 더하기 계산기 만들기
let addCalculator = function(num1, num2) {  // 두 개의 숫자를 받아요
    let result = num1 + num2;               // 두 숫자를 더해서 결과 저장
    return result;                          // 계산 결과를 돌려줘요
};

console.log("=== 더하기 계산기 테스트 ===");

// 계산기를 사용해서 여러 계산하기
let answer1 = addCalculator(5, 3);          // 5 + 3 = 8
let answer2 = addCalculator(10, 20);        // 10 + 20 = 30
let answer3 = addCalculator(7, 13);         // 7 + 13 = 20

console.log("5 + 3 = " + answer1);          // "5 + 3 = 8" 출력
console.log("10 + 20 = " + answer2);        // "10 + 20 = 30" 출력
console.log("7 + 13 = " + answer3);         // "7 + 13 = 20" 출력

console.log("계산 모두 완료!");

return을 사용해서 계산 결과를 돌려받아 다른 변수에 저장할 수 있어요!

🔹 세 번째 예시: 사용 시점 차이 확인하기

세 번째 예시에서는 두 방법의 가장 큰 차이점인 사용 시점을 확인해보겠어요.

console.log("=== 사용 시점 차이 테스트 ===");

// 방법1은 함수를 만들기 전에도 사용할 수 있어요!
encourageStudent("지원");                   // 정상 작동! "지원님, 공부 화이팅!"

// 방법1 (코드 어디에 있어도 위에서 사용 가능해요)
function encourageStudent(studentName) {    // 학생 이름을 받아요
    console.log(studentName + "님, 공부 화이팅! 할 수 있어요!"); 
}

console.log("방법2 함수 만들기 전에는 사용 불가...");

let praiseStudent = function(studentName) { // 방법2로 함수 생성
    console.log("와우! " + studentName + "님 정말 잘했어요!");   
};

console.log("방법2 함수 만든 후에는 사용 가능!");
praiseStudent("다은");                      // 이제 사용 가능! "와우! 다은님 정말 잘했어요!"

console.log("사용 시점 테스트 완료!");

이 예시를 통해 방법1은 언제든지 사용할 수 있지만, 방법2는 만든 이후부터만 사용할 수 있다는 걸 확인할 수 있어요.

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

함수를 만들 때 자주 하는 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있어요.

첫 번째 실수는 방법2에서 세미콜론을 안 쓰는 것이에요.

// 잘못된 예시
let func = function() {}

// 올바른 예시
let func = function() {};

두 번째 실수는 방법2를 선언 전에 사용하는 것이에요. 변수가 만들어지기 전에는 사용할 수 없어요.

세 번째 실수는 함수 이름에 공백을 사용하는 것이에요. function my func() {}처럼 쓰면 안 되고, function myFunc() {}처럼 써야 해요.

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

이제 우리가 함께 배운 내용을 직접 손으로 써보고 체험해볼 시간이에요. 배움은 머리로만 하는 것이 아니라, 마음과 손끝으로 함께 만들어가는 것이거든요.

Ex1) 자기소개 함수 만들기

방법1을 사용해서 자신의 이름과 나이를 출력하는 함수를 만들어보세요.

// 방법1으로 자기소개 함수를 만들어보세요
function introduceMyself() {
    console.log("안녕하세요! 제 이름은 김민수이고, 나이는 10살입니다.");
}

// 함수 사용해보기
introduceMyself();  // 함수 호출

Ex2) 곱하기 계산기 만들기

방법2를 사용해서 두 숫자를 곱하는 함수를 만들어보세요.

// 방법2로 곱하기 계산기를 만들어보세요
let multiplyNumbers = function(x, y) {
    return x * y;  // 두 수를 곱한 결과를 돌려줘요
};

// 사용 예시: 4 × 5 = 20
let result = multiplyNumbers(4, 5);
console.log("4 × 5 = " + result);  // 20 출력

Ex3) 사용 시점 이해하기

다음 중 어떤 코드가 오류가 날까요? 이유도 설명해보세요.

// 코드 A
greetMorning();
function greetMorning() {
    console.log("좋은 아침이에요!");
}

// 코드 B  
greetEvening();
let greetEvening = function() {
    console.log("좋은 저녁이에요!");
};

정답: 코드 B가 오류나요.

이유: 방법2는 변수에 함수를 저장하는 방식이라 변수가 만들어진 이후부터만 사용할 수 있어요. 하지만 방법1은 코드 어디서든 사용할 수 있답니다.

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

함수를 배우기 전에 지난 시간에 배운 반복문을 복습해볼까요? 함수와 반복문을 함께 사용하면 더욱 강력한 프로그램을 만들 수 있어요!

복습 문제) for문으로 함수 여러 번 호출하기

방법1으로 "안녕하세요!"를 출력하는 함수를 만들고, for문을 사용해서 이 함수를 5번 호출해보세요.

// 해답:
function sayHello() {
    console.log("안녕하세요!");
}

// for문으로 5번 호출하기
for (let i = 1; i <= 5; i++) {
    console.log(i + "번째: ");
    sayHello();
}

💫 마무리하며

오늘 배운 함수는 프로그래밍에서 정말 중요한 개념이에요. 방법1과 방법2 두 가지 모두 각각의 장점이 있어서, 상황에 맞게 선택해서 사용하면 돼요.

가장 중요한 포인트는 방법1은 언제든지 사용 가능하고, 방법2는 만든 이후부터만 사용 가능하다는 것이에요. 그리고 방법2에는 세미콜론을 꼭 붙여야 한다는 것도 기억해주세요.

함수는 마치 레고 블록처럼 작은 기능들을 만들어서 조합하는 거예요. 여러분도 멋진 함수들을 만들어서 효율적인 프로그램을 작성해보세요.

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

✅ 학습 완료 체크리스트

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

학습 내용	이해했나요?
함수를 만드는 두 가지 방법	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅
4단원 반복문 복습	✅

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

---