[JS] 함수와 메서드 차이

간단히 요약하자면

 

함수는 특정 작업을 수행하기 위해 설계된 기능이라면, 메소드는 객체의 프로퍼티가 함수인 경우입니다.

독립적으로 존재하면 함수, 객체의 내부에 종속되면 메소드입니다.

 

 

---

1. 호출방식의 차이

let obj = {

  method1: function () {

    console.log("method1() 메서드 호출");

  },

};

function func1() {

  console.log("func1() 함수 호출");

}

obj.method1(); // 메서드

func1(); // 함수

[ 실행 결과 ]

method1 함수는 obj의 프러퍼티로 obj 객체롤 통해 함수를 호출했으므로, method입니다.

func1함수는 객체를 통해 함수를 호출하지 않았기 때문에 function입니다.

 

2. 사용자가 정의한 객체 vs 전역객체

그렇다면 함수는 어떻게 호출 되는 것일까??

사실 함수도 객체가 있다. 전역범위에서 함수가 선언되면 함수는 전역 객체의 프로퍼티가 된다.

 

예를 들어 개발자 도구에서 전역범위에서 함수를 선언 후 window를 호출하면 프로퍼티로 func1이 있는 것을 확인할 수 있다.

그렇다면 JS에서 객체에는 어떤 것이 있는지 궁금해졌다.

 

ECMA Script 에서 객체는 크게 3가지로 구분하고 있다.

 

 

Built-in Object(내장객체)

Built-in Object 에는 Global, Object, String, Number, Boolean, Date, Array, Math, RegExp, Error 등 많은 내장객체들이 있다. 이들은 자바스크립트 엔진이 구동되는 시점에서 바로 제공되며 자바스크립트코드 어디에서든 사용이 가능하다.

 

Native Object(브라우저 내장 객체)

Native Object 역시 자바스크립트가 구동되는 시점에서 바로 사용이 가능한 객체들이다. 하지만 이들은 자바스크립트 엔진이 구성하는 기본객체라고 하기 보단 브라우져 즉 자바스크립트 엔진을 구동하는 녀석들에서 빌드되는 객체들이다. 자바스크립트 프로그램을 작성하면서 사용하는 브라우져객체모델(BOM)과 문서객체모델(DOM)들이 이에 속한다. 

하지만 이들을 굳이 Native Object 라 분류한 이유는 브라우져마다 이 Native Object 를 사용함에 있어서 그 구성을 달리하는 경우가 있기 때문이다.

 

Host Object(사용자 정의 객체)는 사용자가 생성한 객체를 말한다. constructor 혹은 객체리터럴을 통해 사용자가 객체를 정의하고 확장시킨 것들이기 때문에 Built-in Object 와 Native Object가 구성된 이후에 구성된다.

 

 

3. 그럼 메서드도 함수가 될 수 있는가?

JS에서는 함수는 변수에 할당할 수 있다. 그러므로 메서드도 변수에 할당하여 함수처럼 사용 가능하다.

 

let obj = {

  method1: function () {

    console.log("method1() 메서드 호출");

  },

};

obj.method1(); // 메서드

let makeFunc = obj.method1;

makeFunc();

[ 실행 결과 ]

 

참고 

https://developer-talk.tistory.com/534

https://velog.io/@canonmj/%ED%95%A8%EC%88%98%EC%99%80-%EB%A9%94%EC%84%9C%EB%93%9C%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-object-%EC%8B%AC%ED%99%94%EC%9D%B4%ED%95%B4

https://poiemaweb.com/js-object