[JavaScript]함수와 메서드(Function and Method)

C#, Java와 같은 객체 지향 프로그래밍(OOP;Object-oriented programming) 언어를 사용하다가 JavaScript를 사용하면 함수(Function)와 메서드(Method)에 대해 혼동될 수 있습니다.

JavaScript에서 함수와 메서드는 비슷해 보이지만 다른 개념입니다. 함수와 메서드의 차이를 알고 있다고 코드를 작성하는 실력이 향상되지는 않지만, 모르면 곤란한 상황이 발생할 수 있습니다.

따라서, 이번 포스팅에서는 JavaScript에서 함수와 메서드의 차이를 알아봅시다.

---

함수와 메서드

함수와 메서드의 차이점은 호출 방식에 따라 다릅니다.

함수를 호출하는 객체가 있는 경우 메서드라고 말하며, 함수를 호출하는 객체가 없는 경우 함수라고 말합니다.

다음 예제를 통해 알아봅시다.

let obj = {
  show1: function() {
    console.log('show1() 메서드 호출');
  }
}

function show2() {
  console.log('show2() 함수 호출');
}

obj.show1(); // 메서드
show2();     // 함수

위 예제에서 show1() 함수는 객체 obj의 프로퍼티이며, obj 객체를 통해 호출했으므로 메서드입니다. 반면에 show2() 함수는 객체를 생성하지 않고 직접 호출했으므로 함수입니다.

---

함수를 호출하는 전역 객체

위 예제에서 show2() 함수는 객체 없이 호출되는 것처럼 보이지만, 사실 show2() 함수를 호출하는 객체가 존재합니다. 전역 범위에서 함수가 선언되는 경우 전역 객체인 window의 프로퍼티가 됩니다.

따라서, show2() 함수를 전역 범위에서 선언하는 경우 다음 예제처럼 window 객체로 호출할 수 있습니다.

function show2() {
  console.log('show2() 함수 호출');
};

show2();
window.show2();

[실행 결과]

Chrome 개발자 도구의 콘솔 탭에서 위 예제를 실행한 결과입니다. 위 예제를 보고 아래와 같은 생각을 할 수 있습니다.

전역 객체인 window 객체로 show2() 함수를 호출했으므로 show2() 함수는 메서드가 아닌가요?

JavaScript에서 메서드라는 개념은 사용자가 정의한 객체의 프로퍼티가 함수인 경우입니다. 따라서 show2() 함수는 메서드가 아니라 함수입니다.

---

메서드를 변수에 할당

JavaScript에서 함수는 변수에 할당할 수 있으므로 함수를 변수처럼 사용할 수 있습니다. 즉, 메서드도 변수에 할당할 수 있다는 의미입니다.

다음 예제는 obj 객체의 메서드를 변수에 할당합니다.

let obj = {
  show1: function() {
    console.log('show1() 메서드 호출');
  }
}

obj.show1(); // 메서드

let funcCall = obj.show1;
funcCall();  // 함수

[실행 결과]

변수 funcCall에 obj 객체의 show1() 메서드를 할당하였습니다. 따라서, funcCall은 함수처럼 사용할 수 있습니다.

funcCall에 메서드를 할당했지만, funcCall을 호출하는 객체가 존재하지 않으므로 funcCall은 함수입니다.

---

함수와 메서드의 차이점 정리

함수(Function)	메서드(Method)
함수는 특정 작업을 수행하기 위해 설계된 기능입니다.	메서드는 객체의 프로퍼티가 함수인 경우입니다.
함수는 직접 호출할 수 있습니다.	메서드는 점 표기법 또는 대괄호 표기법을 사용하여 호출할 수 있습니다.
재사용 가능합니다.	함수에 비해 재사용하기 어렵습니다.
함수는 자체적으로 존재합니다.	메서드는 객체와 연결되어 있습니다.