26.1 함수의 구분

ES6 이전의 모든 함수는 일반 함수로서 호출할 수도 있고 생성자 함수로서 호출할 수도 있었다.

• 즉, 모든 함수가 callable(호출할 수 있는 함수) 이자 constructor (생성자로써의 역할을 할 수 있는 함수 였다.

// ES5
var ES5_func = function () { return 1; };

// 일반적인 함수로서 호출
ES5_func();  // 1;

// 생성자 함수로서 호출
new ES5_func();  // ES5_func {}

// 메서드로서 호출
var obj = { ES5_func: ES5_func  };
obj.ES5_func();   // 1;

또한, 객체에 바인딩 된 함수를 생성자 함수로 호출할 수도 있었으며 콜백 함수 또한 constructor 의 역할을 할 수 있기에 모든 함수들이 prototype 프로퍼티를 가지며 프로토타입 객체 또한 생성한다.

// 메서드로서 호출
var obj = { ES5_func: ES5_func  };
const Test = **new ojb.ES5_func();**  // ES5_func {};

// 콜백 함수
[1, 2, 3].map( **callback** );

<aside> 💡 참고로 아래 그림처럼 constructor 의 역할을 할 수 있는 함수 객체는 프로토타입을 객체를 쌍으로 생성한다. 즉, **생성자와 프로토타입 객체는 별도의 객체로서 서로의 참조값(prototype , constructor )**을 가지고 있다.

또한, 화살표 함수나 ES6 메서드 축약 표현으로 정의된 non-constructor 들은 prototype 프로퍼티가 존재하지 않으며 프로토타입 객체를 생성하지 않는다.

</aside>

• 즉, ES5까지의 함수는 constructor 와 non-contstructor 를 구분하지 않았기에 불필요한 프로토타입 객체를 생성하여 메모리 낭비 및 실수 유발 가능성이 존재했다.

  • 이를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 3가지로 구분했다.

  1. 일반 함수
  2. 메서드
  3. 화살표 함수
  

26.2 메서드

ES6 에서는 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.

const obj = {
	x: 1,

	// ES6 메서드 : 축약 표현으로 정의.
	RealMethod() { return this.x; },

	// ES6 메서드가 아닌 일반 함수 : 키에다가 익명 함수로 정의.
	NotMethod: function() { return this.x; },
}

ES6에서 메서드는 non-contrcutor 이며 생성자 함수로서 호출할 수 없다.

new obj.RealMethod();     // TypeError: obj.RealMethod is not a constructor.

new obj.NotMethod();      // NotMethod {}

• 또한 앞서 설명한 것처럼 메서드는 non-contrcutor 이기 때문에 prototype 프로퍼티가 존재하지 않고 프로토타입도 생성하지 않는다.