📔 링크
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);