9.2.3 bind로 this 고정하기 - 영원히 변하지 않는 연결

📘 9.2.3 bind로 this 고정하기 - 영원히 변하지 않는 연결

여러분께 인사드려요. 지금까지 우리는 call과 apply라는 특별한 능력을 배웠어요. 둘 다 this를 원하는 객체로 바꿔서 기능을 실행하는 능력을 가지고 있었죠. 이제 this 기능의 마지막 단계인 bind를 만나볼 시간이에요.

bind는 call과 apply와는 조금 다른 특별한 능력을 가지고 있어요. 바로 영원히 변하지 않는 연결을 만드는 기능이에요. 마치 두 마음이 하나로 연결되어 절대 떨어지지 않는 것처럼요.

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

this 기능의 최종 단계인 bind와 친해지기 전에, 새로운 말들을 먼저 차근차근 배워보겠어요.

단어	부드러운 설명
bind 기능	this를 특정 객체로 영원히 연결된 새로운 기능을 만들어내는 따뜻한 방법이에요.
고정하기	this가 절대 바뀌지 않도록 특정 객체에 마음의 끈으로 묶어두는 것을 말해요.
새 기능 만들어주기	원래 기능은 그대로 두고, 새로운 성질을 가진 기능을 복사해서 만들어 주는 거예요.

bind는 영어로 "묶다", "연결하다"라는 뜻을 가지고 있어요. 마치 실로 두 물건을 정성스럽게 묶는 것처럼, 기능과 객체를 영원히 연결해주는 역할을 해요. 한 번 묶이면 절대로 풀어지지 않는 따뜻한 끈이라고 생각하면 돼요.

✨ bind가 무엇인지 천천히 알아보기

bind는 call과 apply의 형제이지만, 완전히 다른 성격을 가지고 있어요. call과 apply가 "지금 당장 이 객체로 기능을 실행해줘"라고 말하는 기능이라면, bind는 "나중에 사용할 수 있도록 이 객체와 영원히 연결된 새로운 기능을 만들어줘"라고 부드럽게 부탁하는 기능이에요.

가장 중요한 특징은 bind가 기능을 즉시 실행하지 않는다는 거예요. 대신 this가 특정 객체로 고정된 새로운 기능을 만들어서 돌려줘요. 이 새로운 기능은 마치 이름표에 주인의 이름이 적혀있는 것처럼, 누가 자신의 this인지 영원히 기억하고 있어요.

또 다른 특징은 한 번 고정된 this는 절대 바뀌지 않는다는 거예요. 나중에 누군가 call이나 apply로 다른 객체를 지정하려고 해도, bind로 연결된 관계는 끊어지지 않아요. 마치 두 마음이 하나로 연결된 것처럼 말이에요.

따뜻한 이야기: 학교의 전담 선생님 시스템

bind를 더 가깝게 이해하기 위해 '학교의 전담 선생님 시스템' 이야기를 들려드릴게요.

학교에 "수업하기"라는 능력을 가진 선생님이 한 명 계셨어요. 이 선생님은 어떤 반에서든 수업을 할 수 있는 능력이 있었어요.

call 방식:
교장 선생님이 "지금 당장 3학년 1반에서 수업해주세요" 하면 선생님이 그 반에 가서 수업을 하세요. 하지만 수업이 끝나면 다시 교무실로 돌아와요.

apply 방식:
교장 선생님이 "지금 당장 4학년 2반에서 [교과서, 칠판, 분필]을 가지고 수업해주세요" 하면 선생님이 그 도구들을 들고 가서 수업을 하세요.

bind 방식:
하지만 bind 방식은 완전히 달라요. 교장 선생님이 "이 선생님을 5학년 3반의 전담 선생님으로 임명합니다" 하고 공식 발령을 내리는 거예요. 그러면 새로운 "5학년 3반 전담 선생님"이 탄생해요.

특별한 점은 다른 사람이 "잠깐만 다른 반에서 수업해보세요"라고 해도, 전담 선생님은 "아니요, 저는 5학년 3반 전담이에요"라고 대답한다는 거예요. 공식 발령서에 적힌 담당 반은 절대 바뀔 수 없었거든요.

