JavaScript에서 call()과 apply()로 함수 호출하기
JavaScript에는 함수를 호출할 때 this 값을 명시적으로 지정할 수 있는 두 가지 강력한 메서드가 있습니다. 바로 call()과 apply()입니다.
두 메서드의 핵심 차이점은 인수를 전달하는 방식에 있습니다.
- call() – 인수를 개별적으로(쉼표로 구분하여) 전달합니다.
- apply() – 인수를 배열 하나로 묶어서 전달합니다.
아래 예제 코드는 call()과 apply()를 사용해 함수를 호출하는 방법을 보여줍니다.
예제 코드
<!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 {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Invoking functions with call() and apply()</h1>
<div class="result"></div>
<br />
<button class="Btn">Click Here</button>
<h3>Click on the above buttons to invoke functions with call() and apply()
method</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
function addNum(num1, num2, num3, num4) {
return num1 + num2 + num3 + num4;
}
function multiplyNum(num1, num2, num3, num4) {
return num1 * num2 * num3 * num4;
}
let arr = [22, 33, 44, 55];
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "Sum of the numbers = " + addNum.call(this, 22, 33, 44, 55) + "<br>";
resEle.innerHTML +="Multiplication of the array elements = " +multiplyNum.apply(this, arr) +"<br>";
});
</script>
</body>
</html>코드 설명
위 코드의 동작 방식을 살펴보겠습니다.
addNum()함수는 네 개의 숫자를 받아 그 합을 반환합니다. 버튼을 클릭하면addNum.call(this, 22, 33, 44, 55)처럼 call()을 사용해 인수를 개별적으로 전달하며 함수를 호출합니다.multiplyNum()함수는 네 개의 숫자를 받아 그 곱을 반환합니다. 이때 미리 만들어 둔 배열arr = [22, 33, 44, 55]를multiplyNum.apply(this, arr)처럼 apply()에 전달해 함수를 호출합니다.- 결과는
.result클래스를 가진 div 요소에 표시됩니다.
실행 결과
페이지가 로드되면 다음과 같은 초기 화면이 나타납니다.
'Click Here' 버튼을 클릭하면 아래와 같이 계산 결과가 화면에 출력됩니다.
- 숫자들의 합(Sum of the numbers): 154 (22 + 33 + 44 + 55)
- 배열 요소들의 곱(Multiplication of the array elements): 1758960 (22 × 33 × 44 × 55)
정리
call()과 apply()는 모두 함수를 즉시 실행하면서 this 컨텍스트를 지정할 수 있다는 점에서 동일하지만, 인수 전달 방식만 다릅니다. 이미 배열 형태로 인수를 가지고 있다면 apply()가 편리하고, 인수를 하나씩 나열하고 싶다면 call()을 사용하는 것이 좋습니다. 참고로 ES6부터는 전개 연산자(spread operator)와 함께 call()을 사용해 apply()와 같은 효과를 낼 수도 있습니다.