JavaScript에서 메서드 차용하기: call(), apply(), bind() 활용법

JavaScript의 메서드 차용(Method Borrowing)이란?

JavaScript에서 메서드 차용은 한 객체에 정의된 메서드를 다른 객체에서 빌려와 재사용하는 강력한 기법입니다. 이를 가능하게 해주는 핵심 메서드가 바로 call(), apply(), 그리고 bind()입니다.

이 세 가지 메서드는 모두 함수 내부의 this 값을 명시적으로 지정할 수 있도록 해주기 때문에, 원래 해당 객체에 속해 있지 않은 메서드도 마치 자신의 것처럼 호출할 수 있습니다.

call(), apply(), bind()의 차이점

call() — 인수를 개별적으로 나열하여 전달하며, 함수를 즉시 실행합니다.
apply() — 인수를 배열 하나로 묶어 전달하며, 함수를 즉시 실행합니다.
bind() — 함수를 즉시 실행하지 않고, this가 지정된 상태로 고정된 새로운 함수를 반환합니다.

메서드 차용 예제 코드

다음은 JavaScript에서 메서드를 차용하는 방법을 보여주는 코드입니다 −

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,.sample {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
   .result {
      color: red;
   }
</style>
</head>
<body>
<h1>Borrowing a method in JavaScript</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to borrow the welcome method of object obj</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let resultEle = document.querySelector(".result");
   let obj = {
      firstName: "Rohan",
      lastName: "Sharma",
      welcome() {
         return "Welcome " + this.firstName + " " + this.lastName;
      },
   };
   let obj1 = {
      firstName: "John",
      lastName: "Shaw",
   };
   sampleEle.innerHTML = "obj.welcome() = " + obj.welcome();
   document.querySelector(".Btn").addEventListener("click", () => {
      resultEle.innerHTML = "obj1.welcome() = " + obj.welcome.call(obj1);
   });
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다 −

JavaScript에서 메서드 차용하기: call(), apply(), bind() 활용법

'CLICK HERE' 버튼을 클릭하면 −

JavaScript에서 메서드 차용하기: call(), apply(), bind() 활용법

코드 동작 원리

예제 코드의 핵심 흐름은 다음과 같습니다.

객체 obj는 firstName, lastName 속성과 함께 인사말을 반환하는 welcome() 메서드를 가지고 있습니다. 이 메서드는 this.firstName과 this.lastName을 참조합니다.
객체 obj1은 이름 정보만 가질 뿐 welcome() 메서드는 없습니다.
obj.welcome.call(obj1)을 호출하면, call()이 welcome() 메서드 내부의 this를 obj1로 설정합니다. 결과적으로 obj의 메서드가 obj1의 데이터를 사용하여 "Welcome John Shaw"라는 문자열을 반환하게 됩니다.

마무리

이처럼 call(), apply(), bind()를 활용한 메서드 차용은 코드 중복을 줄이고 객체 간 기능을 유연하게 공유할 수 있게 해주는 JavaScript의 대표적인 패턴입니다. 특히 유사 배열(array-like) 객체에 배열 메서드를 적용하거나, 상속 없이 기능을 재사용할 때 매우 유용하게 활용됩니다.