JavaScript의 call() 메서드는 서로 다른 객체에서 동일한 함수를 재사용할 수 있도록 도와주는 유용한 기능입니다. call()을 호출할 때 첫 번째 인수는 함수 내부에서 this로 바인딩되는 객체가 되며, 두 번째 인수부터는 쉼표로 구분하여 개별적으로 전달됩니다.
call() 메서드의 기본 문법
func.call(thisArg, arg1, arg2, ...)- thisArg : 함수 내부에서 this로 사용될 객체
- arg1, arg2, ... : 함수에 전달할 인수 목록 (쉼표로 구분하여 나열)
참고로 비슷한 역할을 하는 apply() 메서드는 인수를 배열 하나로 묶어 전달한다는 점에서 call()과 차이가 있습니다. 인수가 이미 배열 형태로 준비되어 있다면 apply()가, 그렇지 않다면 call()이 더 적합합니다.
예제 코드
다음은 call() 메서드에 인수를 전달하는 전체 예제 코드입니다. 버튼을 클릭하면 obj1 객체를 this로 지정한 상태에서 checkAdult() 함수가 호출되며, '자동차'와 '대한민국'이라는 두 개의 인수가 함께 전달됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript call() 메서드 예제</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript call()</h1>
<div class="sample"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 성인 여부와 운전 가능 여부를 확인할 수 있습니다</h3>
<script>
let sampleEle = document.querySelector(".sample");
let obj1 = { name: "민수", age: 22 };
function checkAdult(vehicle, country) {
if (this.age > 18) {
sampleEle.innerHTML = this.name + "님은 성인이므로 " + country + "에서 " + vehicle + "을 운전할 수 있습니다.";
}
else {
sampleEle.innerHTML = this.name + "님은 미성년자이므로 " + country + "에서 " + vehicle + "을 운전할 수 없습니다.";
}
}
document.querySelector(".Btn").addEventListener("click", () => {
checkAdult.call(obj1, '자동차', '대한민국');
});
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.
'클릭하세요' 버튼을 클릭하면 call() 메서드가 실행되어 다음과 같은 결과가 화면에 표시됩니다.
obj1 객체의 age 값이 22로 18보다 크기 때문에, checkAdult() 함수는 this.name(즉 '민수')과 함께 전달된 인수 '자동차', '대한민국'을 조합하여 성인 판정 메시지를 출력합니다. 이처럼 call() 메서드를 활용하면 하나의 함수를 여러 객체에서 손쉽게 재사용할 수 있습니다.