구조 분해로 배열 풀기

❌ 다음과 같은 코드가 보이면:

const identity = 'Julia Coding Unicorn';
const result = identity.split(' ');
const name = result[0];
const occupation = result[1];
const creature = result[2];

✅ 다음과 같이 리팩터링할 수 있습니다.

const identity = 'Julia Coding Unicorn';
const [ name, occupation, creature ] = identity.split(' ');

🦄 구조 분해를 사용하면 헤드와 테일을 찾을 수 있습니다.

const [head, ...tail] = [1, 2, 3, 4, 5]; // head = 1; tail = [2, 3, 4, 5]

🦄 약속을 기다리세요:

const [user, account] = await Promise.all(
  [
    fetch('/user'),
    fetch('/account')
  ]
)

🦄 정규식 일치:

const regex = /(\d{4})-(\d{2})-(\d{2})/
const [ , year, month, day] = re.exec('𝟸0𝟸0-𝟷0-𝟷𝟻'); // [0] is the full match, skip it

🦄 스왑 변수도 있습니다.

[x, y] = [y, x];

✋ 그러나 구조 분해가 항상 적합한 것은 아닙니다.

❌ Hipsters는 문자열을 대문자로 표시하는 데 사용합니다.

function capitalize([ first, ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}

✅ 그러나 고전적인 솔루션은 결코 유행을 타지 않습니다.

function capitalize(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

Destructuring은 코드를 단순화하거나 더 복잡하게 만들 수 있습니다. 새로운 ES6 기능은 좋은 고전을 대체하기 위한 것이 아닙니다. 새로운 != 더 좋습니다. 경우에 따라 배열 인덱스[0]만 입력하면 됩니다.

👉 🦄