Но пару недель назад, когда я готовил несколько полезных советов по JavaScript для начала своего путешествия в мир YouTube, я написал вот этот список советов, которые могут сэкономить ваше время. Я надеюсь, что они помогут вам также, как и мне когда-то.

В этой статье я хочу поделиться с вами пятью полезными советами по JavaScript (готовы окунуться?)

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

Деструктуризация – это функция, которая появилась в ES6. Это одна из тех функций, которой вы будете пользоваться постоянно, стоит вам только узнать, как она работает. 

Она поможет вам справиться с тремя главными вопросами:

• Повтор. Каждый раз, когда вы извлекаете свойство какого-либо объекта и создаете новую переменную, вы записываете все это в новую строку. 

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

// Wow... should we display
// John's password like that?
{ // Ну и ну… неужели мы должны выводить
  // пароль Джона вот таким образом? }

const firstName = user.firstName;
const lastName = user.lastName;
const password = user.password;

• Доступность. Каждый раз, когда вы пытаетесь получить доступ к свойству какого-либо объекта, вы должны указать путь до него (например, user.firstName, user.firstName и т.д.).
• Использование. Скажем, вы создали новую функцию и при этом работаете лишь с одним свойством объекта. 

Итак, теперь вы знаете, что это за проблемы, связанные с объектами. Так, как же их можно решить?

Как решить вопрос с повтором?

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const { firstName, lastName, password } = user;

console.log(firstName, lastName, password);
// Output: 'John', 'Doe', '123' { // Вывод: 'John', 'Doe', '123' }

Деструктуризация – это процесс извлечения свойства объекта по его ключу. Если вы возьмете существующий ключ, который есть у объекта, и поместите его в скобки ({ firstName }), то, таким образом, сообщите JavaScript следующее:

 «Эй, JavaScript, я хочу создать переменную с таким же именем, как у моего свойства. Я хочу создать переменную под названием firstName для свойства под названием firstName, которое есть у моего объекта.»

Примечание: если вы хотите произвести деструктуризацию объекта, то вам в любом случае нужен существующий ключ. При ином раскладе такой подход работать не будет.

Как решить вопрос с доступностью?

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
  family: {
    sister: {
      firstName: "Maria",
    },
  },
};

