Airbnb Javascript 스타일 가이드

📔 링크

한국어
원문

Airbnb Javascript Style Guide를 읽으면서 잘 이해가 안 되는 부분이나, 꼭 기억하고 싶은 내용을 정리한 글이다.

Objects

---

3.7 hasOwnProperty, propertyIsEnumerable, isPrototypeOf와 같은 Object.prototype메소드를 직접 호출하지 마세요

Why? 이러한 methods 해당 객체의 properties에 의해 가려질 수 있습니다.
consider { hasOwnProperty: false } - or, the object may be a null object (Object.create(null)).

• { hasOwnProperty: false } : 해당 객체가 hasOwnProperty 키로 갖고 있으므로 프로토타입 체인을 이용해서 Object.prototype.hasOwnProperty 사용하지 못한다.
• Object.create(null) : 프로토타입 체인의 종점이 Object.prototype이 아닌 경우

// 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));

Arrays

---

4.4 순회 가능한 객체(iterable object)를 배열로 변환할 때는 Array.from 대신 전개 구문 ...을 사용하세요.

document.querySelectorAll 메소드는 Array는 아니지만 iterable object이고 array-like인 NodeList를 반환한다.
스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다

const foo = document.querySelectorAll('.foo'); 

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];

4.5 유사 배열(array-like) 객체를 array로 변환 할 때, Array.from을 사용하세요.

유사 배열 객체는 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. 따라서 Array.prototype의 메소드를 사용하지 못한다.

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
const arr = Array.prototype.slice.call(arrLike);

// good
const arr = Array.from(arrLike);

Destructuring(비구조화)

---

5.3 여러 값을 반환하는 경우 배열 비구조화가 아닌 객체 비구조화를 사용하세요.

Why? 이렇게 하면 이후 호출처에 영향을 주지 않고 새로운 속성을 추가하거나 순서를 변경할 수 있습니다.

// bad
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// the caller selects only the data they need
const { left, top } = processInput(input);