Programming/Javascript

[Javascript] shorthand property names

Bam_t 2021. 11. 24. 16:00
728x90

객체를 정의하다보면 꽤 자주 key와 value를 같은 이름으로 사용하게 되는 경우가 발생하는데, 같은 단어를 두 번 사용하는게 은근히 귀찮죠. 이런 문제를 해결하는 새로운 표기법이 shorthand property names입니다.


1. shorthand property names

shorthand property names은 객체에서 key와 value명이 같은 경우 축약해서 사용할 수 있게 만들어주는 문법입니다.

//기존 객체 코드
const obj = {
  name: name,
  color: color,
  x: x,
  y: ,
};

//shorthand property names를 이용한 코드
const obj = {
  name,
  color,
  x,
  y,
};

 

 

 

2. shorthand method names

기존에 객체에 메소드를 선언하려면 {key명: function~}이런식으로 선언했습니다. 하지만 이제 shorthand방식을 적용함으로써 더 간단하고 명료하게 객체의 메소드를 선언할 수 있습니다.

//기존 코드
const obj = {
  func: function(param) {},
};

//shorthand method names 적용 코드
const obj = {
  func(param) {},
};

참조

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

 

객체 초기자 - JavaScript | MDN

객체는 new Object(), Object.create() 또는 literal 표기법(initializer 표기법)을 사용해 초기화될 수 있습니다. 객체 초기자는 중괄호({})로 묶인 0개 이상의 객체의 프로퍼티명과 관련 값의 쌍을 콤마로 구

developer.mozilla.org

https://ui.dev/shorthand-properties/

 

Shorthand Property and Method Names in JavaScript | ES6 - ui.dev

In this post you'll learn how ES6's Shorthand Property and Shorthand Method Names features allow you to more concisely add properties to JavaScript objects.

ui.dev

728x90