26장: 함수의 추가기능

함수의 구분

ES6 이전의 모든함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 즉, ES6 이전의 모든 함수는 callable 이면서 constructor이다.

var foo = function () {
  return 1;
};

// 일반적인 함수로서 호출 가능 
foo(); // -> 1

// 생성자 함수로서 호출 가능 (ES6 이전)
new foo(); // -> foo {}

객체에 바인딩된 함수를 생성자함수로 호출이 가능하다는 것은 문제가 있다. 객체에 바인딩된 함수가 prototype 프로퍼티를 가지며, 프로토타입 객체도 생성하기에 성능면에서도 문제가 있다.

// 프로퍼티 f에 바인딩된 함수는 callable이며 constructor다.
var obj = {
  x: 10,
  f: function () { return this.x; }
};

// 생성자 함수로 호출 가능
console.log(obj.f()); // 10

메서드

ES6에서 메서드(객체에 바인딩된 함수)는 생성자 함수로 호출할 수 없다. 메서드는 축약표현으로 정의된 함수만을 의미한다. (즉, 인스턴스를 생성할 수 없는 non-constructor)

const obj = {
  x: 1,
  // 축약 표현 (=메서드)
  foo() { return this.x; },
  // 비축약 표현 (=일반함수)
  bar: function() { return this.x; }
};

new obj.foo(); // 에러

// obj.foo는 constructor가 아닌 ES6 메서드이므로 prototype 프로퍼티가 없다.
obj.foo.hasOwnProperty('prototype'); // -> false

// obj.bar는 constructor인 일반 함수이므로 prototype 프로퍼티가 있다.
obj.bar.hasOwnProperty('prototype'); // -> true

ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부슬롯[[HomeObject]]를 갖는다.

아래는 sayHi는 ES6 메서드가 아니기에, super를 참조할 수 없다.

// 객체 내 함수 선언 나쁜 예
const derived = {
  __proto__: base,
  // sayHi는 [[HomeObject]]를 갖지 않으므로 super 키워드를 사용할 수 없다.
  sayHi: function () {
    // SyntaxError: 'super' keyword unexpected here
    return `${super.sayHi()}. how are you doing?`;
  }
};

화살표 함수

• 화살표 함수와 일반함수와 차이

  • 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다 (생성자 함수와 다름). 이에 따라, 인스턴스를 생성할 수 없으므로prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.

  • 화살표 함수는 함수자체의 this, arguments, super, new.target 바인딩을 갖지 않는다. 따라서 화살표 함수내부에서this, arguments, super, new.target을 참조하면 스코프체인을 통해 상위스코프의 this, arguments, super, new.target을 참조한다 (aka lexical this).

    • 콜백 함수 내부의 this 문제를 해결하기 위해 의도적으로 설계됨.

버전별 비교 미리보기

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

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

화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다 (생성자 함수와 다름). 이에 따라, 인스턴스를 생성할 수 없으므로prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.

const Foo = () => {};
new Foo(); // X

화살표 함수는 표현도 간략한데, 콜백함수 내부에서 this가 전역객체를 가리키는 문제를 해결하기도 한다.

// 에러 발생 코드 
class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    // add 메서드는 인수로 전달된 배열 arr을 순회하며 배열의 모든 요소에 prefix를 추가한다.
    return arr.map(function (item) {
      return this.prefix + item;
      // -> TypeError: Cannot read property 'prefix' of undefined
    });
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

해결법

참고로, bind()를 써도 해결가능

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map(item => this.prefix + item);
  }
}

화살표 함수는 상위 스코프의 this를 참조한다

window.x = 1;

const normal = function () { return this.x; };
const arrow = () => this.x;

console.log(normal.call({ x: 10 })); // 10
console.log(arrow.call({ x: 10 }));  // 1
// ------------------------------------------------
// 화살표 함수 foo의 arguments는 상위 스코프인 전역의 arguments를 가리킨다.
// 하지만 전역에는 arguments 객체가 존재하지 않는다. arguments 객체는 함수 내부에서만 유효하다.
// arguments = 매개변수의 개수를 사전에 알 수 없는 가변 인자 함수
const foo = () => console.log(arguments);
foo(1, 2); // ReferenceError: arguments is not defined

// Bad
const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi(); // Hi
// -----------------------------------
// Good
const person = {
  name: 'Lee',
  sayHi() {
    console.log(`Hi ${this.name}`);
  }
};

person.sayHi(); // Hi Lee

객체리터럴 반환시 소괄호로 감싼다.

const create = (id, content) => ({ id, content });
create(1, 'JavaScript'); // -> {id: 1, content: "JavaScript"}
const create = (id, content) => { return { id, content }; }; // 위와 동일

Rest 파라미터

• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

• Rest 파라미터는 반드시 마지막이어야 한다.

• Rest는 arguments와 다르게 진짜 배열이므로 바로 사용 가능하다

// ES6 이전
function bar() {
  // arguments은 유사배열이라, 사용전 배열로 변환 해야하는 번거로움이 있었다...
  console.dir(arguments); // [1,2,3,4,5]
  console.dir(arguments[0]); // 1
}
bar(1, 2, 3, 4, 5);
// ----------------------------------------
// ES6 이후
function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}
bar(1, 2, 3, 4, 5);

자바스크립트 엔진이 매개변수의 개수와 인수의 개수를 체크하지 않기 때문에 기본값을 지정하는 방어적 코딩 필요하다. Rest 파라미터에는 기본값을 지정할 수 없다.

// ES6 이전
function sum(x, y) {
  // 인수가 전달되지 않아 매개변수의 값이 undefined인 경우 기본값을 할당한다.
  x = x || 0;
  y = y || 0;
  return x + y;
}

console.log(sum(1, 2)); // 3
console.log(sum(1));    // 1
// ------------------------------
// ES6 이후
// 매개변수 기본값 사용
function sum(x = 0, y = 0) {
  return x + y;
}