JS(ES6+) 개발자가 알아야 할 50가지 이상의 힌트(2부)

안녕하세요, StormyTalent 다시! 이번에는 Array 및 Destructuring의 좋지 않은 사용법과 좋은 사용법을 살펴보겠습니다.
이렇게 하면 5분만에 훑어볼 수 있지만 JS(ES6+)에 대한 훌륭한 경험을 얻을 수 있습니다.

1. 어레이
배열 생성에는 리터럴 구문을 사용하십시오. eslint: 배열 생성자 없음

// bad
const items = new Array();

// good
const items = [];

항목을 배열에 추가하려면 직접 할당 대신 Array#push를 사용하십시오.

const someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

어레이 스프레드를 사용하여 어레이를 복사합니다.

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

반복 가능한 객체를 배열로 변환하려면 Array.from 대신 spreads ...를 사용하십시오.

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

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

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

배열과 유사한 객체를 배열로 변환하려면 Array.from을 사용하십시오.

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

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

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

중간 배열 생성을 방지하기 때문에 iterable에 대한 매핑에 spread ... 대신 Array.from을 사용하십시오.

// bad
const baz = [...foo].map(bar);

// good
const baz = Array.from(foo, bar);

배열 메서드 콜백에서 return 문을 사용하십시오. 8.2에 따라 함수 본문이 부작용 없이 표현식을 반환하는 단일 문으로 구성된 경우 반환을 생략해도 됩니다. eslint: 배열-콜백-반환

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => x + 1);

// bad - no returned value means `acc` becomes undefined after the first iteration
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
});

// good
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  return flatten;
});

// bad
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

// good
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }

  return false;
});

배열에 여러 줄이 있는 경우 열린 후와 닫는 배열 대괄호 전에 줄바꿈을 사용합니다.

// bad
const arr = [
  [0, 1], [2, 3], [4, 5],
];

const objectInArray = [{
  id: 1,
}, {
  id: 2,
}];

const numberInArray = [
  1, 2,
];

// good
const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];

const numberInArray = [
  1,
  2,
];

2. 파괴
객체의 여러 속성에 액세스하고 사용할 때 객체 구조 분해를 사용합니다. eslint: 선호-파괴

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

배열 구조 분해를 사용합니다. eslint: 선호-파괴
상수 arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

배열 분해가 아닌 여러 반환 값에 객체 분해를 사용하십시오.

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