9. this와 친해지기 (this 바인딩)/9.3 화살표 함수에서의 this

9.3.1 화살표 함수 this 특징 - 특별한 규칙을 가진 함수

thejavascript4kids 2025. 7. 13. 05:01

📘 9.3.1 화살표 함수 this 특징 - 특별한 규칙을 가진 함수

여러분께 인사드려요. 지금까지 우리는 this의 다양한 모습을 배웠어요. 넓은 세상에서는 window를, 어떤 작은 집 안에서는 그 집을, 새로운 생명이 태어날 때는 새로 만들어지는 존재를 가리켰죠. 그리고 call, apply, bind로 this를 자유자재로 움직이는 방법도 익혔어요.

이제 마지막으로 정말 특별한 함수를 만나볼 시간이에요. 바로 화살표 함수라는 독특한 존재예요. 이 함수는 다른 모든 함수들과는 완전히 다른 this 규칙을 가지고 있어요. 마치 자신만의 특별한 영혼을 가진 친구처럼요.

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

this의 마지막 비밀을 간직한 화살표 함수와 친해지기 전에, 새로운 말들을 먼저 부드럽게 배워보겠어요.

단어 부드러운 설명
화살표 함수 => 모양을 사용해서 만든 특별한 형태의 함수로, 자신만의 this를 만들지 않아요.
바깥쪽 환경 화살표 함수가 만들어진 바깥쪽 공간을 말하며, 여기서 this를 물려받아 써요.
this 물려받기 화살표 함수가 자신만의 this를 만들지 않고 바깥쪽 this를 그대로 이어받는 거예요.

화살표 함수는 =>라는 화살표 모양 때문에 이런 이름이 붙었어요. 이 함수는 마치 화살표처럼 빠르고 간결하지만, this에 관해서는 매우 특별한 성질을 가지고 있어요. 마치 독특한 마음을 가진 친구처럼요.

✨ 화살표 함수 this가 무엇인지 천천히 알아보기

화살표 함수는 자바스크립트 세상에서 정말 독특한 존재예요. 다른 모든 함수들이 "나만의 this를 가지겠어"라고 말하는 반면, 화살표 함수는 "나는 this를 만들지 않을 거야. 대신 부모님(바깥쪽 환경)의 this를 물려받을래"라고 말하는 거예요.

이것은 정말 특별한 특징이에요. 일반 함수는 호출되는 방법에 따라 this가 계속 바뀌었지만, 화살표 함수의 this는 함수가 만들어진 순간에 이미 결정되고 절대 바뀌지 않아요. 마치 태어날 때부터 정해진 운명처럼 평생 고정되는 거죠.

또 다른 특징은 call, apply, bind 같은 강력한 능력들도 화살표 함수의 this는 바꿀 수 없다는 거예요. 화살표 함수는 이런 능력들에 면역이 있어요. 마치 자신만의 특별한 보호막을 가진 것처럼요.

따뜻한 이야기: 고향을 잊지 않는 전학생의 마음

화살표 함수의 this 특징을 더 가깝게 이해하기 위해 '고향을 잊지 않는 전학생' 이야기를 들려드릴게요.

한 학교에 두 종류의 학생들이 있었어요.

일반 함수 학생들:
이 학생들은 어디로 이사를 가든, 어느 학교로 전학을 가든 "내 고향은 지금 있는 곳이야"라고 말했어요. 서울로 이사 가면 "내 고향은 서울이야", 부산으로 가면 "내 고향은 부산이야"라고 했어요. 정말 상황에 따라 고향이 계속 바뀌었죠.

화살표 함수 학생들:
이 학생들은 완전히 달랐어요. 어디로 가든 "내 고향은 처음 태어난 곳이야"라고 정해놓고 절대 바꾸지 않았어요. 서울로 이사 가도 "내 고향은 원래 곳", 부산으로 가도 "내 고향은 원래 곳", 심지어 다른 나라로 이민을 가도 "내 고향은 원래 곳"이라고 했어요.

더 특별한 점은 선생님들이 "고향 바꿔주기"(call, apply, bind) 서비스를 제공해도 화살표 함수 학생들에게는 전혀 효과가 없었다는 거예요. 화살표 함수 학생들은 "고맙지만 내 고향은 절대 안 바뀌어요"라고 대답했거든요.

🎯 왜 화살표 함수를 사용하는지 생각해보기

