자바스크립트 함수(Function) vs 메서드(Method)

자바스크립트를 배우다 보면 용어 때문에 혼란스러울 때가 많습니다. 특히 정의가 서로 비슷하게 들리는 개념들이 그렇죠. 함수(function)와 메서드(method)도 예외는 아닙니다.

먼저 두 가지 기본 사실부터 짚고 넘어가겠습니다.

메서드는 곧 함수입니다.
함수는 호출(call)을 통해 코드를 실행할 수 있는 존재입니다.

그렇다면 함수와 메서드의 차이는 어디에 있을까요? 핵심은 바로 사용되는 방식에 있습니다.

일반 함수(Normal Function)란?

일반 함수는 독립적으로 존재하며, 함수 호출을 통해 실행됩니다.

일반 함수 예시:

function alertMessage() {
  alert("Alert message triggered!")
}

// alertMessage 함수 호출
alertMessage()

위 예시처럼 일반 함수는 어떤 객체에도 속하지 않은 채 자체적으로 정의되며, 필요할 때 함수 이름만으로 직접 호출할 수 있습니다.

메서드(Method)란?

메서드는 객체의 속성(property)에 할당된 함수를 말합니다. 다르게 표현하면, 메서드란 객체의 속성으로 존재하는 함수입니다.

메서드 예시:

const blackFridayDeals = {
  sony: 'Playstation 5',
  discountPopup: function () {
    alert(`Get 50% off ${this.sony} only today!`)
  },
}

blackFridayDeals.discountPopup()

위 코드 예시에는 blackFridayDeals라는 이름의 객체가 있습니다.

blackFridayDeals 객체의 속성 중 하나가 바로 discountPopup입니다.

discountPopup에는 함수가 할당되어 있으며, 이 함수가 실행되면 alert() 대화상자(자바스크립트에 내장된 메서드)가 화면에 표시됩니다.

메서드는 객체 이름 뒤에 점(.)을 붙여 호출한다는 점에서 일반 함수와 구별됩니다. 또한 메서드 내부에서는 this 키워드를 사용해 해당 객체의 다른 속성에 접근할 수 있습니다. 위 예시에서 this.sony가 그 역할을 합니다.

핵심 정리

모든 메서드는 함수이지만, 모든 함수가 메서드인 것은 아닙니다.
함수: 독립적으로 정의되고 호출되는 코드 블록입니다.
메서드: 객체의 속성으로 할당된 함수로, '객체명.메서드명()' 형태로 호출합니다.

자바스크립트 함수(Function) vs 메서드(Method) — 차이점 완벽 정리

일반 함수(Normal Function)란?

메서드(Method)란?

핵심 정리