[JS] 메소드와 함수

[스포]

* 메소드와 함수의 차이는 정의의 차이다.

* 화살표 함수, 일반 함수 모두 객체 안에 정의 되면 메소드가 맞다.

* 화살표 함수는 고유한 this가 없어, this는 객체 외부 함수로 지정된다.

[정의]

* function (함수)는 그 자체로도 기능을 한다.

  - 함수는 매소드를 포함한 더 포괄적인 개념이다.

  - fucntion(); 으로 호출 할 수 있다.

 

* method (메소드)는 객체 안에 존재 하며, 객체안에서 작동 한다.

  -  메소드는 클래스 안에 있는 data를 조작할 수 있다.

  -  object.method(); 로 호출 할 수 있다.

  function func() {
    return "Call me function!";
  }

  var obj = {
    method() {
      return "Call me Method!";
    }
  }

의문의 시작

  var RyuK = {
    age: 27,

    arrow: () => {
        console.log(this.age) // undefined
    },

    normal: function() {
        console.log(this.age) // 27
    }
  }

이전 화살표 함수를 공부하면서 사용한 예제이다.
객체(object)의 this는 내부의 함수를 포함한 객체 자체에 바인딩 된다. 라는 이유 때문에 화살표 함수에는 this가 바인딩 되지 않아, undefined가 출력되는 모습이다.

하지만, 위의 화살표 함수는 함수라는 정의 보다는 메소드의 정의에 더 가깝다고 생각한다.
그렇다면, 왜 객체안에 존재하는 화살표함수는 메소드가 아니였을까? 왜 바인딩 될 수 없었을 까?

# function과 Arrow function

Javascript의 객체는 프로퍼티를 할당 받게 되고, 그 곳에 함수를 할당 하고 객체가 행동 할 수 있는 능력을 부여한다.

  var RyuK = {
    age: 27
  };

  RyuK.talk = function() {
    console.log("삐빅삐비비빅", this.age);
  };

  RyuK.talk(); // ~~~27

*  RyuK라는 객체 프로퍼티에 talk 라는 함수를 추가 했다.

* Javascript function은 자신만의 this를 사용할 수 있다.

* Jacascript Arrow function은 자신만의 고유한 this를 사용할 수 없다. 그렇게 this를 참조하면, 화살표 함수가 아닌 외부 함수에서 this를 가지고 온다. 즉, 위 예제에서는 객체 밖의 this.age 를 가지고 오는 것이다.

* 대부분의 메소드는 객체 프로퍼티의 값을 사용한다. 그렇게 메소드의 this는 객체를 this 참조할 수 있다.

결론

* 객체(object)의 this는 내부의 함수를 포함한 객체 자체에 바인딩 된다.

* 화살표 함수도 내부의 함수 즉, 메소드이다. 하지만, 화살표 함수는 자체 고유한 this를 갖지 않기 때문에 this.~~ === undefined로 출력되는 것이였다.

* 내가 계속 혼란이 오는 것은 ES6 부터 생겨난 class 형태 때문인 것 같다. class 내부 함수를 화살표 함수로 정의 하면, class의 변수를 this로 접근 할 수 있다. 이 문제는 차차 살펴 보자.