JavaScript - Function bind() 메서드

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 bind() 메서드의 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 저는 당신의 친절한 안내자가 되겠습니다. 이 개념을 단계별로 탐구해 보겠습니다. 그러니 좋아하는 음료를 마시며 편안하게 자리를 잡고, 이제 뛰어들어 보겠습니다!

Function bind() 메서드

costume 파티에서 자신이 원하는 대로 변할 수 있는 능력을 가지고 있다고 상상해 보세요. 재미있지 않나요? JavaScript에서는 함수가 이와 같은 초능력을 가지고 있습니다. bind()이라는 이름의 초능력을 통해 함수는 자신의 문맥을 변경할 수 있습니다. 다시 말해, 함수가 호출될 때 this가 무엇을 가리키는지 결정할 수 있습니다.

하지만 기다리세요, this는 무엇인가요? 걱정하지 마세요, 이제 가서 이에 대해 설명하겠습니다! 지금은 this를 함수의 자아정체로 생각해 보세요.

문법

bind() 메서드를 어떻게 사용하는지 살펴보겠습니다:

let boundFunction = originalFunction.bind(thisArg[, arg1[, arg2[, ...]]])

이것이 무서워하지 마세요! 보기보다 간단합니다. 이를 하나씩 풀어보겠습니다:

• originalFunction: 이는 바인드할 함수입니다.
• thisArg: 이는 함수 내부에서 this가 가리킬 대상입니다.
• arg1, arg2, ...: 함수에 미리 설정할 선택적 인자입니다.

Function bind() 메서드 없이

bind()의 동작을 보기 전에, 왜 이를 필요로 할까요?

const person = {
name: "Alice",
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

person.greet(); // 출력: Hello, my name is Alice

const greetFunction = person.greet;
greetFunction(); // 출력: Hello, my name is undefined

와! 무슨 일이 일어났을까요? person.greet()를 호출할 때는 문제가 없었습니다. 하지만 함수를 greetFunction으로 할당하고 호출할 때는 갑자기 this.name이 undefined가 되었습니다. 마치 함수가 자신의 기억을 잃은 것처럼입니다!

이는 greetFunction()을 호출할 때 this가 더 이상 person을 가리키지 않기 때문입니다. 마치 함수가 자신이 속한 대상을 잊은 것처럼입니다.

Function bind() 메서드와 함께

이제 bind()가 어떻게 구원의 손을 내미칠 수 있는지 보겠습니다:

const person = {
name: "Alice",
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

const greetFunction = person.greet.bind(person);
greetFunction(); // 출력: Hello, my name is Alice

다다! bind(person)를 사용함으로써, 우리는 함수에게 "어디로 가든지, 항상 this는 person을 가리키도록 해"라고 말했습니다. 이제 우리의 함수는 항상 자신의 정체성을 알게 됩니다!

동일한 함수를 다른 객체에 바인딩

이제 같은 함수를 다른 객체와 함께 사용해 보겠습니다:

function introduce() {
console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
}

const alice = { name: "Alice", age: 25 };
const bob = { name: "Bob", age: 30 };

const introduceAlice = introduce.bind(alice);
const introduceBob = introduce.bind(bob);

introduceAlice(); // 출력: Hi, I'm Alice and I'm 25 years old.
introduceBob();   // 출력: Hi, I'm Bob and I'm 30 years old.

이게 멋진 것 아닌가요? 우리의 introduce 함수는 변신하는 도마뱀처럼, 바인딩된 객체에 따라 자신의 정체성을 바꿉니다!

함수 매개변수의 기본값 설정

bind()은 또 다른 트릭을 가지고 있습니다 - 함수의 인자를 미리 설정할 수 있습니다:

function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Charlie" };

const casualGreet = greet.bind(person, "Hey");
casualGreet("!"); // 출력: Hey, Charlie!

const formalGreet = greet.bind(person, "Good day", ".");
formalGreet(); // 출력: Good day, Charlie.

여기서 우리는 bind()을 사용하여 this를 설정하는 것뿐만 아니라, 일부 인자를 미리 설정합니다. 부분적으로 채워진 양식을 준비하는 것처럼 매우 유용합니다!

메서드 표

이제 우리가 논의한 메서드의 빠른 참조 표를 제공하겠습니다:

메서드	설명	문법
bind()	고정된 this 값을 가진 새로운 함수를 생성합니다	function.bind(thisArg[, arg1[, arg2[, ...]]])

기억하십시오, bind()은 JavaScript의 강력한 도구 중 하나입니다. 코딩 여정을 계속하면서 더 많은 흥미로운 기능을 발견하게 될 것입니다!

결론적으로, bind()은 함수와 객체를 항상 조화롭게 함께 작동시킬 수 있는 마법의 점퍼입니다. 이는 코드를 더 유연하고 재사용 가능하게 만드는 강력한 도구입니다.

계속 연습하고, 호기심을 유지하십시오. 곧 프로처럼 함수를 바인딩할 수 있을 것입니다! 미래의 JavaScript 마스터 여러분, 즐거운 코딩을 하세요!

Credits: Image by storyset