Airbnb JS 스타일 가이드 [Objects]

자몽·2021년 10월 4일

목록 보기

14/25

github에 올라와있는 https://github.com/airbnb/javascript 를 번역하고 약간의 해석을 덧붙인 글입니다.

- Use the literal syntax for object creation.

객체를 만들 때, 리터럴 사용하기.

// bad
const item = new Object();

// good
const item = {};

리터럴 구문: 중괄호({})를 사용해 새 객체를 작성하는 것을 객체 리터럴 생성이라고 한다.

찾아보니 객체를 생성할 때, 위의 방법 중 어느 것을 사용해도 큰 성능차이가 나지 않지만, {}가 더 간결하기에 사람들은 주로 리터럴 방식을 많이 사용한다고 한다.

- Use computed property names when creating objects with dynamic property names.

동적으로 넣을 수 있는 키 값은 객체를 생성할 때, 한번에 같이 생성하기.

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,
};

코드만 보면 이해가 잘 가지 않지만, 출력 결과를 보면 금방 이해할 수 있다.

{a key named enabled: true,
id: 5,
name: "San Francisco"}

출력 결과는 위와 같다. "a key named enabled" 에서 enabled는 getKey함수를 통해 우리가 동적으로 값을 넣은 부분이다.

이와 같은 행동을 할 때, 굳이 복잡하게 따로 생성하지 말고, 객체를 생성해줄 때, 한 번에 만들라는 뜻을 담고 있다.

- Use object method shorthand

객체 메서드를 단축 표기법을 사용해 만들자.

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

단축 표기법(shorthand notation): 메서드를 정의할 때 function 키워드와 콜론:을 생략하는 방식이다.

단축 표기법을 사용하면, 객체의 메서드를 더 간결하게 만들고, 확인할 수 있다.

- Use property value shorthand.

프로퍼티 값 또한 단축 표기법을 사용하자.

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

객체의 키와 값의 이름이 동일하다면 뒤에 있는 : 값 부분을 생략할 수 있다.

함수에서도 이와 같이 활용될 수 있다.

function userInfo(name, age) {
  return {
    name,
    age: age,
  };
}

let user = userInfo("Jamong", 22);
console.log(user);

참고로, 단축 표기법과 일반 표기법은 함께 사용하는 것이 가능하다.

- Group your shorthand properties at the beginning of your object declaration.

단축 표기법을 통해 단축된 프로퍼티들을 한 곳에 모아둬라.

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

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

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

바로 위의 케이스에서 "단축 표기법과 일반 표기법은 함께 사용하는 것이 가능하다"라고 했는데,
만약 같이 사용하는 경우 bad case처럼 단축 표기법과 일반 표기법이 뒤죽박죽 섞이게 된다.

이를 방지하기 위해, 그리고 조금 더 깔끔히 관리하기 위해서,
단축 표기법은 단축 표기법끼리, 일반 표기법은 일반 표기법끼리 묶어서 관리하는게 좋다.

- Only quote properties that are invalid identifiers

따움표로 만들어진 프로퍼티들은 꼭 필요한 경우(효력 없는 속성)에만 사용하자.

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};

먄약, 객체의 키 값으로 -를 따움표 없이 data-blash: 5와 같이 사용한다면, 다음과 같은 오류가 나온다.
=> Uncaught SyntaxError: Unexpected token '-'

따라서, 이런 어쩔 수 없는 경우를 제외하고는 주관적으로 읽기가 더 쉬운(따움표가 없는) 방식을 사용하는 것을 권장하고 있다.

하지만 ESLint에서는 따움표를 쓰면 전부 다 쓰고, 따움표를 쓰지 않는다면 모두 쓰지 않는 일관된방식을 추천하는데 둘 중 하나의 방법을 선택해 사용해도 좋을 것 같다.

- Do not call Object.prototype methods directly, such as hasOwnProperty, propertyIsEnumerable, and isPrototypeOf

Object.prototype에서 builtin으로 제공되는 메서드를 객체에서 직접적으로 호출하지 마라.
(ex. hasOwnProperty, propertyIsEnumerable, isPrototypeOf)

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

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

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
console.log(has.call(object, key));
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
console.log(has(object, key));

일반적인 경우,

1) 객체에서 직접 호출
2) Object.ptototype을 통한 호출
2가지 방법 모두 true를 반환한다.

const user = { name: 'joah' }

user.hasOwnProperty('name'); // 1) true
Object.prototype.hasOwnProperty.call(obj, 'name'); // 2) true

하지만, Object.prototype에서 builtin(내장되어 있는) 메서드를 객체에서 직접적으로 호출하면 2가지의 문제가 생긴다.

1. Object.create 메서드에 null이 인자로 들어간 경우

const user = Object.create(null);
user.name = 'jamong';
user.hasOwnProperty('jamong'); // 1) object.hasOwnProperty is not a function
Object.prototype.hasOwnProperty.call(obj, 'name'); // 2) true

2. builtin으로 제공되는 메서드와 같은 이름의 키를 객체가 가진 경우

const user = {
  name: 'jamong',
  hasOwnProperty: 'yes',
}
user.hasOwnProperty('name'); // 1) Uncaught TypeError: user.hasOwnProperty is not a function
Object.prototype.hasOwnProperty.call(user,'name'); // 2) true