자바스크립트 call()과 apply() 메서드의 차이점 완벽 정리

자바스크립트(JavaScript)에서 .call()과 .apply()는 모든 함수 객체에 기본으로 내장된 메서드입니다. 두 메서드는 함수를 호출할 때 this가 참조할 객체를 직접 지정할 수 있다는 공통점이 있지만, 인수를 전달하는 방식에서 결정적인 차이가 있습니다.

.call() 메서드란?

.call() 메서드는 첫 번째 인수로 객체를 받고, 그 뒤에 오는 인수들은 쉼표로 구분하여 개별적으로 전달합니다. 즉, 전달할 인수가 여러 개일 때 각각 나열하는 형태로 사용됩니다.

기본 문법은 다음과 같습니다:

.call(object, "argument1", "argument2");

.apply() 메서드란?

.apply() 메서드는 인수를 배열 형태로 전달하고 싶을 때 사용합니다. 두 번째 인수로 반드시 배열을 요구하며, 배열에 담긴 값들이 함수의 인수로 순서대로 전달됩니다. 인수의 개수가 동적이거나 이미 배열로 존재하는 경우에 특히 유용합니다.

기본 문법은 다음과 같습니다:

.apply(object, ["argument1", "argument2"]);

핵심 차이점 한눈에 보기

.call(): 인수를 개별적으로 나열하여 전달
.apply(): 인수를 배열 하나로 묶어서 전달
두 메서드 모두 첫 번째 인수로 this로 지정할 객체를 받음

예제 코드

아래 예제를 통해 두 메서드의 실제 사용법을 비교해 보겠습니다:

<!DOCTYPE html>
<html>
    <head>
        <body>
            <script>
                var p = {
                    q: "Hello"
                }
                function showResult(v) {
                    document.write(this.q + " " + v);
                }
                showResult.call(p, "Amit"); // 인수를 개별적으로 전달
                showResult.apply(p, ["World"]); // 두 번째 인수로 배열 전달
            </script>
        </body>
    </head>
</html>

위 예제에서 .call()은 문자열 "Amit"를 직접 전달하고, .apply()는 문자열 "World"를 배열 ["World"]에 담아 전달합니다. 결과적으로 두 경우 모두 객체 p가 this로 바인딩되어 동일하게 동작하지만, 인수 전달 방식만 다르다는 점이 핵심입니다.