JavaScript ES6 정리 - shorthand property, concise methods

이번 포스팅에서는 ES6에서 향상된 객체의 기능들에 대해 알아보자!

shorthand property

프로퍼티 축약이라고 불린다.

ES6를 사용해본 사람이라면 어떤 기능인지 바로 알 수 있을 것이다.

바로 코드부터 보며 어떤 기능인지 확인해보자 !

shorthand property 사용 전

var x = 1;
var y = 2;
var obj = {
  x: x,
  y: y
}
console.log(obj);
/*
Result
{ x: 1, y: 2 }
*/

우리는 객체 내부의 값을 프로퍼티(property)라고 하며, key : value로 구성된다.

ES6 이전에는 key와 value에 할당할 변수명이 같을 때 위의 예시와 같이 할당하였다.

shorthand property 사용 후

const x = 1;
const y = 2;
const obj = {
  x,
  y
}
console.log(obj);
/*
Result
{ x: 1, y: 2 }
*/

ES6에서 추가된 shorthand property를 사용하면 위와 같이 key와 value에 할당할 변수명이 같을 때 value를 생략할 수 있다.

그 결과, const x = 1에서 변수명 x와 해당 값이 할당된 것을 확인할 수 있다.

concise methods

말 그대로 객체 내에서 좀 더 간결하게 메소드를 사용할 수 있는 방법이다. 바로 코드를 보자!

concise methods 사용 전

var obj ={
  name: 'Jinsoo Lee',
  getName: function () { return this.name }
}
console.log(obj.getName());
/*
Result
Jinsoo Lee
*/

concise methods 사용 후

const obj ={
  name: 'Jinsoo Lee',
  getName () { return this.name }
}
console.log(obj.getName());
/*
Result
Jinsoo Lee
*/

키워드 : function를 제거해도 동일하게 사용할 수 있다.

예제를 보며 차이점을 더 공부해보자!

위 코드에서 각각 console.log(obj.getName)를 한 결과이다.

첫 번째 결과에서는 null로 값이 할당된 것을 확인할 수 있고 concise method를 사용한 아래 함수에서는 arguments : (...), caller : (...) 처리가 되어 있는 것을 볼 수 있다.

(...)를 클릭하며 호출하여야만 값을 알 수 있는데 클릭을 하면 오류가 난다!

이는 실행 환경 당시에서 값에 접근하는 것이 아니라 외부 스코프에서 이미 함수가 종료된 이후에 접근하려고 하여 오류가 나는 것이다.

또 다른 차이점으로는 concise method를 사용한 아래 함수는 prototype이 존재하지 않아, 생성자 함수를 사용할 수 없는 것이다.

ES6에서는 디버깅을 쉽게 하기 위해서 Error를 출력해주고,

함수는 함수로서의 기능만 수행하기 위해 생성자 함수로서의 기능을 제한했다고 이해하고 넘어가면 된다!

본 포스팅은 인프런 강의 Javascript ES6+ 제대로 알아보기를 공부하며 정리한 포스팅입니다!