화살표 함수의 특별한 this 특성은 여러 상황에서 매우 소중해요.

첫째로, this 혼동 방지가 가능해져요. 일반 함수에서는 this가 예상과 다르게 바뀌어서 혼란스러운 경우가 많았는데, 화살표 함수는 항상 예측 가능한 this를 사용해요.

둘째로, 다른 함수 안에서의 안정성이 뛰어나요. 다른 함수에 전달되는 작은 함수에서도 바깥쪽 this를 안전하게 유지할 수 있어요.

셋째로, 코드가 더 간단해져요. bind를 사용해서 this를 고정할 필요 없이, 화살표 함수만 사용하면 자동으로 this가 보존돼요.

마지막으로, 웹 페이지에서 버튼 클릭을 다룰 때 매우 편리해요. 웹 프로그래밍에서 버튼을 클릭했을 때 실행되는 함수의 this가 예상과 다르게 바뀌는 문제를 해결할 수 있어요.

⚙️ 기본 사용법을 차근차근 배우기

화살표 함수와 일반 함수의 this 동작을 비교해보겠어요.

// 일반 함수 - 호출 방식에 따라 this가 바뀜
function normalFunction() {
    console.log("일반 함수 this:", this);
}

// 화살표 함수 - 만들어진 곳의 this를 사용
let arrowFunction = () => {
    console.log("화살표 함수 this:", this);
};

소중한 차이점들:

  • 일반 함수: 어떻게 호출되느냐에 따라 this가 결정돼요.
  • 화살표 함수: 어디서 만들어졌느냐에 따라 this가 결정돼요.
  • 화살표 함수의 this는 절대 바뀌지 않아요.

🧪 직접 해보면서 천천히 배우기

이제 실제 예시를 통해서 화살표 함수의 특별한 this 동작을 자세히 알아보겠어요.

🔹 Ex1) 일반 함수 vs 화살표 함수 this 대결

첫 번째 예시에서는 같은 상황에서 일반 함수와 화살표 함수가 어떻게 다르게 동작하는지 직접 비교해보겠어요.

// 전체 공간에서 함수들을 만들어봐요
console.log("전체 공간 this:", this); // window 객체

// 일반 함수 정의
function normalGreet() {
    console.log("일반 함수가 보는 this:", this);  // 호출 방법에 따라 달라져요
}

// 화살표 함수 정의 (전체 공간에서 만들어짐)
let arrowGreet = () => {
    console.log("화살표 함수가 보는 this:", this);  // 만들어진 곳의 this를 항상 사용해요
};

// 테스트용 객체 만들기
let person = {
    name: "지민",
    normalMethod: normalGreet,    // 일반 함수를 객체 메서드로 등록
    arrowMethod: arrowGreet       // 화살표 함수를 객체 메서드로 등록
};

console.log("\n=== 객체의 메서드로 호출해보기 ===");
person.normalMethod();  // 일반 함수: person 객체를 가리킴
person.arrowMethod();   // 화살표 함수: 여전히 전체 공간(window)을 가리킴

console.log("\n=== call로 강제로 바꿔보기 ===");
let anotherPerson = { name: "서준" };
person.normalMethod.call(anotherPerson);  // 일반 함수: anotherPerson을 가리킴
person.arrowMethod.call(anotherPerson);   // 화살표 함수: 여전히 전체 공간(window)을 가리킴

이 예시에서 중요한 점은 화살표 함수가 어떤 방법으로 호출되든 항상 같은 this(전체 공간)를 가리킨다는 거예요. 마치 고집 센 친구처럼 자신의 원칙을 절대 바꾸지 않아요.

🔹 Ex2) 다른 함수 안에서의 화살표 함수 활용

두 번째 예시에서는 화살표 함수가 가장 빛나는 순간인 다른 함수 안에서의 상황을 살펴보겠어요.

