LHJ

I'm a FE developer.

10-5. Object 오브젝트(ES3 기준) / 함수와 메소드 연결, 함수, 메소드 호출

30 Nov 2020 » js_beginner

10-5. Object 오브젝트(ES3 기준) / 함수와 메소드 연결, 함수, 메소드 호출

함수와 메소드 연결

  • 함수

    • 오브젝트에 연결
    • Object.create()

  • 메소드

    • 오브젝트의 prototype에 연결
    • Object.prototype.toString()

15.2.3.4 Object.create(O [, Properties])
The **create
function creates a new object with a specified prototype.

15.2.4.2 Object.prototype.toString()
When the toString method is called, the following steps are taken:

위는 ES5 스펙에 작성되어있는 형태입니다. Object.create()create function이라고 작성되어 있고 Object.prototype.toString()toString method라고 작성되어 있습니다.
ES5는 이러한 기준으로 function과 method를 사용하고 있습니다.

반면 ES6에서는 Static method라는 것이 또 나왔습니다.
그래서 함수 / 메소드 / 스태틱 메소드 형태로 구분됩니다.
하지만 ES5에서는 함수 / 메소드로 구분합니다.

그러면 이렇게 함수와 메소드를 구분해야되는 이유는 무엇인가요?
지금부터 그 이유에 대해 살펴보겠습니다.

함수, 메소드 호출

  • 함수 호출 방법

    • Object.create();
      함수를 호출하는 형태
      오브젝트.함수이름() 소괄호 형태
      console.log(Object.create); // function create() { [native code] }
      console.log(Object.prototype.create); // undefined
    
    1. Object에 create가 존재하므로 함수 출력
    2. Object.prototype에 create가 존재하지 않으므로 undefined 출력

    Object.create <- create 함수가 있으면 해당 함수가 출력됩니다.
    없으면 undefined가 출력됩니다.

    위 결과를 보면 출력되었으므로 create가 Object에 존재하는 것을 알 수 있습니다.

    하지만 Object.prototype엔 존재하지 않는 것을 알 수 있습니다. (undefined)


  • 메소드 호출 방법

    • Object.prototype.toString();
    • 또는 인스턴스를 생성하여 호출
      console.log(Object.prototype.toString); // function toString(){ [native code] }
        
      var obj = {};
      console.log(obj.toString); // function toString(){ [native code] }
    
    1. Object.prototype에 toString이 존재하므로 함수 출력
    2. 인스턴스를 사용하여 메소드를 호출할 때는 prototype을 작성하지 않습니다.
    3. prototype에 연결된 메소드로 인스턴스를 생성하기 때문입니다.

    toString 함수는 위와 같이 두 가지 방법으로 호출할 수 있습니다.

    1. Object.prototype
    2. 인스턴스

  • 함수와 메소드를 구분해야 하는 이유

    • JS 코드 작성 방법이 다르기 때문
    • 함수는 파라미터에 값을 작성하고 메소드는 메소드 앞에 값을 작성

그런데 함수와 메소드를 구분해야되는 또 다른 이유가 있습니다.
물론 지금까지 봐왔듯이 자바스크립트 코드 작성방법이 다르기도 합니다만,
또 하나는 함수는 파라미터에 값을 작성하고, 메소드는 앞에 값을 작성합니다.

console.log(String.fromCharCode(49, 65)); // 1A
  1. 함수 앞에 배열로 값을 작성하면 Array 오브젝트의 함수가 호출되므로
  2. String 오브젝트의 함수를 호출하면서 파라미터에 값을 작성해야 합니다.

fromCharCode는 String 오브젝트에서 다뤘던 함수입니다.
파라미터들을 함수 앞에 작성 못했던 것은 배열로 작성해야됐기 때문입니다.

함수 앞에 배열로 작성하면 자바스크립트는 함수 앞에 작성된 데이터 타입에 따라 빌트인 오브젝트 인스턴스를 만들고 거기에 있는 메소드를 호출하게 됩니다.

그렇게되면 왼쪽은 String이 아니라 Array가 되어버립니다.
그럼 Array에는 fromCharCode가 없겠죠?
따라서 Error가 나게 됩니다.

그래서 파라미터에 다수를 작성해 함수로 호출했던 것입니다.
그리고 함수 앞에는 빌트인 String 오브젝트를 작성했던 것입니다.

  • 함수는 함수 앞에 빌트인 오브젝트를 작성하고
  • 메소드는 Object.prototype.method로 호출할 수도 있고
  • 인스턴스를 생성해서 호출할 수도 있고
  • 그리고 지금까지 우리가 했던 함수 앞에 데이터를 작성할 수 있습니다.
  • 그래서 데이터 타입에 따라서 자바스크립트 엔진이 인스턴스를 만들어서 거기에 있는 메서드를 호출하게 한 것입니다.

지금까지의 강좌에서는 함수와 메소드를 구분하지 않았습니다.
그러나 지금부턴 함수와 메소드를 구분하도록 하겠습니다.
함수와 메소드를 구분하는 기준은 prototype입니다.
prototype이 연결되어있으면 그것은 메소드이고,
prototype이 연결안되고 바로 Object.create() 처럼 오브젝트에 연결되어있으면 그것은 함수입니다.

그리고 함수는 함수 앞에 데이터를 작성할 수 없고 파라미터에 데이터를 작성해야 됩니다.
하지만 메소드는 메소드 앞에 데이터를 작성할 수 있습니다.

메소드와 메서드

  • 메서드(method)
  • 국립국어원 표준국어대사전

    • 메소드는 검색되고 메서드는 검색되지 않음
    • 프로그램과 관련지어 설명하고 있음
    • 강좌에서는 메소드로 표기

메소드와 메서드.
개발자들 사이에서 많이 회자되는 것입니다.
강좌에서 기준을 정해야될 것 같아서 조사를 해봤습니다.