함수(Function)와 메서드(Method) 차이점이 뭘까?

JavaScript에서의 함수와 메서드는 비슷해 보이지만 다른 개념이다.

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

💡 차이점 간략 정리

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

---

📌 함수와 메서드

함수와 메서드의 차이점은 호출 방식에 따라 다르다. 함수를 호출하는 객체가 있는 경우 메서드라고 말하며, 함수를 호출하는 객체가 없는 경우 함수라고 말한다.

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

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

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

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

위 예제에서 show1() 함수는 객체 obj의 프로퍼티이며, obj 객체를 통해 호출했으므로 메서드이다.

반면에 show2() 함수는 객체를 생성하지 않고 직접 호출했으므로 함수이다.

---

📌 함수를 호출하는 전역 객체

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

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

show2();
window.show2();

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

❓ 전역 객체인 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은 함수이다.

---