5.2.1 기본 문법 익히기 - 화살표 함수로 간단하게

📘 5.2.1 기본 문법 익히기 - 화살표 함수로 간단하게

지난 시간의 기억들이 아직 따뜻하게 남아있나요? 우리는 함께 return으로 함수의 결과를 받는 방법을 배웠어요. 오늘은 정말 특별하고 신기한 함수 만들기 방법을 탐험해보려 해요. 바로 화살표 함수예요.

이것은 마치 긴 문장을 줄임말로 쓰는 것처럼, 함수를 더 짧고 간결하게 만드는 아름다운 방법이에요.

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

새로운 문법을 배우기 전에, 그 언어들과 먼저 친숙해져보겠어요.

단어	쉬운 설명
화살표 함수	=> 기호를 사용해서 만드는 간단한 함수예요.
받을 값	함수가 받아서 사용할 입력값의 이름이에요.
화살표 (=>)	함수를 만들 때 사용하는 특별한 기호예요.
중괄호 생략	함수 내용이 한 줄일 때 { }를 안 써도 되는 것이에요.

예를 들어 화살표를 생각해보세요. 길에서 보는 화살표(→)는 "이쪽으로 가세요"라는 뜻이죠. 함수의 화살표(=>)도 "이 결과로 가세요"라는 뜻이에요.

✨ 화살표 함수가 뭔지 알아보기

화살표 함수는 => 기호를 사용해서 더 짧고 간단하게 함수를 만드는 새로운 방법이에요. 기본 형태는 (받을값) => { 함수 내용 }처럼 써요.

정말 신기한 건 받을 값이 하나면 괄호를 생략할 수 있다는 점이에요: 받을값 => { 함수 내용 }. 또한 함수 내용이 한 줄이면 중괄호와 return도 생략할 수 있어요: (받을값) => 결과.

다만 화살표 함수는 변수에 담아서만 사용할 수 있어요. 하지만 기존 함수와 똑같은 일을 하면서도 훨씬 간단하게 쓸 수 있어서 정말 편리해요.

일상 속의 비유: 줄임말 만들기

화살표 함수를 더 친근하게 이해하기 위해 줄임말의 이야기를 해볼게요.

평소에 여러분도 줄임말을 자주 사용하죠? "안녕하세요"를 "안녕"이라고 줄여서 말하고, "고맙습니다"를 "고마워"라고 줄여서 말하기도 해요. 의미는 똑같지만 더 간단하고 빠르게 말할 수 있어요.

화살표 함수도 정확히 같은 개념이에요. 기존 함수를 더 짧고 간단하게 쓰는 방법이에요.

예를 들어:

• 기존 방식: let greet = function(name) { return "안녕 " + name; }
• 화살표 방식: let greet = name => "안녕 " + name;

똑같은 일을 하지만 훨씬 간단하죠. 마치 "안녕하세요, 반가워요, 좋은 하루 보내세요"를 "안녕!"로 줄인 것처럼요.

⚙️ 기본 사용법 배우기

화살표 함수의 문법을 차근차근 살펴보겠어요.

🔹 기본 화살표 함수 문법

// 기존 방법
let 함수이름 = function(받을값) {
    return 결과;
};

// 화살표 함수로 바꾸기
let 함수이름 = (받을값) => {
    return 결과;
};

🔹 받을 값 개수에 따른 문법

받을 값 개수	기본 문법
받을 값 없음	() => { }
받을 값 1개	(a) => { } 또는 a => { }
받을 값 2개 이상	(a, b) => { }

🔹 화살표 함수 간단하게 만들기

// 1단계: 기존 방법
let double = function(x) { return x * 2; };

// 2단계: 화살표 함수 기본 형태
let double = (x) => { return x * 2; };

// 3단계: 받을 값 괄호 생략 (받을 값이 1개일 때)
let double = x => { return x * 2; };

// 4단계: 중괄호와 return 생략 (한 줄일 때)
let double = x => x * 2;