🎯 왜 bind를 사용하는지 생각해보기

bind 기능을 사용하는 이유는 정말 다양하고 실용적이에요.

첫째로, this 안전성 보장이 가능해져요. 기능을 다른 곳에 전달하거나 나중에 사용할 때, this가 예상과 다르게 바뀌는 것을 걱정할 필요가 없어요.

둘째로, 다시 사용 가능한 기능 만들기가 쉬워져요. 같은 기능을 여러 객체에 각각 고정해서 여러 버전을 만들 수 있어요. 마치 같은 요리법으로 다른 재료를 사용해서 다양한 요리를 만드는 것과 같아요.

셋째로, 웹 페이지에서 버튼 클릭을 다룰 때 매우 소중해요. 웹 프로그래밍에서 버튼을 클릭했을 때 실행되는 기능의 this가 바뀌는 문제를 해결할 수 있어요.

마지막으로, 일부 정보를 미리 채워두기가 가능해져요. this뿐만 아니라 일부 정보도 미리 고정해서, 나중에 더 간단하게 사용할 수 있는 기능을 만들 수 있어요.

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

bind의 사용법은 call과 apply와 비슷하지만, 결과가 완전히 달라요.

// 기본 사용법
let 새로운기능 = 원래기능.bind(this로_사용할_객체);

// 정보도 함께 고정하는 경우
let 새로운기능 = 원래기능.bind(this로_사용할_객체, 정보1, 정보2);

// call/apply와의 차이점
원래기능.call(객체);         // 즉시 실행됨
원래기능.apply(객체, []);    // 즉시 실행됨
let 새기능 = 원래기능.bind(객체); // 새 기능만 만들어짐 (실행 안 됨)

소중한 점들:

• bind는 새로운 기능을 만들어줘요. 원래 기능은 그대로 둬요.
• 새로운 기능의 this는 영원히 고정되어서 절대 바뀌지 않아요.
• 실행하려면 새로운 기능을 따로 호출해야 해요.

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

이제 실제 예시를 통해서 bind가 어떻게 움직이는지 자세히 알아보겠어요.

🔹 Ex1) bind의 기본 동작 이해하기

첫 번째 예시에서는 bind가 어떻게 새로운 기능을 만들어내는지 확인해보겠어요.

// 자기소개를 하는 기능
function introduce() {
    console.log("안녕하세요! 저는 " + this.name + "이고, " + this.age + "살입니다.");
}

// 두 명의 친구
let friend1 = { name: "도현", age: 10 };  // 이름이 도현이고 10살인 친구
let friend2 = { name: "서아", age: 9 };   // 이름이 서아이고 9살인 친구

console.log("=== bind로 새로운 기능 만들기 ===");

// friend1에 고정된 새로운 기능 만들기
let introduceAsFriend1 = introduce.bind(friend1);  // bind로 도현에게 고정된 새 기능 만들기

// 새로운 기능 실행해보기
introduceAsFriend1(); // 새 기능 실행 -> "안녕하세요! 저는 도현이고, 10살입니다."

console.log("\n=== bind된 기능은 this가 절대 안 바뀜 ===");

// friend2로 바꾸려고 해도 소용없음!
introduceAsFriend1.call(friend2);    // call을 써도 여전히 "안녕하세요! 저는 도현이고, 10살입니다."
introduceAsFriend1.apply(friend2);   // apply를 써도 여전히 "안녕하세요! 저는 도현이고, 10살입니다."

console.log("\n=== 원래 기능은 그대로 있어요 ===");
introduce.call(friend2); // 원래 기능은 정상 작동 -> "안녕하세요! 저는 서아이고, 9살입니다."

이 예시에서 가장 중요한 점은 bind로 만든 새로운 기능이 다른 방법으로 this를 바꾸려고 해도 전혀 영향을 받지 않는다는 거예요. 마치 이름표에 새겨진 정보처럼 변경할 수 없어요.

🔹 Ex2) call/apply와 bind의 차이점 비교하기

두 번째 예시에서는 세 가지 기능의 서로 다른 동작 방식을 명확히 비교해보겠어요.

// 점수를 발표하는 기능
function announceScore(subject, score) {
    console.log(this.name + "의 " + subject + " 점수는 " + score + "점입니다!");
}

