JavaScript에서 bind()는 무엇입니까?

최근에 .NET에서 Call() 및 Apply()를 사용하는 방법에 대한 기사를 게시했습니다. Bind는 종종 이러한 방법으로 논의되지만 약간 다르게 작동합니다.

바인드 메소드를 사용할 때 우리는 새로운 함수를 생성하지만 이 값은 메소드를 호출할 때 전달되는 값으로 설정됩니다. 기본 예제부터 살펴보겠습니다.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore() {
  return `${this.name} scored ${this.score}.`
};
const result = studentScore.bind(studentOne);
console.log(result());
//Returns ---> Abby scored 80.

위의 예에서 우리는 studentOne 객체를 생성합니다. 이 개체 내부에 학생 이름과 점수에 대한 속성을 설정합니다. 다음으로 함수 선언을 사용하고 studentScore라는 함수를 만듭니다. 이 함수는 학생 이름과 점수가 포함된 템플릿 리터럴을 반환합니다. 계속해서 result라는 변수를 선언하고 여기에 studentScore 함수를 호출하지만 bind 메서드를 사용한 결과를 할당합니다. 바인드할 매개변수로 studentOne 객체를 전달합니다. 마지막으로 콘솔 로그 내부에서 결과를 호출한 결과를 반환합니다.

위의 예에서 바인드가 호출되면 새로운 함수가 생성되어 결과 변수 안에 저장됩니다. 이것은 이에 대한 컨텍스트와 함께 저장됩니다. 나중에 이 기능이 실제로 실행되는 콘솔 로그 내에서 호출할 때만 가능합니다. 따라서 명확히 하자면, call() 및 apply()와 달리 bind 메서드는 즉시 실행되지 않습니다. 매개변수에 전달하는 값으로 설정된 이 값을 가진 새 함수를 반환합니다.

바인드할 매개변수 전달
바인딩에 추가 매개 변수를 전달하는 방법을 살펴봄으로써 이전 예제를 확장할 수 있습니다. studentScore 함수에 매개변수가 있으면 bind를 호출할 때 이에 대한 인수를 동시에 전달할 수 있습니다. 이에 대한 예를 살펴보겠습니다.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subject) {
  return `${this.name} scored ${this.score} in ${subject}.`
};
const result = studentScore.bind(studentOne, "Art");
console.log(result());
//Returns ---> Abby scored 80 in Art.

subject를 studentScore 함수의 매개변수로 설정하여 이전 예제를 확장합니다. 이제 bind를 호출할 때 문자열 Art를 인수로 전달합니다. 아래와 같이 결과를 호출할 때 Art 인수를 전달하여 동일한 결과를 얻을 수 있습니다.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subject) {
  return `${this.name} scored ${this.score} in ${subject}.`
};
const result = studentScore.bind(studentOne);
console.log(result("Art"));
//Returns ---> Abby scored 80 in Art.

여기서 주의해야 할 한 가지 주의 사항은 추가 인수가 무시된다는 것입니다.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subject) {
  return `${this.name} scored ${this.score} in ${subject}.`
};
const result = studentScore.bind(studentOne, "Art");
console.log(result("Maths"));
//Returns ---> Abby scored 80 in Art.

위의 예에서 bind를 호출할 때 Art를 인수로 전달합니다. 결과를 호출하면 Maths를 인수로 전달합니다. 이것은 Art를 대체하지 않고 대신 추가 인수를 추가하며 studentScore 함수는 하나의 매개변수만 사용하므로 무시됩니다. 그러나 두 개의 매개 변수가 있으면 작동합니다.

const studentOne = {
  name: "Abby",
  score: 80
};
function studentScore(subjectOne, subjectTwo) {
  return `${this.name} scored ${this.score} in ${subjectOne} & ${subjectTwo}.`
};
const result = studentScore.bind(studentOne, "Art");
console.log(result("Maths"));
//Returns ---> Abby scored 80 in Art & Maths.

이 기사를 즐겼기를 바랍니다. 댓글, 질문 또는 피드백을 자유롭게 게시하고 더 많은 콘텐츠를 보려면 저를 팔로우하세요!