// 학급 관리 객체
let classroom = {
    className: "5학년 1반",                      // 반 이름
    students: ["철수", "영희", "민수", "지수"],    // 학생 목록

    // 일반 함수로 학생 목록 출력 (문제 발생)
    showStudentsWrong: function() {
        console.log("=== " + this.className + " 학생 명단 (문제 버전) ===");

        this.students.forEach(function(student) {  // forEach 안의 일반 함수
            // 여기서 this는 classroom이 아니라 전체 공간을 가리켜요!
            console.log(this.className + "의 학생: " + student); // undefined의 학생: 철수
        });
    },

    // 화살표 함수로 학생 목록 출력 (올바른 방법)
    showStudentsRight: function() {
        console.log("\n=== " + this.className + " 학생 명단 (올바른 버전) ===");

        this.students.forEach((student) => {  // forEach 안의 화살표 함수
            // 화살표 함수는 바깥쪽 this(classroom)를 사용해요!
            console.log(this.className + "의 학생: " + student); // 5학년 1반의 학생: 철수
        });
    }
};

// 두 방법 비교해보기
classroom.showStudentsWrong();  // 문제가 있는 방법
classroom.showStudentsRight();  // 올바른 방법

이 예시는 화살표 함수의 진가를 보여줘요. 다른 함수 안으로 전달될 때도 바깥쪽 this를 안전하게 유지해서, 우리가 원하는 객체의 정보에 정확히 접근할 수 있어요.

🔹 Ex3) call, apply, bind가 통하지 않는 화살표 함수

세 번째 예시에서는 call, apply, bind 기능이 화살표 함수에게는 전혀 효과가 없다는 것을 확인해보겠어요.

// 실험실에서 테스트할 함수들
function normalSayHello() {
    console.log("일반 함수: 안녕하세요! 저는 " + (this.name || "이름 없음") + "입니다.");
}

let arrowSayHello = () => {
    console.log("화살표 함수: 안녕하세요! 저는 " + (this.name || "이름 없음") + "입니다.");
};

// 실험 대상들
let person1 = { name: "선생님 가람" };  // 첫 번째 실험 객체
let person2 = { name: "선생님 나래" };  // 두 번째 실험 객체

console.log("=== 일반 함수 실험 ===");
normalSayHello.call(person1);        // call 기능으로 person1을 this로 설정
normalSayHello.apply(person2);       // apply 기능으로 person2를 this로 설정

let boundNormal = normalSayHello.bind(person1);  // bind 기능으로 person1에 고정
boundNormal();                       // 고정된 함수 실행

console.log("\n=== 화살표 함수 실험 ===");
arrowSayHello.call(person1);         // call 기능 시도 - 효과 없음!
arrowSayHello.apply(person2);        // apply 기능 시도 - 효과 없음!

let boundArrow = arrowSayHello.bind(person1);  // bind 기능 시도
boundArrow();                        // 여전히 효과 없음!

console.log("\n=== 결론: 화살표 함수는 바뀌지 않아요! ===");

이 실험을 통해 화살표 함수가 정말로 모든 this 변경 시도에 면역이 있다는 것을 확인할 수 있어요. 마치 특별한 방어막을 가진 것처럼요.

🔄 화살표 함수 this 동작하는 순서 차근차근 정리하기

지금까지 배운 화살표 함수의 this 동작 과정을 하나씩 차근차근 정리해볼게요.

첫 번째 단계는 화살표 함수 생성 시점이에요. () => {} 형태로 화살표 함수가 만들어지는 순간, 자바스크립트는 현재 위치의 this를 확인해요.

두 번째 단계는 바깥쪽 환경 this 고정 단계예요. 화살표 함수가 만들어진 바깥쪽 환경의 this 값을 화살표 함수에 영구적으로 고정시켜요.

세 번째 단계는 함수 호출 단계예요. 나중에 화살표 함수가 어떤 방식으로 호출되든 상관없이, 이미 고정된 this를 사용해요.

네 번째 단계는 변경 시도 무시 단계예요. call, apply, bind 같은 this 변경 시도를 모두 무시하고 원래 고정된 this를 그대로 사용해요.

마지막으로 가장 소중한 것은 일관된 동작 단계예요. 어떤 상황에서도 항상 같은 this를 사용해서 예측 가능한 결과를 만들어내요.

🧚‍♀️ 따뜻한 이야기로 다시 배우기: 고향을 잊지 않는 전학생들

지금까지 배운 내용을 따뜻한 이야기로 다시 정리해볼까요?

옛날에 다양성 초등학교라는 곳이 있었어요. 이 학교에는 두 종류의 학생들이 다니고 있었어요.

일반 함수 학생들은 환경에 잘 적응하는 아이들이었어요. 1반에 가면 "저는 1반 학생이에요", 2반에 가면 "저는 2반 학생이에요"라고 말했어요. 심지어 선생님이 "너는 지금부터 3반 학생이야"라고 하면 바로 "네! 저는 3반 학생입니다"라고 대답했어요.