// 학생 정보
let student = { name: "지우" };  // 이름이 지우인 학생

console.log("=== call 방식: 즉시 실행 ===");
announceScore.call(student, "수학", 95);  // call로 즉시 실행
// "지우의 수학 점수는 95점입니다!" (바로 실행됨)

console.log("\n=== apply 방식: 즉시 실행 ===");
announceScore.apply(student, ["과학", 88]);  // apply로 즉시 실행 (배열로 정보 전달)
// "지우의 과학 점수는 88점입니다!" (바로 실행됨)

console.log("\n=== bind 방식: 새 기능만 생성 ===");
let boundAnnounce = announceScore.bind(student);  // bind로 새 기능만 만들기
console.log("bind 실행했지만 아직 아무것도 출력되지 않음");

console.log("\n=== bind된 기능을 직접 호출해야 실행됨 ===");
boundAnnounce("영어", 92);  // 새 기능 직접 실행
// "지우의 영어 점수는 92점입니다!" (이제야 실행됨)

boundAnnounce("미술", 89);  // 같은 기능을 또 사용 가능
// "지우의 미술 점수는 89점입니다!" (같은 기능을 또 사용 가능)

이 예시를 통해 bind가 나중에 여러 번 사용할 수 있는 "맞춤형 기능"을 만들어준다는 것을 이해할 수 있어요. 마치 개인 전용 도구를 만들어주는 것과 같아요.

🔹 Ex3) 정보도 함께 고정하기

세 번째 예시에서는 bind의 특별한 능력인 정보 고정을 알아보겠어요.

// 인사말과 활동을 소개하는 기능
function greetAndTell(greeting, activity, time) {
    console.log(greeting + "! 저는 " + this.name + "입니다.");
    console.log("저는 " + time + "에 " + activity + "를 즐겨해요.");
}

// 학생 정보
let student = { name: "하은" };  // 이름이 하은인 학생

console.log("=== this와 첫 번째 정보 고정하기 ===");

// this와 greeting을 "안녕하세요"로 고정
let politeGreet = greetAndTell.bind(student, "안녕하세요");  // 학생 객체와 "안녕하세요"를 고정

// 나머지 정보만 전달해서 사용
politeGreet("독서", "저녁시간");     // 활동과 시간만 전달
// "안녕하세요! 저는 하은입니다."
// "저는 저녁시간에 독서를 즐겨해요."

politeGreet("그림그리기", "주말");   // 다른 활동과 시간으로 또 사용
// "안녕하세요! 저는 하은입니다."
// "저는 주말에 그림그리기를 즐겨해요."

console.log("\n=== this와 두 개 정보 고정하기 ===");

// this, greeting, activity까지 고정
let readingGreet = greetAndTell.bind(student, "반갑습니다", "책 읽기");  // 인사말과 활동까지 고정

// 마지막 정보만 전달
readingGreet("잠자기 전");  // 시간만 전달하면 됨
// "반갑습니다! 저는 하은입니다."
// "저는 잠자기 전에 책 읽기를 즐겨해요."

이 예시는 bind의 유연성을 보여줘요. this뿐만 아니라 일부 정보도 미리 설정해서, 나중에 더 간단하게 사용할 수 있는 "반제품 기능"을 만들 수 있어요.

🔄 bind 사용하는 순서 차근차근 정리하기

지금까지 배운 bind 사용 과정을 하나씩 차근차근 정리해볼게요.

첫 번째 단계는 원기능과 객체 준비예요. bind할 기능과 this로 고정할 객체를 마음을 담아 미리 준비해둬요.

두 번째 단계는 bind 기능 호출 단계예요. 원기능.bind(객체) 형태로 bind를 사용하면, 새로운 기능이 생성돼요.

세 번째 단계는 새 기능 저장 단계예요. bind가 만들어준 새로운 기능을 변수에 저장해둬요. 이 시점에서는 아직 실행되지 않아요.

네 번째 단계는 필요할 때 호출 단계예요. 저장해둔 새 기능을 필요한 시점에 호출해요. 이때 고정된 this로 기능이 실행돼요.

