Airbnb JavaScript 스타일 가이드 - 3. 객체 Objects

3-1. 객체를 생성할 때는 리터럴 문법 사용하기

• eslint : no-new-object

 

3-2. 동적 속성을 갖는 객체를 생성할 때는 속성 계산명을 사용하기

  - 객체의 모든 속성을 한 곳에서 정의하기 위해

function getKey(k) {
  return `a key named ${k}`;
}

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

 

3-3 , 3-4.메서드 단축구문 사용하기

• eslint : object-shorthand

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};
const obj = {
  lukeSkywalker,
};

 

3-5. 속성의 단축구문은 객체 선언의 시작 부분에 모으기 

- 어떤 속성이 단축구문을 사용하고 있는지 알기 쉽다

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

 

3-6. 유효하지 않은 식별자에만 " " 붙이기

• eslint : quote-props

 

3.7  Object.prototype 메서드 직접 호출하지 않기

• eslint : no-prototype-builtins
• why? These methods may be shadowed by properties on the object in question - consider { hasOwnProperty: false } - or, the object may be a null object (Object.create(null)). In modern browsers that support ES2022, or with a polyfill such as https://npmjs.com/object.hasown, Object.hasOwn can also be used as an alternative to Object.prototype.hasOwnProperty.call.

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// better
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
console.log(has.call(object, key));

// best
console.log(Object.hasOwn(object, key)); // only supported in browsers that support ES2022

import has from 'has';
console.log(has(object, key));
/* or */
console.log(Object.hasOwn(object, key));

 

3-8. 객체를 얕은 복사 할 때는 `Object.assign` 대신 객체 전개 구문 사용하기

           특정 속성이 생략된 새로운 개체를 가져올 때는 객체 나머지 연산자 사용하기

• eslint: prefer-object-spread

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

 

 

---

 

참조 https://github.com/airbnb/javascript#types