자바스크립트의 apply() 메서드는 특정 객체에 정의된 메서드를 다른 객체에서도 그대로 사용할 수 있게 해주는 강력한 기능입니다. 핵심은 this가 가리키는 객체를 원하는 대로 지정할 수 있다는 점이며, 메서드에 전달할 인수는 배열(또는 배열 유사 객체) 형태로 넘겨준다는 특징이 있습니다.
apply() 메서드의 동작 원리
apply()는 첫 번째 인수로 this에 바인딩할 객체를 받고, 두 번째 인수로 실제 함수에 전달할 값들을 담은 배열을 받습니다. 이를 통해 하나의 함수를 여러 객체에서 공유하여 재사용할 수 있어 코드 중복을 줄일 수 있습니다.
예제 코드
다음은 apply()를 사용해 성인 여부를 판별하고 운전 가능 여부를 출력하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript apply()</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript apply()</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 + "님은 성인이므로 " + country +
"에서 " + vehicle + "(을)를 운전할 수 있습니다";
} else {
sampleEle.innerHTML = this.name + "님은 미성년자이므로 " + country +
"에서 " + vehicle + "(을)를 운전할 수 없습니다";
}
}
document.querySelector(".Btn").addEventListener("click", () => {
checkAdult.apply(obj1, ["car", "INDIA"]);
});
</script>
</body>
</html>코드 설명
obj1은 이름과 나이 정보를 담고 있는 객체입니다.checkAdult함수 내부의this.age,this.name은 apply()를 통해 전달된 객체의 속성을 참조합니다.- 버튼 클릭 시
checkAdult.apply(obj1, ["car", "INDIA"])가 호출되며,this는obj1에 바인딩되고"car"와"INDIA"가 배열 형태로 인수로 전달됩니다.
실행 결과
CLICK HERE 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.
Rohan의 나이가 22세로 18세 이상이므로, "Rohan님은 성인이므로 INDIA에서 car(을)를 운전할 수 있습니다"라는 문구가 화면에 출력됩니다.
참고: apply()와 call()의 차이
apply()와 유사한 메서드로 call()이 있습니다. 둘 모두 this를 지정할 수 있다는 점은 같지만, call()은 인수를 개별적으로 나열해서 전달하는 반면, apply()는 인수를 배열로 묶어 전달한다는 차이가 있습니다. 인수를 이미 배열 형태로 가지고 있다면 apply()가 더 편리합니다.