마지막으로 가장 소중한 것은 고정 확인 단계예요. 다른 방법으로 this를 바꾸려고 해도 전혀 영향을 받지 않는다는 것을 확인할 수 있어요.

🧚‍♀️ 따뜻한 이야기로 다시 배우기: 학교의 전담 교사 시스템

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

옛날에 행복초등학교라는 곳이 있었어요. 이 학교에는 세 가지 다른 교사 배치 시스템이 있었어요.

call 시스템은 "임시 파견 서비스"였어요. "지금 당장 이 선생님을 3학년 1반에 보내서 수업해달라"라고 교무실에 요청하면, 그 순간만 해당 반에서 수업을 해주었어요. 하지만 수업이 끝나면 다시 교무실로 돌아왔어요.

apply 시스템은 call 시스템과 비슷했지만, 수업 도구들을 큰 상자에 담아서 한 번에 전달하는 특별한 서비스였어요. "이 도구 상자를 가지고 4학년 2반에 가서 수업해달라"라고 요청하면 됐어요.

bind 시스템은 완전히 다른 서비스였어요. "전담 교사 배정 서비스"였어요. "이 선생님을 5학년 3반의 전담 교사로 배정해달라"라고 교육청에 요청하면, 특별한 전담 교사 자격증을 만들어주었어요.

이 전담 교사의 특별한 점은 자격증에 적힌 담당 반만을 영원히 가르친다는 것이었어요. 다른 사람들이 "잠깐만 다른 반도 가르쳐봐"라고 해도, 전담 교사는 "아니요, 제 자격증에는 5학년 3반이 적혀있어요"라고 대답했어요.

더 특별한 점은 자격증에 "기본 수업 도구" 조항도 적을 수 있다는 것이었어요. 예를 들어 "항상 수학 교과서와 계산기를 가지고 다녀라"라고 적으면, 전담 교사는 항상 그 도구들을 가지고 있어서 나중에 추가 준비물만 주면 바로 수업할 수 있었답니다.

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

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

❌ 실수 1: bind로 만든 기능을 바로 실행하려고 하기

function greet() {
    console.log("안녕하세요! " + this.name);
}

let person = { name: "예준" };

// 잘못된 사용
greet.bind(person); // 아무것도 출력되지 않음!

// 올바른 사용
let boundGreet = greet.bind(person);  // 새 기능을 변수에 저장
boundGreet(); // 저장한 기능 실행 -> "안녕하세요! 예준"

// 또는 이렇게
greet.bind(person)(); // bind 결과를 바로 실행 -> "안녕하세요! 예준"

이런 실수가 생기는 이유는 bind가 call이나 apply처럼 즉시 실행하는 것이 아니라, 새로운 기능을 만들기만 하기 때문이에요.

❌ 실수 2: bind된 기능의 this를 다시 바꾸려고 하기

function sayHello() {
    console.log("안녕하세요, " + this.name + "!");
}

let person1 = { name: "시우" };
let person2 = { name: "서윤" };

let boundSayHello = sayHello.bind(person1);  // person1에 고정된 새 기능 만들기

// 이미 bind된 기능은 this가 절대 안 바뀜!
boundSayHello.call(person2);    // call을 써도 여전히 "안녕하세요, 시우!"
boundSayHello.apply(person2);   // apply를 써도 여전히 "안녕하세요, 시우!"
boundSayHello.bind(person2)();  // bind를 다시 써도 여전히 "안녕하세요, 시우!"

이 특성은 실수가 아니라 bind의 의도된 동작이에요. 하지만 처음 배우는 사람들은 종종 이것을 실수로 생각해요. bind로 만든 기능은 영원한 연결로 this가 붙어있다고 생각하면 돼요.

❌ 실수 3: bind와 call/apply의 목적 헷갈리기

// call/apply: 지금 당장 실행하고 싶을 때
function showInfo() {
    console.log("정보: " + this.data);
}

let obj = { data: "중요한 내용" };

// 지금 바로 실행
showInfo.call(obj); // "정보: 중요한 내용"

// bind: 나중에 사용할 기능을 만들고 싶을 때
let infoShower = showInfo.bind(obj);  // 새 기능 만들기
// ... 시간이 흐른 후 ...
infoShower(); // "정보: 중요한 내용"