이렇게 단계별로 줄여나가면 정말 간결해져요!

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 화살표 함수가 어떻게 작동하는지 차근차근 살펴보겠어요.

🔹 첫 번째 예시: 기본 화살표 함수 만들고 비교하기

첫 번째 예시에서는 같은 기능을 하는 함수를 세 가지 방법으로 만들어서 비교해보겠어요.

// 기존 방법으로 인사 함수 만들기 (가장 긴 방법)
let sayHelloOld = function(name) {           // 전통적인 방식
    return "안녕하세요, " + name + "님!";
};

// 화살표 함수 기본 형태로 같은 함수 만들기 (중간 길이)
let sayHelloNew = (name) => {                // 화살표 함수 기본 형태
    return "안녕하세요, " + name + "님!";
};

// 최대한 간단하게 화살표 함수 만들기 (가장 짧은 방법)
let sayHelloSimple = name => "안녕하세요, " + name + "님!";

console.log("=== 세 가지 방법 비교 테스트 ===");

// 세 함수 모두 완전히 똑같은 결과를 만들어요
console.log("기존 방식: " + sayHelloOld("철수"));      // "안녕하세요, 철수님!"
console.log("화살표 기본: " + sayHelloNew("영희"));     // "안녕하세요, 영희님!"  
console.log("화살표 간단: " + sayHelloSimple("민수"));  // "안녕하세요, 민수님!"

console.log("모든 함수가 똑같은 일을 해요! 하지만 화살표 함수가 더 간단하죠?");

이 예시를 통해 같은 기능을 하는 함수를 점점 더 간단하게 만들 수 있다는 걸 확인할 수 있어요!

🔹 두 번째 예시: 받을 값 개수에 따른 화살표 함수 문법

두 번째 예시에서는 받을 값 개수에 따라 문법이 어떻게 달라지는지 체험해보겠어요.

// 받을 값 없는 화살표 함수 (괄호 필수!)
let sayHello = () => {                       // 빈 괄호 필수 (받을 값 없음)
    return "안녕하세요! 모든 친구들!";         // 모든 사람에게 인사
};

// 받을 값 1개인 화살표 함수 (괄호 생략 가능!)
let square = x => x * x;                     // 괄호 생략, return도 생략

// 받을 값 2개인 화살표 함수 (괄호 필수!)
let add = (a, b) => a + b;                   // 괄호 필수 (받을 값 2개)

console.log("=== 받을 값 개수별 테스트 ===");

console.log("인사말: " + sayHello());                   // "안녕하세요! 모든 친구들!"
console.log("5의 제곱: " + square(5));                  // "5의 제곱: 25"
console.log("3 + 7 = " + add(3, 7));                   // "3 + 7 = 10"

console.log("받을 값 개수에 따라 문법이 조금씩 달라져요!");

이처럼 받을 값 개수에 따라 괄호를 생략할 수 있는지가 결정돼요.

🔹 세 번째 예시: 화살표 함수 간소화 과정 단계별 체험

세 번째 예시에서는 함수를 단계별로 간소화하는 놀라운 과정을 체험해보겠어요.

// 1단계: 기존 방법 (가장 긴 형태)
let makeTriple1 = function(number) {
    return number * 3;                       // 3배로 만들어서 반환
};

// 2단계: 화살표 함수 기본 형태 (function을 =>로 변경)
let makeTriple2 = (number) => {              // function 키워드를 =>로 바꿈
    return number * 3;                       // 내용은 동일
};

// 3단계: 받을 값 괄호 생략 (받을 값이 1개이므로)
let makeTriple3 = number => {                // 받을 값 1개이므로 괄호 생략
    return number * 3;
};

// 4단계: 중괄호와 return 생략 (최종 간소화!)
let makeTriple4 = number => number * 3;      // 한 줄로 완전 간소화

console.log("=== 단계별 간소화 테스트 ===");

let testNumber = 7;