하지만 화살표 함수 학생들은 완전히 달랐어요. 이 학생들은 입학할 때부터 "저는 원래 반에서만 살 거예요"라고 선언했어요. 다른 반에 가도, 다른 활동을 해도 항상 "저는 원래 반 학생이에요"라고 말했어요.

어느 날 담임 선생님이 화살표 함수 학생인 "애로우"에게 여러 시도를 해보았어요.

"변신 게임! 너는 이제 4반 학생이야!" → 애로우: "아니에요! 저는 여전히 원래 반 학생이에요!"

"역할 놀이! 너희는 모두 5반으로!" → 애로우: "아니에요! 저는 여전히 원래 반 학생이에요!"

"영구 전학! 너는 평생 6반 학생이 되어라!" → 애로우: "아니에요! 저는 여전히 원래 반 학생이에요!"

담임 선생님은 궁금해서 "어떻게 된 거지?"라고 물었어요.

애로우가 대답했어요: "저희 화살표 함수 학생들은 처음 정해진 반을 절대 바꾸지 않아요. 이것이 저희만의 특별한 능력이거든요!"

그제서야 담임 선생님은 화살표 함수 학생들의 특별한 성질을 이해하게 되었답니다.

🧠 자주 하는 실수와 조심할 점

화살표 함수의 this를 사용할 때 자주 하는 실수들을 미리 알아두면 더 안전하게 코딩할 수 있어요.

❌ 실수 1: 화살표 함수를 객체의 메서드로 사용하기

let student = {
    name: "현서",
    grade: 5,
    // 잘못된 방법: 화살표 함수를 객체 메서드로 사용
    introduce: () => {
        console.log("안녕하세요! 저는 " + this.name + "이고 " + this.grade + "학년입니다.");
    }
};

student.introduce(); // "안녕하세요! 저는 undefined이고 undefined학년입니다."

이런 실수가 생기는 이유는 화살표 함수가 student 객체의 this가 아니라 전체 공간 this를 사용하기 때문이에요. 객체의 정보에 접근하려면 일반 함수를 사용해야 해요.

❌ 실수 2: 화살표 함수의 this를 바꾸려고 시도하기

let greetArrow = () => {
    console.log("화살표 함수: " + (this.name || "이름 없음"));
};

let person = { name: "도하" };

// 모든 시도가 실패함
greetArrow.call(person);       // call을 써도 여전히 "이름 없음"
greetArrow.apply(person);      // apply를 써도 여전히 "이름 없음"
greetArrow.bind(person)();     // bind를 써도 여전히 "이름 없음"

이 문제가 생기는 이유는 화살표 함수의 this가 생성 시점에 이미 영구적으로 고정되어 있기 때문이에요. 어떤 기능을 써도 바뀌지 않아요.

❌ 실수 3: 화살표 함수와 일반 함수의 용도 헷갈리기

let timer = {
    seconds: 0,

    // 잘못된 방법
    startWrong: () => {
        setInterval(() => {
            this.seconds++; // this가 timer가 아니라 전체 공간!
            console.log("잘못된 타이머:", this.seconds);
        }, 1000);
    },

    // 올바른 방법
    startRight: function() {
        setInterval(() => {
            this.seconds++; // 이제 this가 timer 객체!
            console.log("올바른 타이머:", this.seconds);
        }, 1000);
    }
};

이 착각이 생기는 이유는 화살표 함수와 일반 함수의 서로 다른 this 규칙을 제대로 이해하지 못했기 때문이에요. 객체 메서드는 일반 함수로, 다른 함수 안의 작은 함수는 화살표 함수로 사용하는 것이 일반적인 방법이에요.

✏️ 직접 해보기 - 따뜻한 연습 문제들

이제 배운 내용을 연습 문제를 통해서 차근차근 익혀볼게요.

마음을 편안히 하고 코드와 함께 대화하듯 연습해보세요. 각 문제는 여러분이 화살표 함수의 마음을 이해할 수 있도록 도와줄 거예요.

Ex1) 일반 함수와 화살표 함수의 this 차이를 직접 확인해보기

