Готовый перевод Modern JS Cheatsheet / Памятка по современному JavaScript: Деструктуризация объектов и массивов

### Деструктуризация объектов и массивов

*Деструктуризация* — это удобный способ создавать новые переменные, напрямую получая значения из объектов или массивов.

На практике *деструктуризацию* можно использовать, чтобы присваивать переменные, разбивая на части параметры функции или *this.props* в React-проектах.

#### Объяснение с примером кода

- Объект

Давайте использовать во всех примерах следующий объект:

```js
const person = {
firstName: "Коля",
lastName: "Андреев",
age: 35,
sex: "М"
}
```

Без деструктуризации

```js
const first = person.firstName;
const age = person.age;
const city = person.city || "Санкт-Петербург";
```

С деструктуризацией всё поместится в одну строчку:

```js
const { firstName: first, age, city = "Санкт-Петербург" } = person; // И всё!

console.log(age) // 35 -- Создана новая переменная age и ей присвоено значение, равное person.age
console.log(first) // "Коля" -- Создана новая переменная first и ей присвоено значение, равное person.firstName
console.log(firstName) // Undefined -- person.firstName существует, НО новая созданная переменная называется first
console.log(city) // "Санкт-Петербург" -- Создана новая переменная city и, поскольку свойство person.city ранее не было определено, переменной присвоено альтернативное значение "Санкт-Петербург".
```

**Примечание:** В `const { age } = person;` скобки после ключевого слова *const* не используются для определения объекта или блока. Это синтаксис самой *деструктуризации*.

- Параметры функции

*Деструктуризация* часто используется, чтобы разбить на части параметры в функциях.

Без деструктуризации

```js
function joinFirstLastName(person) {
const firstName = person.firstName;
const lastName = person.lastName;
return firstName + '-' + lastName;
}

joinFirstLastName(person); // "Коля-Андреев"
```

Если деструктурировать параметр *person*, то функция выйдет куда короче:

```js
function joinFirstLastName({ firstName, lastName }) { // мы создали переменные firstName и lastName из частей параметра person
return firstName + '-' + lastName;
}

joinFirstLastName(person); // "Коля-Андреев"
```

Ещё удобнее использовать деструктуризацию со [стрелочными функциями](#arrow_func_concept):

```js
const joinFirstLastName = ({ firstName, lastName }) => firstName + '-' + lastName;

joinFirstLastName(person); // "Коля-Андреев"
```

- Массив

Давайте рассмотрим следующий массив:

```js
const myArray = ["a", "b", "c"];
```

Без деструктуризации

```js
const x = myArray[0];
const y = myArray[1];
```

С использованием деструктуризации

```js
const [x, y] = myArray; // И это всё!

console.log(x) // "a"
console.log(y) // "b"
```

#### Полезные ресурсы

- [Особенности ES6 - Деструктурирующее присваивание](http://es6-features.org/#ArrayMatching)
- [Деструктуризация объектов - WesBos](http://wesbos.com/destructuring-objects/)
- [ExploringJS - Деструктуризация](http://exploringjs.com/es6/ch_destructuring.html)

Переведено на Нотабеноиде
http://notabenoid.org/book/70916/381877

Переводчики: wizjer