자바스크립트에서 함수 호출과 메서드 호출 방법 완벽 정리

함수 호출(Function Invocation)과 메서드 호출(Method Invocation)이란?

자바스크립트에서 함수를 실행하는 방식은 크게 두 가지로 나눌 수 있습니다.

함수 호출은 add(2, 3)처럼 함수 이름을 직접 사용하여 호출하는 방식입니다. 이 경우 함수 내부의 this는 전역 객체(window)를 가리키거나 엄격 모드에서는 undefined가 됩니다.

메서드 호출은 obj.welcome()처럼 객체의 속성으로 정의된 함수를 호출하는 방식입니다. 이 경우 this는 해당 메서드를 소유한 객체를 가리키기 때문에 객체 내부의 다른 속성에 자유롭게 접근할 수 있습니다.

아래 예제 코드를 통해 두 가지 호출 방식의 차이를 확인해 보겠습니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>함수 및 메서드 호출</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>함수로서의 호출과 메서드로서의 호출</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 함수 호출과 메서드 호출 결과를 확인할 수 있습니다.
</h3>
<script>
    let resEle = document.querySelector(".result");
    function add(a,b){
        return a+b;
    }
    let obj = {
        firstName:'Rohan',
        lastName:'Sharma',
        welcome(){
            return 'Welcome '+this.firstName+' '+this.lastName;
        }
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML = '함수 호출 add(2,3) : ' + add(2,3) + '<br>';
        resEle.innerHTML += '메서드 호출 obj.welcome() : ' + obj.welcome() + '<br>';
    });
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

자바스크립트에서 함수 호출과 메서드 호출 방법 완벽 정리

'클릭하세요' 버튼을 누르면 아래와 같이 두 가지 호출 방식의 결과가 표시됩니다.

자바스크립트에서 함수 호출과 메서드 호출 방법 완벽 정리

코드 설명

add(2, 3): 독립적인 함수를 직접 호출하는 함수 호출 방식으로, 두 숫자를 더한 값인 5가 반환됩니다.
obj.welcome(): 객체 obj에 정의된 메서드 호출 방식으로, this가 obj를 가리키므로 this.firstName과 this.lastName에 접근하여 'Welcome Rohan Sharma'라는 문자열이 반환됩니다.

이처럼 같은 함수라도 어떻게 호출하느냐에 따라 this 바인딩이 달라지며, 이것이 자바스크립트에서 함수 호출과 메서드 호출의 가장 중요한 차이점입니다.