자바스크립트 ES6 함수의 추가기능 살펴보기

 

1. 함수의 구분

자바스크립트 ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있었다. ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론이고 생성자 함수로서 호출도 가능했다. 즉, ES6 이전의 모든 함수는 callable이면서 constructor인 것이다. 이는 혼란을 줄 수 있고 에러를 발생시킬 가능성도 있기 때문에 성능 측면에서 좋지 않은 영향을 끼친다고 하는데 그래서 ES6에서부터는 함수를 사용 목적에 따라 일반함수, 메서드, 화살표 함수로 명확히 구분했다.

 

ES6 함수의 구분	constructor	prototype	super	arguments
일반 함수	O	O	X	O
메서드	X	X	O	O
화살표 함수	X	X	X	X

 

* callable : 호출할 수 있는 함수 객체

* constructor : 인스턴스를 생성할 수 있는 함수 객체

* non-constructor : 인스턴스를 생성할 수 는 함수 객체

 

 

2. 메서드

ES6 이전에는 메서드에 대한 명확한 정의가 없었으나, ES6 부터는 메서드에 대한 정의가 명확하게 규정되었다. ES6에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다. ES6 사양에서 정의한 메서드는 non-constructor이기에 생성자 함수로서 호출할 수도 없고, 인스턴스 생성도 할 수 없어 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.

 

const obj = {
  x: 1,
  // foo는 메서드다.
  foo() {
    return this.x
  },
  // bar에 바인딩된 함수는 메서드가 아닌 일반 함수다.
  bar: function () {
    return this.x
  },
}

console.log(obj.foo())
console.log(obj.bar())

 

 

3. 화살표 함수

화살표 함수는 function 대신 화살표( => )를 사용하여 기존의 함수 정의 방식보다 간략하게 정의할 수 있다. 화살표 함수는 함수 표현식으로 정의해야한다.

* 매개변수 선언

1. 매개변수가 여러개인 경우 소괄호 () 안에 매개변수를 선언한다.

const hello = (x, y) => { console.log(x, y) };

 

2. 매개변수가 한개인 경우 소괄호 ()를 생략할 수 있다.

const hello = x => { console.log(x) };

 

3. 매개변수가 없는 경우 소괄호 ()를 생략할 수 없다.

const hello = () => { ... };

 

* 함수 몸체 정의

1. 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있다.

const hello = (x, y) => console.log(x, y)
hello(1, 5) // 1, 5

// 위 표현은 다음과 동일
const hello = (x, y) => { return console.log(x,y) }

 

2. 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호 ()로 감싸주어야한다.

const hello = (id, name) => ({ id, name });
hello(1, 'Lia') //{id: 1, name: 'Lia'}

// 위 표현은 다음과 동일
const hello = (id, name) => { return { id, name } };

 

3. 함수 몸체가 여러 개의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 없다. 이 때, 반환값이 있다면 반환값을 명시적으로 반환해야한다.

const hello = name => {
    const result = `안녕하세요 제 이름은 ${name} 입니다.`;
    return result;
}

hello('Lia') // `안녕하세요 제 이름은  Lia 입니다.`

 

4. 화살표 함수도 일급객체이므로 map, filter, reduce 등과 같은 고차함수에 인수로 전달할 수 있다. 

// ES5
[1, 2, 3].map(function (v) {
  return v * 2;
});

// ES6
[1, 2, 3].map(v => v * 2); // -> [ 2, 4, 6 ]

 

* 화살표 함수와 일반 함수의 차이

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor

2. 화살표 함수는 일반 함수와 달리 중복된 매개변수 이름을 선언할 수 없다.

3. 화살표 함수는 함수 자체의 this, argument, super, new.target 바인딩을 갖지 않는다.

4. this의 용법 차이 : 화살표 함수가 일반 함수와 구별되는 가장 큰 특징은 this이다. 화살표 함수의 this는 일반 함수의 this와 다르게 동작하기 때문.