자바스크립트의 call() 함수는 서로 다른 객체에서 동일한 메서드를 재사용할 수 있게 해주는 강력한 기능입니다. call()을 사용하면 특정 객체를 this로 바인딩하여 함수를 호출할 수 있으며, 인수는 쉼표로 구분하여 개별적으로 전달합니다.
call() 함수란?
모든 자바스크립트 함수는 Function 객체의 기본 메서드인 call()을 가지고 있습니다. 이 메서드는 첫 번째 인수로 전달된 객체를 해당 함수 내부의 this 값으로 설정하고, 나머지 인수들을 함수의 매개변수로 순서대로 전달합니다. 이를 통해 한 번 작성한 함수를 여러 객체에 걸쳐 유연하게 활용할 수 있습니다.
예제 코드
다음은 자바스크립트 call() 함수의 동작을 보여주는 예제 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<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;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript call()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 성인 여부를 확인할 수 있습니다
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let obj1 = { name: "Rohan", age: 22 };
function checkAdult(vehicle, country) {
if (this.age > 18) {
sampleEle.innerHTML = this.name + " you are an adult and can drive " + vehicle +
" in " + country;
} else
sampleEle.innerHTML = this.name + " you are an adult and cannot drive " + vehicle +
" in " + country;
}
document.querySelector(".Btn").addEventListener("click", () => {
checkAdult.call(obj1, 'car', 'INDIA');
});
</script>
</body>
</html>
코드 설명
obj1 객체에는 이름과 나이 정보가 담겨 있습니다. checkAdult 함수는 this.age와 this.name을 참조하는데, 이때 checkAdult.call(obj1, 'car', 'INDIA')처럼 call()을 호출하면 this가 obj1을 가리키게 됩니다. 즉, 함수가 직접 obj1에 정의되어 있지 않아도 obj1의 속성 값을 사용해 실행됩니다.
- 첫 번째 인수(obj1): 함수 내부에서
this로 사용될 객체 - 두 번째 인수('car'): 매개변수 vehicle에 전달되는 값
- 세 번째 인수('INDIA'): 매개변수 country에 전달되는 값
실행 결과
페이지를 열면 아래와 같은 초기 화면이 표시됩니다.
그리고 "CLICK HERE" 버튼을 클릭하면 call() 함수가 실행되어 다음과 같은 결과가 출력됩니다.
Rohan의 나이가 22세로 18세보다 많기 때문에, "Rohan you are an adult and can drive car in INDIA"라는 문구가 화면에 표시됩니다. 만약 나이가 18세 이하였다면 운전할 수 없다는 메시지가 출력되었을 것입니다.
마무리
call() 함수는 객체 간 코드 재사용성을 높여주는 핵심 도구입니다. apply()와 유사하지만 apply()는 인수를 배열로 전달한다는 점이 다르며, 최신 자바스크립트에서는 bind(), 스프레드 연산자 등과 함께 활용하면 더욱 유연한 코드를 작성할 수 있습니다.