console.log("1단계 결과: " + makeTriple1(testNumber));  // 21
console.log("2단계 결과: " + makeTriple2(testNumber)); // 21
console.log("3단계 결과: " + makeTriple3(testNumber)); // 21
console.log("4단계 결과: " + makeTriple4(testNumber)); // 21

console.log("🎉 모든 단계가 똑같은 결과를 만들어요!");
console.log("하지만 4단계가 가장 간단하고 멋있죠?");

이 예시를 통해 함수를 점점 더 간단하게 만들어가는 과정이 얼마나 놀라운지 느낄 수 있어요!

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

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

첫 번째 실수는 화살표 기호를 잘못 쓰는 것이에요.

// 잘못된 예시
let func = x -> x * 2;  // -> 는 틀려요!

// 올바른 예시
let func = x => x * 2;  // => 가 맞아요!

두 번째 실수는 중괄호는 썼는데 return을 안 쓰는 것이에요.

// 잘못된 예시
let func = x => { x * 2 };  // return이 없어서 undefined!

// 올바른 예시들
let func = x => x * 2;         // 중괄호 생략
let func = x => { return x * 2; };  // return 사용

세 번째 실수는 받을 값이 2개인데 괄호를 안 쓰는 것이에요.

// 잘못된 예시
let func = a, b => a + b;  // 괄호가 없어서 오류!

// 올바른 예시
let func = (a, b) => a + b;  // 괄호 필수!

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

이제 여러분이 직접 배운 내용을 손끝으로 경험해볼 시간이에요. 학습은 이해와 더불어 실제로 만들어보며 체득하는 과정이기도 하거든요.

Ex1) 3배 만들기 함수

숫자를 3배로 만드는 화살표 함수를 가장 간단한 형태로 만들어보세요.

// 숫자를 3배로 만드는 화살표 함수를 만들어보세요
let triple = x => x * 3;

// 사용 예시
console.log(triple(4));  // 12 출력
console.log(triple(7));  // 21 출력

Ex2) 더 큰 수 찾기

두 숫자 중 더 큰 수를 찾는 화살표 함수를 만들어보세요.

// 두 숫자 중 더 큰 수를 찾는 화살표 함수를 만들어보세요
let findMax = (a, b) => {
    if(a > b) {
        return a;
    } else {
        return b;
    }
};

// 사용 예시
console.log(findMax(5, 8));   // 8 출력
console.log(findMax(12, 9));  // 12 출력

Ex3) 함수 변환하기

다음 기존 함수를 화살표 함수로 바꿔보세요.

let greet = function(name) {
    return "Hello, " + name + "!";
};

// 정답:
let greet = name => "Hello, " + name + "!";

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

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

복습 문제) for문과 화살표 함수 조합하기

화살표 함수로 제곱을 계산하는 함수를 만들고, for문으로 1부터 5까지의 제곱을 출력해보세요.

// 해답:
let square = x => x * x;  // 화살표 함수로 제곱 계산

for (let i = 1; i <= 5; i++) {
    console.log(i + "의 제곱: " + square(i));
}

💫 마무리하며

오늘 배운 화살표 함수는 정말 멋지고 현대적인 함수 만들기 방법이에요. 같은 기능을 하면서도 훨씬 간단하게 쓸 수 있어서 많은 개발자들이 사랑하는 문법이랍니다.

가장 중요한 포인트는 => 기호 사용법과, 받을 값이 1개일 때만 괄호 생략 가능하다는 것, 그리고 한 줄 결과일 때는 중괄호와 return을 생략할 수 있다는 것이에요.

화살표 함수는 마치 긴 문장을 줄임말로 쓰는 것처럼, 같은 의미를 더 짧고 깔끔하게 표현할 수 있게 해줘요. 여러분도 화살표 함수를 연습해서 더 세련된 코드를 작성해보세요.

다음 시간에는 화살표 함수의 더 고급 기능들을 배워볼 예정이에요. 여러분의 코딩 실력이 날마다 자라나는 모습을 보며 저도 함께 기뻐하고 있어요! 계속 함께해주세요! ✨

✅ 학습 완료 체크리스트

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

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

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

---