메서드 정의

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 9월.

ECMAScript 2015 를 시작으로, 객체 초기자(initializer)에 메서드 정의를 위한 더 짧은 구문이 도입되었습니다. 이는 메서드 명에 할당된 함수를 위한 단축입니다.

구문

js
    var obj = {
      property( parameters… ) {},
      *generator( parameters… ) {},
    // 키(속성) 계산값과도 함께:
      [property]( parameters… ) {},
      *[generator]( parameters… ) {},
    // ES5 getter/setter 구문과 비교해 보세요:
      get property() {},
      set property(value) {}
    };

설명

단축 구문은 ECMAScript 5에 도입된 getter 및 setter 구문과 비슷합니다.

다음 코드가 주어지면:

js
var obj = {
  foo: function () {},
  bar: function () {},
};

이제 이를 아래로 줄일 수 있습니다:

js
var obj = {
  foo() {},
  bar() {},
};

주의 : 단축 구문은 익명(anonymous) 함수 (…foo: function() {}… 에서처럼) 대신 유명(named) 함수를 사용합니다. 유명 함수는 함수 본체에서 호출될 수 있습니다 (이는 참조할 식별자가 없기에 익명 함수에게는 불가능합니다). 자세한 사항은, function 참조.

단축 생성기 메서드

생성기 메서드는 단축 구문을 사용해서도 정의될 수 있습니다. 단축 구문 내 별표(*)는 생성기 속성명 앞에 와야 함을 주의하세요. 즉, * g(){}는 작동하지만 g *(){}는 아닙니다.

js
// 유명 속성 사용 (ES2015 이전)
var obj2 = {
  g: function* () {
    var index = 0;
    while (true) yield index++;
  },
};

// 단축 구문을 쓰는 같은 객체
var obj2 = {
  *g() {
    var index = 0;
    while (true) yield index++;
  },
};

var it = obj2.g();
console.log(it.next().value); // 0
console.log(it.next().value); // 1

메서드 정의는 생성 불가능합니다

모든 메서드 정의는 생성자가 아니고 인스턴스화하려고 하는 경우 TypeError 예외가 발생합니다.

js
var obj = {
  method() {},
};
new obj.method(); // TypeError: obj.method는 생성자가 아닙니다

var obj = {
  *g() {},
};
new obj.g(); // TypeError: obj.g는 생성자가 아닙니다 (ES2016에서 바뀜)

예

간단한 테스트 사례

js;highlight[3]
var obj = {
  a : "foo",
  b(){ return this.a; }
};
console.log(obj.b()); // "foo"

속성 계산명

단축 구문은 속성 계산명(computed property name)도 지원합니다.

js
var bar = {
  foo0: function () {
    return 0;
  },
  foo1() {
    return 1;
  },
  ["foo" + 2]() {
    return 2;
  },
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2023년 8월 28일 by MDN contributors.

View this page on GitHub • Report a problem with this content