// We access to the nested object `sister`
// and we extract the `firstName` property
{ // Мы получаем доступ к вложенному объекту sister
  // и извлекаем свойство firstName }
const { firstName } = user.family.sister;

console.log(firstName);
// Output: 'Maria'

Если вы работаете с вложенными объектами и постоянно пытаетесь получить доступ к одному и тому же свойству, это может вам наскучить и, кроме того, занять слишком много времени. 

Однако у вас есть возможность сократить путь к свойству до одной переменной. Для этого вам нужно воспользоваться деструктурированием, и все это можно сделать в одну строку. 

Как решить вопрос с использованием?

Вы уже знаете, как деструктурировать объект, а теперь я хочу вам показать, как можно извлекать свойства прямо в определении параметра функции. 

Если вы знакомы с React, то, скорее всего, вы уже знаете, как это делать.

function getUserFirstName({ firstName }) {
  return firstName;
}

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

console.log(getUserFirstName(user));
// Output: 'John'

В примере выше у нас есть функция getUserFirstName, и при этом мы знаем, что она будет использовать лишь одно свойство нашего объекта - firstName.

И в данном случае вместо того, чтобы передавать весь объект или создавать новую переменную, мы можем просто деструктурировать параметры функции объекта.

Как можно объединять объекты в ES6?

В программировании довольно часто возникают проблемы, связанные со структурами данных, и их нужно как-то решать. Благо, в ES6 появился spread-оператор и упростил манипуляции с объектами и массивами. 

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const userJob = {
  jobName: "Developer",
  jobCountry: "France",
  jobTimePerWeekInHour: "35",
};

Давайте представим, что у нас есть два объекта:

• User. Это объект, который определяет общую информацию о пользователе.
• UserJob. Это объект, который определяет информацию о работе пользователя. 

Наша задача – создать один объект, который бы содержал свойства только этих двух объектов.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const userJob = {
  jobName: "Developer",
  jobCountry: "France",
  jobTimePerWeekInHour: "35",
};

const myNewUserObject = {
  ...user,
  ...userJob,
};

console.log(myNewUserObject);
// Output:
//{
//  firstName: 'John',
//  lastName: 'Doe',
//  password: '123',
//  jobName: 'Developer',
//  jobCountry: 'France',
//  jobTimePerWeekInHour: '35'
//}

С помощью spread-оператора (…) мы можем извлечь все свойства из одного объекта и поместить их в другой.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const userJob = {
  jobName: "Developer",
  jobCountry: "France",
  jobTimePerWeekInHour: "35",
};

const myNewUserObject = {
  ...user,
  ...userJob,
};

console.log(myNewUserObject);
// Output:
//{
//  firstName: 'John',
//  lastName: 'Doe',
//  password: '123',
//  jobName: 'Developer',
//  jobCountry: 'France',
//  jobTimePerWeekInHour: '35'
//}

Как объединять массивы?

const girlNames = ["Jessica", "Emma", "Amandine"];
const boyNames = ["John", "Terry", "Alexandre"];

const namesWithSpreadSyntax = [...girlNames, ...boyNames];

console.log(namesWithSpreadSyntax);
// Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']

Как и в случае с объектами, spread-оператор (…) извлекает все элементы из одного массива и помещает их в другой.

const girlNames = ["Jessica", "Emma", "Amandine"];

const newNewArray = [
  ...girlNames,
  // We extract: { // Мы извлекаем следующие элементы: }
  // - 'Jessica'
  // - 'Emma'
  // - 'Amandine'
  // and send them to { // и отправляем их }
  // a new array `[]` { // в новый массив }
];

Как удалять дубликаты в массиве?

Массивы – это те же списки, а значит, в них может присутствовать большое количество одинаковых элементов. Если вы хотите избавиться от дубликатов в своем массиве, то можете воспользоваться одним из способов, которые мы привели ниже.

Один из способов позволяет сделать это в одну строку (благодаря ES6), но мы привели и «старый» способ для сравнения. 

Как удалять дубликаты: старый способ

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

const uniqueAnimalsWithFilter = animals.filter(
  // Parameters example: 'owl', 0, ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl']
{ // Пример параметров: 'owl', 0, ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'] }
  (animal, index, array) => array.indexOf(animal) == index
);

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

Давайте посмотрим на пример выше. Здесь мы хотим очистить массив под названием animals от всех дубликатов.

Мы можем сделать это с помощью функции filter и метода indexOf внутри нее.

Функция filter берет все элементы из массива animals (animals.filter). После чего для каждого вхождения предоставляются следующие данные:

• Текущее значение (пример: duck)
• Индекс (пример: 0)
• Первоначальный массив (пример: массив animals => ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'])

Мы применяем метод indexOf к каждому вхождению исходного массива и передаем переменную animal (текущее значение) в качестве параметра.  

indexOf вернет первый индекс текущего значения (пример: для значения «owl» индекс будет 0).

Затем внутри функции filter мы сравниваем значение indexOf с текущим индексом. Если они совпадают, то мы возвращаем true, в противном случае - false.

Функция filter создаст новый массив, в котором будут только те элементы, для которых было возвращено значение true.

То есть в нашем случае: ['owl', 'frog', 'canary', 'duck', 'goose'].

Как удалять дубликаты: новый способ

Ну скажем так, «старый» способ довольно интересный, но при этом долгий и немного сложный. Так что, давайте посмотрим на «новый» способ:

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

const uniqueAnimalsWithSet = [...new Set(animals)];

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

Давайте посмотрим на каждый шаг в отдельности:

// 1
const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

// 2
const animalsSet = new Set(animals);

console.log(animalsSet);
// Output: Set { 'owl', 'frog', 'canary', 'duck', 'goose' }

// 3
const uniqueAnimalsWithSet = [...animalsSet];

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

У нас есть массив под названием animals, и мы преобразуем его в тип Set – специальный тип объектов в ES6.

Что его отличает от остальных, так это то, что он позволяет создавать набор уникальных значений. 

Примечание: Set – это набор уникальных значений, но это не массив.

Раз уж мы имеем объект типа Set с уникальными значениями, мы должны преобразовать его обратно в массив.

Для этого мы должны воспользоваться spread-операторами, которые позволят нам деструктурировать объект и отправить все свойства в новый массив.

За счет того, что объект типа Set имеет только уникальные свойства, наш новый массив также будет иметь только уникальные значения. 

Как использовать тернарный оператор?

Вы слышали когда-нибудь о таком способе, который позволяет писать небольшие условия в одну сроку?

Если нет, то настало время избавиться от блоков if-else и начать использовать вместо них небольшие тернарные операторы.

Давайте для начала взглянем на пример с console.log. Идея здесь вот в чем: мы должны проверить значение переменной и при определенных условиях отобразить на экране вывод.

const colour = "blue";

if (colour === "blue") {
  console.log(`It's blue!`);
} else {
  console.log(`It's not blue!`);
}

Данный пример – это типичный случай использование тернарного оператора, который позволяет заменить 5 строк всего одной!

Всего одна строка!

const colour = "blue";

colour === "blue" ? console.log(`It's blue!`) : console.log(`It's not blue!`);
// [condition] ? [if] : [else] { // [условие] ? [if] : [else] }

Тернарный оператор может заменить if и else в случае небольших условий.

Примечание: в ситуациях со сложными условиями, тернарный оператор лучше не использовать, поскольку он может снизить читаемость.

Ниже есть еще один пример, в котором используется тернарный оператор. Здесь он применяется в операторе return внутри функции. 

function sayHelloToAnne(name) {
  return name === "Anne" ? "Hello, Anne!" : "It's not Anne!";
}

console.log(sayHelloToAnne("Anne"));
// Output: 'Hello, Anne!'

console.log(sayHelloToAnne("Gael"));
// Output: "It's not Anne!"

Заключение 

Надеюсь, что эта статья стала для вас полезной и вы смогли узнать что-то новое о JavaScript.