함께 성장하는 프로독학러

9. 메서드를 선언할 때 function을 생략, method shorthand 본문

Programming/ES6

9. 메서드를 선언할 때 function을 생략, method shorthand

프로독학러 2018. 4. 11. 22:33

안녕하세요, 프로독학러 입니다.


이번 포스팅에서는 ES6의 method shorthand에 대해서 알아보겠습니다.


표현식부터 살펴보도록 하겠습니다.


// 단축 메서드명 (ES6)
var o = {
  property([parameters]) {},
  get property() {},
  set property(value) {},
  * generator() {}
};

위와 같이 객체 안에서 메서드를 지정할 때 function을 생략할 수 있습니다.


이해를 돕기위해 예제를 살펴보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
var obj = {
    add: function (a, b){
        return a+b;
    },
    mult: function (a, b){
        return a*b;
    }
}
 
console.log(obj.add(105)); // 15
console.log(obj.mult(105)); // 50
cs


위의 예제는 obj객체에 add 메서드와 mult 메서드를 함수정의를 통해 지정할 것입니다.

콘솔로 각각의 메서드를 실행하면 그 결과가 콘솔에 잘 찍히는 것을 알 수 있습니다.


1
2
3
4
5
6
7
8
9
10
11
var obj = {
    add (a, b){
        return a+b;
    },
    mult (a, b){
        return a*b;
    }
}
 
console.log(obj.add(105)); // 15
console.log(obj.mult(105)); // 50
cs


위의 예제는 첫 번째 예제와 완전히 동일한 것입니다.

그러나 코드는 더 간결해 지고 깔끔해졌죠.


이렇듯 method shorthand를 이용하면 객체안에서 메서드를 지정할 때 좀 더 편리하고 짧게 코드를 작성할 수 있습니다.

여기까지 method shorthand에 대해서 간단히 알아보았습니다.

다음 포스팅에서는 비구조화 할당(Destructing assignment)에 대해서 알아보도록 하겠습니다.

감사합니다.


**참고 자료 (항상 감사드립니다)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer


*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)

Comments