call(), apply() 및 바인딩() 메서드를 배우는 것은 JavaScript에서 해당 컨텍스트를 제어할 수 있게 해주기 때문에 중요합니다. 한 개체에서 다른 개체로 메서드를 빌리거나 콜백 내에서 올바른 컨텍스트를 유지하는 경우처럼 기본 동작이 예상대로 작동하지 않는 상황에서 이러한 메서드는 유연성과 제어를 제공합니다. 이를 마스터하면 보다 효율적이고 재사용 가능하며 상황 인식 기능을 작성할 수 있으며 이는 특히 복잡한 애플리케이션에 유용합니다.

call(), apply(), 바인딩() 메소드를 살펴보기 전에 'this' 키워드와 그 메커니즘을 이해해 보겠습니다.

'이것' 키워드

다음 글머리 기호를 통해 이 키워드가 언제 무엇을 가리키는지 이해해 보겠습니다.

• 객체 메소드에서 이는 객체를 나타냅니다. 객체 내에 정의된 메소드 내에서 이는 해당 메소드를 소유하는 객체를 가리킵니다.

• 일반 함수에서 이는 전역 개체를 나타냅니다. 비엄격 모드에서 함수가 전역 컨텍스트(객체의 메서드가 아닌)에서 호출되면 이는 전역 객체(브라우저의 창)를 참조합니다.

• 엄격 모드 함수에서는 이는 정의되지 않습니다. 함수가 객체의 메서드가 아니고 특정 컨텍스트(호출, 적용 또는 바인딩을 통해)에 바인딩되지 않은 경우 이는 엄격 모드에서 정의되지 않습니다.

• 이벤트 핸들러에서 이는 이벤트를 수신한 요소를 나타냅니다. 이벤트가 트리거되면 이벤트를 호출한 HTML 요소를 나타냅니다.
  

  
    Click to Remove Me!
  
  

  이 경우 onclick 이벤트를 받은 버튼 요소 자체를 의미합니다.

화살표 기능에서는 다르게 동작합니다. 화살표 함수에는 자체 this 컨텍스트가 없습니다. 대신 이는 화살표 함수가 생성될 때 주변 범위에서 어휘적으로 상속됩니다. 이는 화살표 함수 내부의 this가 해당 함수 또는 컨텍스트의 this 값을 참조한다는 것을 의미합니다.

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // Output: Hi, I'm Alice

이 경우 setTimeout 내부의 화살표 함수는 사람 객체를 가리키는 Greeting 메소드에서 이를 상속받습니다.

call() 메서드

call() 메서드를 사용하면 한 개체에서 함수나 메서드를 "빌려" 다른 개체를 첫 번째 인수로 전달하여 다른 개체와 함께 사용할 수 있습니다. 첫 번째 인수는 함수 내에서 this 값이 되고, 그 뒤에 추가 인수가 따릅니다.

call() 메서드는 새 함수를 생성하지 않습니다. 제공된 컨텍스트와 인수를 사용하여 기존 함수를 실행합니다.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

이 예에서 call()은 person1의 데이터(firstName 및 lastName)를 사용하여 person의 fullName 메서드를 실행하는 데 사용되며 추가 인수는 "Oslo" 및 "Norway"입니다.

apply() 메서드

apply() 메소드는 call() 메소드와 매우 유사합니다. 주요 차이점은 인수가 함수에 전달되는 방식에 있습니다. apply()를 사용하면 인수를 개별적으로 전달하는 것이 아니라 배열(또는 배열과 유사한 객체)로 전달합니다.

call()과 마찬가지로 apply() 메서드도 새 함수를 생성하지 않습니다. 제공된 컨텍스트(이 값) 및 인수를 사용하여 함수를 즉시 실행합니다.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
// Output: John Doe is going to Oslo, Norway.

이 예에서 apply()는 person 개체의 fullName 메서드를 호출하는 데 사용되지만 person1의 컨텍스트(this)를 사용합니다. 인수 "Oslo" 및 "Norway"가 배열로 전달됩니다.

바인딩() 메서드

JavaScript의 바인딩() 메서드를 사용하면 call() 및 Apply()와 마찬가지로 함수나 메서드에 대한 컨텍스트(이 값)를 설정할 수 있습니다. 그러나 call() 및 apply()와 달리 바인딩() 메서드는 함수를 즉시 호출하지 않습니다. 대신, 지정한 객체에 this 값이 설정된 새 함수를 반환합니다.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const func = person.fullName.bind(person1);
func("Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

이 예에서 바인딩()은 this 값이 person1로 설정된 새 함수 func를 생성합니다. 함수는 즉시 호출되지 않지만 나중에 "Oslo" 및 "Norway" 인수를 전달하여 호출할 수 있습니다.

예: 여러 컨텍스트가 있는 중앙 집중식 로거

다음은 call(), apply() 또는 바인딩()을 사용하여 효율성을 높이는 작지만 복잡한 애플리케이션 예입니다. 특히 로깅 목적으로 함수의 부분 적용을 처리할 때 더욱 그렇습니다.

작업을 수행하는 다양한 사용자에 대한 정보를 기록하는 중앙 집중식 로깅 기능이 있다고 가정해 보겠습니다. 바인딩()을 사용하면 반복적인 코드를 피하면서 이 컨텍스트를 다른 사용자에게 효율적으로 설정할 수 있습니다.

const logger = {
  logAction: function(action) {
    console.log(`${this.name} (ID: ${this.id}) performed: ${action}`);
  }
};

const user1 = { name: "Alice", id: 101 };
const user2 = { name: "Bob", id: 202 };

// Create new logger functions for different users
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// Perform actions without manually passing user context
logForUser1("login");
// Output: Alice (ID: 101) performed: login

logForUser2("purchase");
// Output: Bob (ID: 202) performed: purchase

효율적인 이유:

컨텍스트 재사용: 작업을 기록할 때마다 사용자 컨텍스트를 수동으로 전달할 필요가 없습니다. 컨텍스트(this)는 한 번 바인딩되고 로깅은 재사용 가능하고 정리됩니다.

모듈성: 더 많은 사용자나 작업을 추가해야 하는 경우 함수 자체를 변경하지 않고 이를 로거에 빠르게 바인딩하여 코드를 DRY(반복하지 마세요)로 유지할 수 있습니다.