5.2.2 this와의 차이점 이해하기 - 화살표 함수의 특별한 점
📘 5.2.2 this와의 차이점 이해하기 - 화살표 함수의 특별한 점
지난 시간의 기억이 아직 선명하게 남아있나요? 우리는 함께 화살표 함수의 기본 문법을 배웠어요. 오늘은 화살표 함수의 특별한 특징에 대해 가볍게 살펴보려 해요.
아직 this라는 개념이 어려울 수 있지만, 화살표 함수와 기존 함수가 조금 다르게 동작한다는 것만 기억해두시면 됩니다.
🧠 새로운 단어들과 친해지기
새로운 개념을 배우기 전에, 그 언어들과 먼저 친숙해져보겠어요.
| 단어 | 쉬운 설명 |
|---|---|
| this | 함수에서 "나"를 가리키는 특별한 키워드예요. |
| 정보 묶음 | 여러 정보를 하나로 묶어놓은 꾸러미예요. |
| 메서드 | 정보 묶음 안에 들어있는 함수를 말해요. |
| 동작 방식 | 함수가 어떻게 작동하는지를 말해요. |
예를 들어 거울을 생각해보세요. 거울 앞에 서서 "나"라고 하면 거울 속의 나를 가리키죠. 함수에서 this도 "나"를 가리키는 특별한 말이에요.
✨ 간단하게 알아보는 차이점
화살표 함수와 기존 함수는 대부분 비슷하게 동작하지만, 한 가지 중요한 차이점이 있어요. 바로 this라는 특별한 키워드와 관련된 부분이에요.
기존 함수는 호출하는 방법에 따라 this가 달라져요. 마치 상황에 따라 다른 역할을 하는 배우처럼요.
화살표 함수는 만들어진 위치에 따라 this가 정해져요. 한 번 정해지면 변하지 않아요.
지금은 이 차이점이 복잡해 보일 수 있지만, 나중에 더 자세히 배울 예정이니까 걱정하지 마세요. 지금은 "화살표 함수가 조금 특별하구나" 정도로만 기억하시면 충분해요.
일상 속의 비유: 자기소개하기
화살표 함수의 특별한 점을 더 친근하게 이해하기 위해 자기소개의 이야기를 해볼게요.
일반적인 자기소개(기존 함수): 어떤 장소에서 자기소개를 하느냐에 따라 달라져요.
- 학교에서: "저는 3학년 김철수입니다"
- 태권도장에서: "저는 노란띠 김철수입니다"
- 집에서: "저는 김철수입니다"
특별한 자기소개(화살표 함수): 어디서 소개하든 항상 같은 방식으로 해요.
- 어디서나: "저는 김철수입니다" (변하지 않음)
화살표 함수는 이런 특별한 자기소개처럼, 항상 일정한 방식으로 동작해요.
🎯 지금 단계에서 알아야 할 것
현재 단계에서는 이런 것들만 기억하시면 돼요:
첫째, 화살표 함수와 기존 함수는 대부분 비슷하게 동작해요. 계산하고, 값을 돌려주고, 출력하는 일은 똑같이 할 수 있어요.
둘째, this라는 특별한 차이점이 있다는 것만 알아두세요. 지금 당장 완전히 이해하지 못해도 괜찮아요.
셋째, 간단한 계산이나 변환 함수를 만들 때는 화살표 함수가 더 편리해요.
마지막으로 더 복잡한 this 개념은 나중에 배울 예정이라는 점을 기억해주세요.
⚙️ 실제로 차이점 확인해보기
아주 간단한 예시로 차이점을 살짝 확인해보겠어요. 지금 완전히 이해하지 못해도 괜찮아요!
🔹 기본적으로는 똑같이 동작해요
// 기존 함수로 더하기
let addOld = function(a, b) {
return a + b;
};
// 화살표 함수로 더하기
let addNew = (a, b) => a + b;
console.log("=== 기본 계산은 똑같아요 ===");
console.log("기존 함수: " + addOld(3, 5)); // 8
console.log("화살표 함수: " + addNew(3, 5)); // 8
// 둘 다 정확히 같은 결과를 만들어요!🔹 객체에서 사용할 때 조금 달라요
// 학생 정보를 담은 객체
let student = {
name: "김민수",
age: 10,
// 기존 함수로 자기소개 (잘 동작함)
introduceOld: function() {
return "안녕! 나는 " + this.name + "이야!";
}
};
console.log("=== 객체에서는 조금 달라요 ===");
console.log("기존 함수: " + student.introduceOld()); // "안녕! 나는 김민수야!"
console.log("객체 메서드에는 기존 함수가 더 좋아요!");✏️ 연습문제로 개념 다지기
이제 여러분이 직접 배운 내용을 체험해볼 시간이에요. 학습은 단순히 이해하는 것을 넘어서, 실제로 만들어보며 그 깊이를 더해가는 과정이기도 하거든요.
Ex1) 간단한 계산 함수 만들기
10을 더하는 함수를 화살표 함수로 만들어보세요.
// 10을 더하는 화살표 함수를 만들어보세요
let addTen = x => x + 10;
// 사용 예시
console.log(addTen(5)); // 15 출력
console.log(addTen(20)); // 30 출력Ex2) 객체 메서드 만들기
학생 정보 객체에 인사 메서드를 기존 함수로 만들어보세요.
// 학생 정보 객체를 만들어보세요
let student = {
name: "이지수",
grade: 4,
// 기존 함수로 인사 메서드 만들기
sayHello: function() {
return "안녕하세요! 저는 " + this.name + "입니다!";
}
};
// 사용 예시
console.log(student.sayHello()); // "안녕하세요! 저는 이지수입니다!"Ex3) 상황에 맞는 함수 선택하기
다음 중 어떤 상황에 어떤 함수를 사용하는 것이 좋을까요?
// 상황 A: 숫자를 2배로 만들기
let double = x => x * 2; // 화살표 함수 - 간단한 계산
// 상황 B: 객체의 메서드
let person = {
name: "김철수",
introduce: function() { // 기존 함수 - 객체 메서드
return "제 이름은 " + this.name + "입니다";
}
};🔄 4단원 복습하기 - 반복문을 기억하고 있나요?
화살표 함수의 특별한 점을 배웠는데, 지난 시간에 배운 반복문과 함께 사용해볼까요?
복습 문제) for문과 화살표 함수 조합하기
화살표 함수로 3을 곱하는 함수를 만들고, for문으로 1부터 5까지의 결과를 출력해보세요.
// 해답:
let triple = x => x * 3; // 화살표 함수로 3배 계산
console.log("=== 3배 만들기 ===");
for (let i = 1; i <= 5; i++) {
console.log(i + " × 3 = " + triple(i));
}💫 마무리하며
오늘은 화살표 함수의 특별한 점에 대해 가볍게 살펴봤어요. this라는 개념이 아직 어려울 수 있지만, 지금은 "화살표 함수가 조금 다르구나" 정도만 기억하시면 충분합니다.
가장 중요한 포인트는 간단한 계산에는 화살표 함수, 객체 메서드에는 기존 함수를 사용하는 것이에요. 그리고 헷갈릴 때는 기존 함수를 사용해도 괜찮다는 점도 기억해주세요.
this의 더 자세한 내용은 나중에 배울 예정이니까 지금은 부담 갖지 마세요. 여러분이 차근차근 성장하는 모습을 보며 저도 함께 기뻐하고 있어요! 계속 함께해주세요! ✨
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 차근차근 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 화살표 함수의 특별한 점 | ✅ |
| 기본적인 차이점 이해 | ✅ |
| 상황별 함수 선택 기준 | ✅ |
| 간단한 활용 방법 | ✅ |
| 실전 예제 이해 | ✅ |
| 4단원 반복문 복습 | ✅ |
📂 마무리 정보
오늘 배운 5.2.2 내용이 여러분의 마음 속에 잘 자리잡았나요? this의 더 자세한 내용은 9단원에서 배울 예정이니까 지금은 부담 갖지 마세요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.