[Javascript 이론] 일반함수, ES6 메서드 함수, 화살표함수 비교

문제

함수 사용목적에 따른 명확한 구분이 없음

 

해결

ES6에서 함수 사용 목적에 따라 세가지 종류도 구분

 

 

사진

 

1. 일반함수

 

2. 메서드

- 일반적으로는 메서드는 객체에 바인딩된 함수를 일컫는 의미

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

- super, argument만 갖음

 

const test = {
	test : function () {} //일반함수
}

const test = {
	test() {} //메서드 축약 표현
}

 

 

- 메서드는 호출객체를 참조해야하니까 화살표함수로 정의하지 말고 ES6 메서드를 사용할 것.

- 클래스 필드에 할당할 때에도 메서드 사용.

 

 

 

3. 화살표함수

- 콜백함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안

 

일반함수와의 비교

 

- 일반함수: this 바인딩을 가지며 호출 시에 바인딩이 동적으로 결정됨

- 화살표함수: this 바인딩을 갖지 않으며 정의 시에 바인딩이 정적으로 결정됨.

                  따라서 상위스코프의 this를 그대로 참조하며 이를 lexical this라고 함.

- call, apply, bind 메서드를 호출하면 함수 자체의 this를 갖지 않기 때문에 화살표함수 내부의 this를 변경하지 않고 상위스코프의 this 바인딩을 참조함.

 

 

프로퍼티 동적 추가

 

function Person(name) {
    this.name = name;
}

//프로퍼티 동적추가 시 일반함수 사용
Person.prototype.sayHi = function () { console.log(`Hi ${this.name}`); };


//프로퍼티 동적추가 시 ES6 축약메서드 사용
Person.prototype = {
    constructor: Person,
    sayHi() { console.log(`Hi ${this.name}`); }
}


const person = new Person('Lee');
person.sayHi();

 

- 프로퍼티를 동적으로 추가하고 싶을 때에는 일반함수를 사용.

만약, ES6 메서드를 동적으로 추가하고 싶다면 constructor 프로퍼티와 생성자함수를 연결을 재설정해줘야함.

 

 

argument

화살표함수에서는 자신에게 전달된 인수목록은 확인할 수 없고 상위함수의 인수목록을 참조하기 때문에 argument대신 Rest 파라미터를 사용.