이 차이를 이해하지 못하면 적절하지 않은 방법을 선택하게 돼요. call/apply는 즉석에서 바로 요리하는 것이고, bind는 미리 준비해두는 도시락이라고 생각하면 쉬워요.

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

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

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

Ex1) bind로 this가 고정된 새로운 기능을 만들어보기

// 취미를 소개하는 기능
function introduceHobby() {
    console.log("안녕하세요! 저는 " + this.name + "이고,");
    console.log("제 취미는 " + this.hobby + "입니다!");
}

// 학생 정보
let student = { name: "지호", hobby: "축구" };  // 이름과 취미가 들어있는 객체

// bind로 새로운 기능 만들기
let boundIntroduce = introduceHobby.bind(student);  // student 객체에 고정된 새 기능 만들기

// 새 기능 실행하기
boundIntroduce();  // 새로 만든 기능 실행
// "안녕하세요! 저는 지호이고,"
// "제 취미는 축구입니다!"

// 다른 방법으로 this를 바꿔보기 (실패할 것)
let anotherStudent = { name: "유진", hobby: "피아노" };
boundIntroduce.call(anotherStudent); // call을 써도 여전히 지호의 정보가 나옴

이 연습을 통해 bind의 기본 동작과 고정성을 확인할 수 있어요.

Ex2) 정보도 함께 고정하는 bind를 만들어보기

// 성적을 발표하는 기능
function announceGrade(subject, grade, comment) {
    console.log("=== " + this.name + "의 성적표 ===");
    console.log("과목: " + subject);
    console.log("점수: " + grade + "점");
    console.log("평가: " + comment);
}

// 학생 정보
let student = { name: "채원" };  // 이름이 채원인 학생

// this와 첫 번째 정보 고정
let mathAnnouncer = announceGrade.bind(student, "수학");  // 학생과 "수학" 과목을 고정

// 나머지 정보만 전달해서 사용
mathAnnouncer(95, "우수");  // 점수와 평가만 전달
mathAnnouncer(88, "양호");  // 다른 점수와 평가로 또 사용

// this와 두 개 정보 고정
let mathExcellent = announceGrade.bind(student, "수학", 100);  // 학생, 과목, 점수까지 고정

// 마지막 정보만 전달
mathExcellent("최우수");  // 평가만 전달하면 됨

이 문제는 bind의 부분 정보 고정 기능을 연습하는 데 도움이 돼요.

Ex3) bind와 call의 차이점을 직접 체험해보기

// 시간을 알려주는 기능
function tellTime(period) {
    console.log(this.name + ": 지금은 " + period + "입니다!");
}

let clock = { name: "벽시계" };  // 이름이 벽시계인 객체

console.log("=== call 방식 (즉시 실행) ===");
tellTime.call(clock, "오전 9시");  // call로 즉시 실행

console.log("\n=== bind 방식 (기능 생성) ===");
let boundTellTime = tellTime.bind(clock);  // bind로 새 기능만 만들기
console.log("bind 실행했지만 아직 아무것도 안 나옴");

console.log("이제 bound 기능을 호출:");
boundTellTime("오후 3시");  // 새 기능 실행해야 결과가 나옴

console.log("같은 기능을 또 사용:");
boundTellTime("저녁 7시");  // 만들어둔 기능을 재사용 가능

이 연습문제를 통해 bind와 call의 실행 시점 차이를 명확히 이해할 수 있어요.

🎮 보너스 문제 - 조금 더 깊이 있는 bind 활용법

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

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

function showMessage() {
    console.log("메시지: " + this.message);
}

let obj1 = { message: "첫 번째 메시지" };
let obj2 = { message: "두 번째 메시지" };

let boundShow = showMessage.bind(obj1);
boundShow();
boundShow.call(obj2);
boundShow.apply(obj2);

정답:

• "메시지: 첫 번째 메시지"
• "메시지: 첫 번째 메시지"
• "메시지: 첫 번째 메시지"

부드러운 설명: bind로 한 번 고정된 this는 절대 바뀌지 않아요. call이나 apply를 사용해도 이미 고정된 this(obj1)가 계속 사용되기 때문에 모두 같은 결과가 나와요.

