📘 9.3.2 언제 화살표 함수를 쓸까요? - 현명한 선택의 지혜
여러분께 인사드려요. 이전 시간에 화살표 함수의 신비로운 특성을 배웠죠? 화살표 함수는 자신만의 this를 만들지 않고 바깥쪽 환경의 this를 그대로 사용한다는 독특한 성질을 가지고 있었어요.
이제 가장 중요한 질문이 남았어요: "그래서 언제 화살표 함수를 써야 하는 거야?" 마치 옷장에서 날씨와 상황에 맞는 옷을 고르는 것처럼, 함수도 상황에 맞게 선택해야 해요. 이것이 바로 진정한 프로그래머가 되는 길이에요.
🧠 새로운 단어들과 친해지기
현명한 함수 선택의 지혜를 배우기 전에, 새로운 말들과 먼저 친해져보겠어요.
| 단어 | 부드러운 설명 |
|---|---|
| 콜백 함수 | 다른 함수에 전달되어서 나중에 특정 시점에 실행되는 함수예요. |
| 이벤트 처리 함수 | 버튼 클릭, 마우스 움직임 등의 일이 발생했을 때 실행되는 특별한 함수예요. |
| 환경 보존 | 함수가 실행되는 환경, 특히 this가 바뀌지 않고 원래 상태를 유지하는 거예요. |
콜백 함수는 "다시 불러주다"라는 뜻의 영어 단어에서 나왔어요. 마치 친구에게 "나중에 전화해줘"라고 부탁하는 것처럼, 다른 함수에게 "나중에 이 함수를 실행해줘"라고 부탁하는 것이 콜백 함수예요.
✨ 화살표 함수 선택이 무엇인지 천천히 알아보기
화살표 함수를 언제 사용할지 결정하는 것은 마치 요리할 때 적절한 도구를 선택하는 것과 같아요. 국을 끓일 때는 냄비를, 밥을 지을 때는 밥솥을, 빵을 구울 때는 오븐을 사용하듯이, 각 상황에 가장 적합한 함수를 선택해야 해요.
화살표 함수가 빛나는 순간은 주로 콜백 함수로 사용될 때예요. 특히 배열의 forEach, map, filter 같은 메서드와 함께 사용할 때 정말 소중해요.
반대로 화살표 함수를 피해야 하는 상황도 있어요. 객체의 메서드로 사용할 때는 대부분 문제가 생겨요. 왜냐하면 객체의 메서드는 그 객체 자신(this)에 접근해야 하는데, 화살표 함수는 객체가 아닌 전체 공간을 가리키기 때문이에요.
따뜻한 이야기: 학교 도구 창고의 도구들
화살표 함수 선택의 지혜를 더 가깝게 이해하기 위해 '학교 도구 창고' 이야기를 들려드릴게요.
학교 미술실에는 두 종류의 붓이 있었어요.
일반 함수 붓 🖌️:
이 붓은 아주 똑똑했어요. 어떤 물감통 앞에 가져다 놓으면 그 물감통의 색을 정확히 찾아서 칠할 수 있었어요. 빨간 물감통 앞에서는 빨간색을, 파란 물감통 앞에서는 파란색을 칠했죠. 즉, 상황에 맞게 적응하는 능력이 있었어요.
화살표 함수 붓 ➡️:
이 붓은 조금 달랐어요. 어디로 가져가든 항상 "저는 원래 미술실에서 가져온 붓이에요"라는 정체성을 유지했어요. 다른 교실로 가져가도 미술실의 특별한 색깔을 기억하고 있었어요.
현명한 선택:
- 각 물감통마다 다른 색깔로 칠해야 할 때 → 일반 함수 붓 사용 (그 물감통의 색이 필요)
- 여러 교실을 돌아다니면서 같은 스타일로 작업해야 할 때 → 화살표 함수 붓 사용 (미술실 스타일 유지 필요)
이처럼 선생님은 작업의 성격에 따라 적절한 붓을 선택해야 했어요.
🎯 상황별 화살표 함수 사용 가이드
이제 구체적으로 어떤 상황에서 화살표 함수를 사용하면 좋은지 알아보겠어요.
✅ 화살표 함수를 사용하면 좋은 경우:
첫째, 콜백 함수로 사용할 때예요. 배열 메서드에서 바깥쪽 this를 유지하고 싶을 때 화살표 함수가 완벽해요.
둘째, 간단한 계산 함수를 만들 때예요. this를 전혀 사용하지 않는 순수한 계산 함수라면 화살표 함수가 더 깔끔하고 읽기 좋아요.
❌ 화살표 함수를 피해야 하는 경우:
첫째, 객체의 메서드로 사용할 때예요. 객체 메서드는 그 객체의 this가 필요한데, 화살표 함수는 전체 공간 this를 사용해서 문제가 생겨요.
둘째, 새로운 객체를 만드는 함수로 사용할 때예요. 화살표 함수는 new 키워드와 함께 사용할 수 없어요.
셋째, this가 상황에 따라 바뀌어야 하는 경우에서예요. 상황에 따라 다른 객체를 가리켜야 한다면 일반 함수가 적합해요.
⚙️ 선택 기준과 방법
화살표 함수와 일반 함수를 선택하는 기준을 정리해보겠어요.
// ✅ 좋은 방법: 객체 메서드는 일반 함수, 콜백은 화살표 함수
let student = {
name: "지우",
subjects: ["수학", "과학"],
// 일반 함수로 객체 메서드 정의
showSubjects: function() {
console.log(this.name + "의 과목:");
// 화살표 함수로 콜백 함수 정의
this.subjects.forEach((subject) => {
console.log("- " + subject);
});
}
};
// ❌ 나쁜 방법: 모든 것을 화살표 함수로
let badStudent = {
name: "철수",
subjects: ["영어", "미술"],
// 화살표 함수로 객체 메서드 정의 (문제!)
showSubjects: () => {
console.log(this.name + "의 과목:"); // this.name이 undefined
}
};🧪 직접 해보면서 천천히 배우기
이제 실제 예시를 통해서 상황별로 적절한 함수 선택을 연습해보겠어요.
🔹 Ex1) 콜백 함수에서의 현명한 선택
첫 번째 예시에서는 콜백 함수에서 화살표 함수가 어떻게 this 문제를 해결해주는지 확인해보겠어요.
// 게임 점수 관리 객체
let gameScore = {
playerName: "레전드게이머", // 플레이어 이름
scores: [150, 200, 175, 300, 250], // 점수 목록
bonus: 50, // 보너스 점수
// 일반 함수로 객체 메서드 정의 (올바른 선택)
calculateTotal: function() {
console.log("=== " + this.playerName + "의 점수 계산 ==="); // this.playerName으로 이름 가져오기
let total = 0; // 총점을 저장할 변수
// 화살표 함수로 콜백 함수 정의 (현명한 선택!)
this.scores.forEach((score) => {
total += score + this.bonus; // this가 gameScore를 가리켜서 bonus에 접근 가능
console.log("점수 " + score + " + 보너스 " + this.bonus + " = " + (score + this.bonus));
});
console.log("총합: " + total + "점");
return total;
},
// 잘못된 예시: 콜백을 일반 함수로 만들면?
calculateTotalWrong: function() {
console.log("\n=== 잘못된 방법으로 계산 ===");
let total = 0; // 총점을 저장할 변수
// 일반 함수로 콜백 함수 정의 (문제 발생!)
this.scores.forEach(function(score) {
// this가 gameScore가 아니라 전체 공간을 가리킴!
total += score + (this.bonus || 0); // this.bonus는 undefined가 되어서 0 사용
console.log("점수 " + score + " + 보너스 " + (this.bonus || 0));
});
console.log("총합: " + total + "점");
return total;
}
};
// 두 방법 비교
gameScore.calculateTotal(); // 올바르게 동작 - 보너스가 제대로 적용됨
gameScore.calculateTotalWrong(); // 보너스가 제대로 적용 안 됨이 예시를 통해 콜백 함수에서 화살표 함수를 사용하면 바깥쪽 객체의 this를 안전하게 유지할 수 있다는 것을 확인할 수 있어요.
🔹 Ex2) 간단한 함수들의 화살표 함수 활용
두 번째 예시에서는 this를 사용하지 않는 간단한 함수들에서 화살표 함수가 얼마나 깔끔한지 보여드릴게요.
// ✅ 간단한 계산 함수들 - 화살표 함수가 완벽!
let mathHelpers = {
// this를 사용하지 않는 순수 계산 함수들
add: (a, b) => a + b, // 두 수를 더하는 함수
multiply: (x, y) => x * y, // 두 수를 곱하는 함수
isEven: (num) => num % 2 === 0, // 짝수인지 확인하는 함수
square: (n) => n * n, // 제곱을 구하는 함수
// 객체의 메서드는 일반 함수로! (this 사용 필요)
showCalculation: function(a, b) {
console.log("=== 계산 도우미 ===");
console.log(a + " + " + b + " = " + this.add(a, b)); // this.add로 위 함수 사용
console.log(a + " × " + b + " = " + this.multiply(a, b)); // this.multiply로 위 함수 사용
console.log(a + "는 짝수? " + this.isEven(a)); // this.isEven으로 확인
console.log(b + "의 제곱 = " + this.square(b)); // this.square로 제곱 계산
}
};
// 활용해보기
mathHelpers.showCalculation(6, 4); // 6과 4로 여러 계산 해보기
// 배열과 함께 사용하기
let numbers = [1, 2, 3, 4, 5]; // 숫자 배열
console.log("\n=== 배열 처리 ===");
console.log("원본 배열:", numbers);
console.log("제곱 배열:", numbers.map((n) => mathHelpers.square(n))); // 각 숫자를 제곱으로 변환
console.log("짝수만:", numbers.filter((n) => mathHelpers.isEven(n))); // 짝수만 걸러내기이 예시에서는 간단한 계산 함수들을 화살표 함수로 만들어서 코드가 얼마나 깔끔해지는지 확인할 수 있어요.
🔹 Ex3) 올바른 선택 vs 잘못된 선택 비교
세 번째 예시에서는 같은 기능을 구현할 때 함수 선택에 따라 어떻게 결과가 달라지는지 직접 비교해보겠어요.
// ❌ 잘못된 선택: 모든 것을 화살표 함수로
let badCounter = {
count: 0, // 숫자를 세는 변수
name: "잘못된 카운터", // 카운터 이름
// 객체 메서드를 화살표 함수로 만든 실수!
increase: () => {
this.count++; // this가 badCounter가 아니라 전체 공간!
console.log(this.name + ": " + this.count); // undefined가 출력됨
},
// 이것도 잘못된 방법
showCount: () => {
console.log("현재 숫자: " + this.count); // this.count가 undefined
}
};
// ✅ 올바른 선택: 적절한 함수 선택
let goodCounter = {
count: 0, // 숫자를 세는 변수
name: "올바른 카운터", // 카운터 이름
numbers: [1, 2, 3, 4, 5], // 처리할 숫자들
// 객체 메서드는 일반 함수로!
increase: function() {
this.count++; // this가 goodCounter를 가리킴
console.log(this.name + ": " + this.count); // 카운터 이름과 숫자가 정상 출력
},
showCount: function() {
console.log("현재 숫자: " + this.count); // this.count가 정상 출력
},
// 배열 메서드에서는 화살표 함수 사용
processNumbers: function() {
console.log("숫자 처리 중...");
// forEach 콜백에서 화살표 함수 사용 (this 보존)
this.numbers.forEach((num) => {
this.count += num; // 화살표 함수가 바깥쪽 this(goodCounter)를 사용
console.log(this.name + "가 " + num + "을 처리했어요. 현재 총합: " + this.count);
});
}
};
console.log("=== 카운터 테스트 ===");
// 잘못된 카운터 (문제 발생)
console.log("잘못된 카운터:");
badCounter.increase(); // undefined: NaN 출력
badCounter.showCount(); // 현재 숫자: undefined 출력
console.log("\n올바른 카운터:");
goodCounter.increase(); // "올바른 카운터: 1" 출력
goodCounter.showCount(); // "현재 숫자: 1" 출력
goodCounter.processNumbers(); // 배열의 모든 숫자를 처리이 예시는 함수 선택의 중요성을 명확히 보여줘요. 적절한 선택을 하면 코드가 예상대로 동작하지만, 잘못 선택하면 예상과 다른 결과가 나와요.
🔄 함수 선택하는 순서 차근차근 정리하기
지금까지 배운 함수 선택의 지혜를 단계별로 정리해볼게요.
첫 번째 단계는 용도 파악이에요. 만들려는 함수가 객체의 메서드인지, 콜백 함수인지, 단순한 계산 함수인지 먼저 파악해요.
두 번째 단계는 this 필요성 확인 단계예요. 함수에서 this를 사용해야 하는지, 그렇다면 어떤 객체의 this가 필요한지 생각해봐요.
세 번째 단계는 상황별 선택 단계예요. 객체 메서드라면 일반 함수를, 콜백이나 간단한 함수라면 화살표 함수를 선택해요.
네 번째 단계는 테스트 단계예요. 선택한 함수가 의도한 대로 동작하는지 확인하고, 문제가 있다면 다른 함수 형태를 고려해봐요.
마지막으로 가장 소중한 것은 일관성 유지 단계예요. 비슷한 상황에서는 일관된 방법을 사용해서 코드의 읽기 쉬움을 높여요.
🧚♀️ 따뜻한 이야기로 다시 배우기: 요리사의 도구 선택
지금까지 배운 내용을 맛있는 이야기로 다시 정리해볼까요?
옛날에 요리사 쿡이라는 멋진 요리사가 살고 있었어요. 쿡은 두 가지 특별한 도구를 가지고 있었어요.
일반 함수 팬 🍳:
이 팬은 정말 똑똑했어요. 어떤 재료 위에 올려놓든 그 재료의 맛을 최대한 살려주었어요. 양파 위에 놓으면 양파의 단맛을, 고기 위에 놓으면 고기의 육즙을 완벽하게 끌어냈죠. 즉, 상황에 맞게 변신하는 능력이 있었어요.
화살표 함수 오븐 🔥:
이 오븐은 조금 달랐어요. 어떤 요리를 하든 항상 "저는 쿡의 주방에서 태어난 오븐이에요"라는 정체성을 유지했어요. 다른 곳으로 가져가도 쿡의 레시피와 스타일을 그대로 기억하고 있었어요.
현명한 요리사의 선택:
메인 요리(객체 메서드)를 만들 때는 항상 일반 함수 팬을 사용했어요. 왜냐하면 각 재료의 특성을 살려야 했거든요.
let recipe = {
ingredient: "소고기", // 재료 이름
cook: function() { // 일반 함수 팬 사용!
console.log(this.ingredient + "를 요리합니다."); // this.ingredient로 재료 이름 가져오기
}
};보조 작업(콜백 함수)을 할 때는 화살표 함수 오븐을 사용했어요. 여러 재료를 동시에 처리하면서도 쿡의 스타일을 유지해야 했거든요.
let ingredients = ["당근", "양파", "감자"]; // 재료 목록
ingredients.forEach((item) => { // 화살표 함수 오븐 사용!
console.log("쿡의 스타일로 " + item + "를 손질합니다."); // 각 재료를 쿡의 스타일로 처리
});이렇게 쿡은 상황에 맞는 도구를 선택해서 최고의 요리를 만들어낼 수 있었답니다.
🧠 자주 하는 실수와 조심할 점
함수 선택에서 자주 하는 실수들을 미리 알아두면 더 현명한 선택을 할 수 있어요.
❌ 실수 1: "화살표 함수가 더 짧으니까 무조건 쓰자"
// 잘못된 생각으로 만든 코드
let calculator = {
result: 0, // 계산 결과를 저장할 변수
add: (num) => { // 짧다고 무조건 화살표 함수 사용
this.result += num; // this가 calculator가 아니라 전체 공간을 가리킴!
return this; // undefined를 반환하게 됨
}
};
calculator.add(5); // 에러! this.result가 undefined이런 실수가 생기는 이유는 "짧은 것이 무조건 좋다"는 잘못된 생각 때문이에요. 코드의 길이보다는 올바른 동작이 훨씬 더 중요해요. 마치 옷을 고를 때 예쁘다고 해서 겨울에 반팔을 입으면 안 되는 것과 같아요.
❌ 실수 2: "일반 함수는 구식이니까 모두 화살표 함수로 바꾸자"
// 잘못된 "현대화" 시도
let student = {
name: "미래", // 학생 이름
// 모든 메서드를 화살표 함수로 "현대화"
greet: () => console.log("안녕! " + this.name), // 문제! this.name이 undefined
study: () => console.log(this.name + "가 공부해요"), // 문제! this.name이 undefined
play: () => console.log(this.name + "가 놀아요") // 문제! this.name이 undefined
};
// 모든 메서드가 제대로 작동하지 않음!이 문제가 생기는 이유는 "새로운 것이 무조건 좋다"는 착각 때문이에요. 화살표 함수는 분명히 좋은 기능이지만, 모든 상황에 적합한 것은 아니에요. 상황에 맞는 올바른 선택이 중요해요.
❌ 실수 3: 함수 안에서 또 다른 함수를 정의할 때 혼동하기
let classroom = {
students: ["철수", "영희"], // 학생 목록
className: "3학년 1반", // 반 이름
callStudents: function() {
// 이 안에서 또 함수를 정의할 때 헷갈리기 쉬워요
this.students.forEach(function(student) { // 일반 함수 (문제)
console.log(this.className + ": " + student); // this가 classroom이 아니라 전체 공간!
});
}
};이런 혼동이 생기는 이유는 중첩된 함수의 this 변화를 제대로 이해하지 못했기 때문이에요. 콜백 함수에서는 화살표 함수를 사용해서 바깥쪽 this를 보존해야 한다는 것을 기억해야 해요.
✏️ 직접 해보기 - 따뜻한 연습 문제들
이제 배운 내용을 연습 문제를 통해서 차근차근 익혀볼게요.
마음을 편안히 하고 코드와 함께 대화하듯 연습해보세요. 각 문제는 여러분이 올바른 함수 선택의 지혜를 깨달을 수 있도록 도와줄 거예요.
Ex1) 상황에 맞는 적절한 함수를 선택해서 학급 관리 객체를 완성해보기
// 학급 관리 객체 완성하기
let class5A = {
className: "5학년 A반", // 반 이름
students: ["김철수", "이영희", "박민수", "최지수"], // 학생 목록
// 객체 메서드는 일반 함수로 정의
introduceClass: function() {
console.log("안녕하세요! " + this.className + "입니다."); // this.className으로 반 이름 가져오기
// 콜백은 화살표 함수로 정의
this.students.forEach((student) => { // 각 학생에 대해 반복
console.log("- " + student + " (" + this.className + " 학생)"); // 화살표 함수가 바깥쪽 this 사용
});
},
// 학생 수 세기 메서드
countStudents: function() {
return this.students.length; // this.students 배열의 길이 반환
},
// 새 학생 추가 메서드
addStudent: function(newStudent) {
this.students.push(newStudent); // this.students 배열에 새 학생 추가
console.log(newStudent + "가 " + this.className + "에 추가되었습니다.");
}
};
// 테스트해보기
class5A.introduceClass(); // 반 소개하기
console.log("총 학생 수:", class5A.countStudents()); // 학생 수 확인하기
class5A.addStudent("정하늘"); // 새 학생 추가하기이 연습을 통해 객체 메서드와 콜백 함수에서의 적절한 함수 선택을 익힐 수 있어요.
Ex2) 간단한 계산 함수들을 화살표 함수로 만들어보기
// 수학 도구 모음 (this를 사용하지 않는 순수 계산 함수들)
let mathTools = {
// 간단한 계산 함수들은 화살표 함수로
double: (x) => x * 2, // 2배로 만드는 함수
triple: (x) => x * 3, // 3배로 만드는 함수
isPositive: (num) => num > 0, // 양수인지 확인하는 함수
max: (a, b) => a > b ? a : b, // 더 큰 수를 찾는 함수
min: (a, b) => a < b ? a : b, // 더 작은 수를 찾는 함수
// 결과를 보여주는 메서드는 일반 함수로
showCalculations: function(num1, num2) {
console.log("=== 계산 결과 ===");
console.log(num1 + "의 2배:", this.double(num1)); // this.double로 2배 계산
console.log(num2 + "의 3배:", this.triple(num2)); // this.triple로 3배 계산
console.log(num1 + "은 양수?", this.isPositive(num1)); // this.isPositive로 양수 확인
console.log("더 큰 수:", this.max(num1, num2)); // this.max로 큰 수 찾기
console.log("더 작은 수:", this.min(num1, num2)); // this.min으로 작은 수 찾기
}
};
// 테스트
mathTools.showCalculations(5, -3); // 5와 -3으로 계산 테스트이 문제는 this를 사용하지 않는 함수에서 화살표 함수의 깔끔함을 경험하는 데 도움이 돼요.
Ex3) 잘못된 함수 선택을 찾아서 올바르게 고쳐보기
// 문제가 있는 코드
let brokenBook = {
title: "자바스크립트 모험", // 책 제목
pages: ["1페이지", "2페이지", "3페이지"], // 페이지 목록
// 문제: 객체 메서드를 화살표 함수로 정의
showBook: () => {
console.log("책 제목: " + this.title); // this.title이 undefined가 됨
// 문제: 콜백을 일반 함수로 정의
this.pages.forEach(function(page) { // forEach 콜백을 일반 함수로
console.log(this.title + "의 " + page); // this가 brokenBook이 아니라 전체 공간
});
}
};
// 올바르게 수정된 코드
let fixedBook = {
title: "자바스크립트 모험", // 책 제목
pages: ["1페이지", "2페이지", "3페이지"], // 페이지 목록
// 수정: 객체 메서드는 일반 함수로
showBook: function() {
console.log("책 제목: " + this.title); // this.title로 책 제목 가져오기
// 수정: 콜백은 화살표 함수로
this.pages.forEach((page) => { // 화살표 함수로 바깥쪽 this 보존
console.log(this.title + "의 " + page); // this가 fixedBook을 가리킴
});
}
};
// 테스트
console.log("=== 수정된 책 보기 ===");
fixedBook.showBook(); // 수정된 책 정보 출력이 연습문제를 통해 잘못된 함수 선택을 찾아내고 올바르게 수정하는 능력을 기를 수 있어요.
🎮 보너스 문제 - 조금 더 깊이 있는 함수 선택 기법
조금 더 도전해보고 싶은 분들을 위한 보너스 문제예요. 천천히 생각해보세요.
보너스 Q1. 다음 코드에서 어떤 부분이 문제인지 찾고, 그 이유를 설명해보세요.
let musicPlayer = {
currentSong: "행복한 노래", // 현재 재생 중인 노래
playlist: ["노래1", "노래2", "노래3"], // 재생 목록
play: () => { // 화살표 함수로 정의 (문제!)
console.log("재생 중: " + this.currentSong); // this.currentSong 접근 시도
this.playlist.forEach((song) => { // this.playlist 접근 시도
console.log("대기열: " + song);
});
}
};
musicPlayer.play();정답: play 메서드가 화살표 함수로 정의된 것이 문제예요.
부드러운 설명: 화살표 함수는 musicPlayer 객체의 this가 아니라 전체 공간 this를 사용하므로, this.currentSong과 this.playlist에 접근할 수 없어요. 객체 메서드는 일반 함수로 정의해야 해당 객체의 정보에 접근할 수 있어요.
보너스 Q2. 다음 중 더 나은 코드는 무엇이고, 그 이유는 무엇일까요?
// A번
let processor = {
data: [1, 2, 3, 4, 5],
process: function() {
return this.data.map(function(item) {
return item * 2;
});
}
};
// B번
let processor = {
data: [1, 2, 3, 4, 5],
process: function() {
return this.data.map((item) => item * 2);
}
};정답: B번이 더 나은 코드예요.
부드러운 설명: 두 코드 모두 정상 작동하지만, B번이 더 좋은 이유는 화살표 함수를 사용해서 코드가 더 간결하고 읽기 쉽기 때문이에요. 이 경우 콜백 함수에서 this를 사용하지 않으므로 화살표 함수가 완벽한 선택이에요.
📚 이전 단원 복습하기
9단원을 배우는 여러분을 위해 이전에 배운 내용을 차근차근 복습해볼게요.
복습 문제 1 - 9.3.1단원: 화살표 함수 this 특징
// 9.3.1단원에서 배운 화살표 함수 특징을 확인해보세요
let testObj = {
name: "테스트",
// 일반 함수 메서드
normalMethod: function() {
console.log("일반 함수:", this.name); // this가 testObj를 가리켜요
},
// 화살표 함수 메서드
arrowMethod: () => {
console.log("화살표 함수:", this.name); // this가 전역 객체를 가리켜요
}
};
testObj.normalMethod(); // "일반 함수: 테스트"
testObj.arrowMethod(); // "화살표 함수: undefined"
// call로 this 바꾸기 시도
let anotherObj = { name: "다른 객체" };
testObj.normalMethod.call(anotherObj); // "일반 함수: 다른 객체" (바뀜)
testObj.arrowMethod.call(anotherObj); // "화살표 함수: undefined" (안 바뀜)복습 포인트: 화살표 함수는 자신만의 this를 만들지 않고 바깥쪽 환경의 this를 사용해요. 그리고 call, apply, bind로 this를 바꿀 수 없다는 특징이 있어요.
복습 문제 2 - 7단원: 배열 메서드 사용하기
// 7단원에서 배운 배열 메서드들을 사용해보세요
let fruits = ["사과", "바나나", "오렌지", "포도"];
console.log("=== 배열 메서드 복습 ===");
// forEach - 각 요소에 대해 함수 실행
fruits.forEach((fruit, index) => { // 화살표 함수로 간단하게
console.log((index + 1) + ". " + fruit);
});
// map - 새로운 배열 만들기
let upperFruits = fruits.map((fruit) => fruit.toUpperCase());
console.log("대문자 과일:", upperFruits);
// filter - 조건에 맞는 요소만 걸러내기
let longNames = fruits.filter((fruit) => fruit.length > 2);
console.log("긴 이름 과일:", longNames);복습 포인트: 배열 메서드들은 콜백 함수를 받아요. 이런 콜백에서는 화살표 함수를 사용하면 코드가 더 깔끔해져요.
지금까지 화살표 함수를 언제 사용해야 하는지에 대한 지혜를 배웠어요. 중요한 것은 상황에 맞는 올바른 선택이에요. 객체 메서드는 일반 함수로, 콜백이나 간단한 함수는 화살표 함수로 사용하는 것이 일반적인 좋은 방법이에요.
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요.
| 학습 내용 | 이해했나요? |
|---|---|
| 화살표 함수 사용 시기 | ✅ |
| 올바른 함수 선택 방법 | ✅ |
| 상황별 적용 방법 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
조금 더 연습하고 싶은 분들을 위한 추가 문제들이에요.
추가 문제 1. 적절한 함수 형태를 선택해서 객체를 완성해보세요.
// 답:
let calculator = {
result: 0,
add: function(num) { // 일반 함수 (this 사용)
this.result += num;
return this;
},
multiply: function(num) { // 일반 함수 (this 사용)
this.result *= num;
return this;
},
getResult: function() { // 일반 함수 (this 사용)
return this.result;
}
};
console.log(calculator.add(5).multiply(2).getResult()); // 10추가 문제 2. 배열 메서드에서 화살표 함수를 사용해보세요.
// 답:
let numbers = [1, 2, 3, 4, 5];
// 화살표 함수 사용 (this를 안 씀)
let evens = numbers.filter((num) => num % 2 === 0);
let squares = numbers.map((num) => num * num);
console.log("짝수:", evens); // "짝수: [2, 4]"
console.log("제곱:", squares); // "제곱: [1, 4, 9, 16, 25]"추가 문제 3. 객체 메서드 안에서 콜백 함수를 올바르게 사용해보세요.
// 답:
let class4 = {
students: ["철수", "영희", "민수"],
introduce: function() {
console.log("4학년 학생들:");
// 화살표 함수로 콜백 작성 (this 보존)
this.students.forEach((student) => {
console.log("- " + student + " (4학년)");
});
}
};
class4.introduce();📂 마무리 정보
오늘 배운 9.3.2 내용이 여러분의 자바스크립트 지식에 잘 자리 잡았나요? 다음 시간에는 더 재미있는 내용으로 만나요.
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'9. this와 친해지기 (this 바인딩) > 9.3 화살표 함수에서의 this' 카테고리의 다른 글
| 9.3.1 화살표 함수 this 특징 - 특별한 규칙을 가진 함수 (0) | 2025.07.13 |
|---|