// 테스트용 객체
let testObj = {
    name: "테스터",   // 이름 정보가 들어있어요

    // 일반 함수
    normalMethod: function() {
        console.log("일반 함수 this.name:", this.name);
    },

    // 화살표 함수
    arrowMethod: () => {
        console.log("화살표 함수 this.name:", this.name);
    }
};

// 두 함수 호출 비교
testObj.normalMethod(); // 일반 함수 실행: this가 testObj를 가리켜요 -> "일반 함수 this.name: 테스터"
testObj.arrowMethod();  // 화살표 함수 실행: this가 전체 공간을 가리켜요 -> "화살표 함수 this.name: undefined"

이 연습을 통해 같은 객체에서 호출해도 함수 종류에 따라 this가 다르게 동작한다는 것을 확인할 수 있어요.

Ex2) 다른 함수 안에서 화살표 함수의 장점을 경험해보기

let library = {
    name: "행복 도서관",                                 // 도서관 이름
    books: ["어린왕자", "해리포터", "찰리와 초콜릿 공장"],  // 책 목록

    // 화살표 함수를 다른 함수 안에서 사용하는 올바른 방법
    showBooks: function() {
        console.log("=== " + this.name + " 도서 목록 ===");

        this.books.forEach((book, index) => {  // forEach 안에서 화살표 함수 사용
            // 화살표 함수가 바깥쪽 this(library)를 안전하게 사용해요
            console.log((index + 1) + ". " + book + " (도서관: " + this.name + ")");
        });
    }
};

// 도서 목록 출력
library.showBooks();
// "=== 행복 도서관 도서 목록 ==="
// "1. 어린왕자 (도서관: 행복 도서관)"
// "2. 해리포터 (도서관: 행복 도서관)"
// "3. 찰리와 초콜릿 공장 (도서관: 행복 도서관)"

이 문제는 화살표 함수가 다른 함수 안에서 어떻게 바깥쪽 this를 안전하게 보존하는지 보여줘요.

Ex3) 화살표 함수가 변경에 면역인지 확인해보기

// 실험용 화살표 함수
let immuneFunction = () => {
    // this가 전체 공간(window)인지 확인해보기
    console.log("면역 함수의 this:", this === window ? "전체 공간" : this);
};

// 변경 시도 대상
let changeTarget = { name: "변경 대상", type: "실험체" };  // 변경을 시도해볼 객체

console.log("=== 변경 실험 시작 ===");

// 다양한 변경 시도
console.log("1. call 시도:");
immuneFunction.call(changeTarget);  // call 기능으로 this 바꾸기 시도

console.log("2. apply 시도:");
immuneFunction.apply(changeTarget);  // apply 기능으로 this 바꾸기 시도

console.log("3. bind 시도:");
let boundImmune = immuneFunction.bind(changeTarget);  // bind 기능으로 this 고정 시도
boundImmune();  // 고정된 함수 실행해보기

console.log("=== 결론: 모든 시도가 무효! ===");

이 연습문제를 통해 화살표 함수가 정말로 모든 this 변경 시도에 면역이 있다는 것을 직접 확인할 수 있어요.

🎮 보너스 문제 - 조금 더 깊이 있는 화살표 함수 활용법

조금 더 도전해보고 싶은 분들을 위한 보너스 문제예요. 천천히 생각해보세요.

보너스 Q1. 다음 코드의 결과를 예상해보세요

let counter = {
    count: 0,

    increment: () => {
        this.count++;
        console.log("현재 카운트:", this.count);
    },

    reset: function() {
        this.count = 0;
        console.log("카운트 리셋됨");
    }
};

counter.increment();
counter.reset();
counter.increment();

정답:

  • "현재 카운트: NaN"
  • "카운트 리셋됨"
  • "현재 카운트: NaN"

부드러운 설명: increment는 화살표 함수이므로 counter 객체의 this가 아니라 전체 공간 this를 사용해요. 전체 공간에는 count 정보가 없어서 undefined + 1 = NaN이 돼요.

보너스 Q2. 다음 중 올바른 화살표 함수 사용법은?

// A번: 객체 메서드로 화살표 함수 사용
let objA = {
    data: "데이터",
    showData: () => console.log(this.data)
};

// B번: 다른 함수 안에서 화살표 함수 사용
let objB = {
    data: "데이터",
    showData: function() {
        setTimeout(() => console.log(this.data), 1000);
    }
};

정답: B번이 올바른 사용법이에요.