보너스 Q2. 다음 중 올바른 bind 사용법은?

function greet(message) {
    console.log(message + ", " + this.name + "!");
}

let person = { name: "은서" };

// A번
greet.bind(person, "안녕하세요")();

// B번
greet.bind(person)("안녕하세요");

// C번
greet.bind(person, "안녕하세요");

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

부드러운 설명: A번은 정보까지 고정한 후 즉시 실행, B번은 this만 고정한 후 정보를 전달하여 실행하는 방법이에요. C번은 bind로 기능을 만들기만 하고 실행하지 않아서 아무 결과도 나오지 않아요.

📚 이전 단원 복습하기

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

복습 문제 1 - 4단원: 반복문 사용하기

// 4단원에서 배운 for문을 사용해보세요
console.log("=== 구구단 3단 ===");
for (let i = 1; i <= 9; i++) {  // 1부터 9까지 반복
    let result = 3 * i;         // 3에 i를 곱해요
    console.log("3 × " + i + " = " + result);
}

// while문도 사용해보기
console.log("\n=== 1부터 5까지 더하기 ===");
let sum = 0;
let num = 1;
while (num <= 5) {              // num이 5 이하인 동안 반복
    sum = sum + num;            // sum에 num을 더해요
    console.log("현재까지 합: " + sum);
    num++;                      // num을 1 증가시켜요
}

복습 포인트: 반복문은 같은 일을 여러 번 할 때 사용해요. bind로 만든 기능도 이런 반복문 안에서 여러 번 사용할 수 있어요.

복습 문제 2 - 3단원: 조건문 사용하기

// 3단원에서 배운 if문을 사용해보세요
let temperature = 25;  // 현재 기온

if (temperature >= 30) {
    console.log("더워요! 에어컨을 켜세요.");
} else if (temperature >= 20) {
    console.log("적당해요! 창문을 여세요.");
} else {
    console.log("추워요! 히터를 켜세요.");
}

// switch문도 사용해보기
let weather = "맑음";
switch (weather) {
    case "맑음":
        console.log("좋은 날씨예요!");
        break;
    case "흐림":
        console.log("구름이 많네요.");
        break;
    case "비":
        console.log("우산을 챙기세요.");
        break;
    default:
        console.log("오늘 날씨를 확인해보세요.");
}

복습 포인트: 조건문은 상황에 따라 다른 일을 할 때 사용해요. bind에서도 상황에 따라 다른 객체나 정보를 고정할 수 있어요.

지금까지 bind 기능에 대해 자세히 알아보았어요. bind는 this를 영원히 고정하는 특별한 능력을 가진 정말 소중한 도구예요. 기능을 안전하게 다른 곳에 전달하거나 나중에 사용할 때 꼭 필요한 기능이니까 잘 기억해두세요.

✅ 학습 완료 체크리스트

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

학습 내용	이해했나요?
bind의 기본 개념	✅
기본 사용법과 문법	✅
call/apply와의 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🎯 추가 연습 문제들

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

추가 문제 1. bind로 this가 고정된 새 함수를 만들어보세요.

// 답:
function showInfo() {
    console.log("이름: " + this.name + ", 나이: " + this.age);
}

let student = { name: "하늘", age: 8 };
let boundShowInfo = showInfo.bind(student);

boundShowInfo(); // "이름: 하늘, 나이: 8"

추가 문제 2. bind로 매개변수도 함께 고정해보세요.

// 답:
function greet(message, time) {
    console.log(message + "! " + this.name + "님, " + time + "입니다.");
}

let person = { name: "별" };
let morningGreet = greet.bind(person, "좋은 아침");

morningGreet("8시"); // "좋은 아침! 별님, 8시입니다."

추가 문제 3. bind된 함수가 다른 방법으로 this를 바꿀 수 있는지 확인해보세요.

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

let person1 = { name: "구름" };
let person2 = { name: "바람" };

let boundSayHello = sayHello.bind(person1);
boundSayHello(); // "안녕하세요, 구름!"

// call로 바꾸려고 해도 안 바뀜
boundSayHello.call(person2); // 여전히 "안녕하세요, 구름!"

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

---