부드러운 설명: A번은 화살표 함수를 객체 메서드로 사용해서 this가 객체가 아닌 전체 공간을 가리키게 돼요. B번은 일반 함수 안의 작은 함수에서 화살표 함수를 사용해서 바깥쪽 함수의 this(객체)를 안전하게 유지할 수 있어요.

📚 이전 단원 복습하기

9단원을 배우는 여러분을 위해 이전에 배운 내용을 차근차근 복습해볼게요.

복습 문제 1 - 9.2단원: call, apply, bind 사용하기

// 9.2단원에서 배운 this 제어 방법들을 사용해보세요
function introduce(greeting, hobby) {
    console.log(greeting + "! 저는 " + this.name + "이고, " + hobby + "를 좋아해요.");
}

let student = { name: "하늘" };

// call 사용하기
introduce.call(student, "안녕하세요", "독서");  // "안녕하세요! 저는 하늘이고, 독서를 좋아해요."

// apply 사용하기 (배열로 전달)
introduce.apply(student, ["반갑습니다", "그림그리기"]);  // "반갑습니다! 저는 하늘이고, 그림그리기를 좋아해요."

// bind 사용하기 (새 함수 만들기)
let boundIntroduce = introduce.bind(student, "좋은 하루");
boundIntroduce("음악 듣기");  // "좋은 하루! 저는 하늘이고, 음악 듣기를 좋아해요."

복습 포인트: call은 즉시 실행하고, apply는 배열로 전달하고, bind는 새 함수를 만들어줘요. 화살표 함수는 이런 방법들로 this를 바꿀 수 없다는 점을 기억하세요.

복습 문제 2 - 8단원: 객체와 메서드 만들기

// 8단원에서 배운 객체와 메서드를 만들어보세요
let gamePlayer = {
    name: "플레이어1",
    score: 0,
    level: 1,

    // 점수 증가 메서드
    increaseScore: function(points) {
        this.score += points;
        console.log(this.name + "의 점수: " + this.score);
    },

    // 레벨업 메서드
    levelUp: function() {
        this.level++;
        console.log(this.name + "이 " + this.level + "레벨이 되었습니다!");
    }
};

gamePlayer.increaseScore(100);  // "플레이어1의 점수: 100"
gamePlayer.levelUp();           // "플레이어1이 2레벨이 되었습니다!"

복습 포인트: 객체의 메서드에서 this는 그 객체를 가리켜요. 이것이 화살표 함수와 일반 함수의 차이를 이해하는 기초가 돼요.

지금까지 화살표 함수의 특별한 this 특징에 대해 자세히 알아보았어요. 화살표 함수는 자신만의 this를 만들지 않고 바깥쪽 환경의 this를 그대로 사용하는 독특한 특성을 가지고 있어요. 이 특성을 잘 이해하고 활용하면 더 안전하고 예측 가능한 코드를 작성할 수 있어요.

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요.

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

🎯 추가 연습 문제들

조금 더 연습하고 싶은 분들을 위한 추가 문제들이에요.

추가 문제 1. 화살표 함수와 일반 함수의 this 차이를 확인해보세요.

// 답:
let obj = {
    name: "하늘",
    normalMethod: function() {
        console.log("일반 함수:", this.name);
    },
    arrowMethod: () => {
        console.log("화살표 함수:", this.name);
    }
};

obj.normalMethod(); // "일반 함수: 하늘"
obj.arrowMethod();  // "화살표 함수: undefined"

추가 문제 2. 객체 메서드 안에서 화살표 함수를 콜백으로 사용해보세요.

// 답:
let student = {
    name: "별",
    scores: [90, 85, 95],
    showScores: function() {
        console.log(this.name + "의 점수:");
        this.scores.forEach((score) => {
            console.log("점수: " + score + " (학생: " + this.name + ")");
        });
    }
};

student.showScores();

추가 문제 3. 화살표 함수에 call을 사용해서 this가 바뀌는지 확인해보세요.

// 답:
let arrowFunc = () => {
    console.log("this:", this);
};

let person = { name: "구름" };

// call을 써도 this가 안 바뀜
arrowFunc.call(person); // this는 여전히 전역 객체

📂 마무리 정보

오늘 배운 9.3.1 내용이 여러분의 자바스크립트 지식에 잘 자리 잡았나요? 다음 시간에는 더 재미있는 내용으로 만나요.

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


🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작