JavaScript ES6: 7 полезных фишек, которые сделают ваш код лучше

Всем привет, любители JavaScript. Несмотря на то что ES6 вышел уже достаточно давно, многие продолжают придерживаться стиля написания ES2015. Я не хочу сказать, что это плохо, но вот вам пару «фишек» из ES6, которые упростят вам жизнь, а ваш код станет выглядеть чуточку лучше.

Сначала я буду показывать вам код написанный в стиле ES2015, а затем уже тот же код в ES6.

Погнали!

Значения объекта JavaScript и их извлечение

Скажем, что у нас есть объект с некоторыми свойствами и нам необходимо эти свойства достать и присвоить переменным. Как бы мы это делали в ES2015?

const obj = {
  a: 1,
  b: 2,
  c: 3,
};
const a = obj.a;
const b = obj.b;
const c = obj.c;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Но ES6 сделать это намного проще. Мы можем использовать деструктуризацию объекта:

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

const { a, b, c } = obj;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Объединение данных в JS ES6

ES5: Допустим, что нам надо объединить два массива, как мы это можем сделать?

const a = [1, 2, 3];
const b = [1, 5, 6];
const c = a.concat(b);

console.log(c); // [1, 2, 3, 1, 5, 6]

Что если это объект?

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj = Object.assign({}, obj1, obj2);

console.log(obj); // { a: 1, b: 2}

А вот как мы это можем сделать с помощью ES6 (используя …spread оператор):

const a = [1, 2, 3];
const b = [1, 5, 6];
const c = [...a, ...b];

console.log(c); // [1, 2, 3, 1, 5, 6]

Что если мы хотим избавиться от дубликатов? Тогда мы можем сделать так:

const a = [1, 2, 3];
const b = [1, 5, 6];

const c = [...new Set([...a, ...b])];

console.log(c); // [ 1, 2, 3, 5, 6 ]

А что насчет объекта? Аналогично:

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj = { ...obj1, ...obj2 };

console.log(obj); // { a: 1, b: 2}

Оператор ИЛИ || и условие if

Представим, что в вашем условии if достаточно одного найденного совпадения, тогда условие будет верным, как мы это напишем в ES5:

if (type == 1 || type == 2 || type == 3 || type == 4) {
  // dosmth...
}

Как мы это можем сделать короче в ES6?

const array = [1, 2, 3];
array.includes(3) // true

Поиск по списку JavaScript

Как обычно вы используете поиск по массиву? Готов поспорить, что это метод filter. Нет, это не плохо, если вам нужно много разных элементов. Однако, если вы знаете, что элемент уникальный (допустим вы ищите его по ID), то разумным будет использовать метод find.

Отличие find от filter в том, что find останавливает свою работу после найденного первого совпадения, а метод filter продолжает обход по массиву. Окей, давайте наглядно. ES5:

const array = [1, 2, 3, 4, 5];
const result = array.filter((item) => item === 3);

console.log(result); // [3]

ES6:

const array = [1, 2, 3, 4, 5];
const result = array.find((item) => item === 3);

console.log(result); // 3

+ метод filter вернет вам новый массив, который содержит [3], а метод find вернет просто число 3. Стоит использовать в зависимости от того, что именно вы собираетесь делать с найденным элементом.

Проверка на наличие значений у объекта

Нередко бывает, когда мы не знаем, содержит объект то или иное значение, нам необходимо это проверить. Как мы это сделаем в ES5:

const obj = { name: 'Denis' };
const name = obj && obj.name;

console.log(name); // Denis

С помощью ES6:

const obj = { name: 'Denis' };
const name = obj?.name;

console.log(name); // Denis

Проверка на undefined, null и пустоту

Иногда нам требуется проверить, что переменная не undefined, не null и не ‘пустота’. Так мы это реализуем в ES5:

const value = '';

if (value !== null && value !== undefined && value !== '') {
  console.log('Не отработает!');
}

// Не отработает скрипт

В ES6 мы можем сократить эту запись:

const value = '';

if ((value ?? '') !== '') {
  console.log('Не отработает!');
}

// Не отработает скрипт

Из записи на MDN:

Оператор нулевого слияния (??) это логический оператор, который возвращает значение правого операнда когда значение левого операнда равно null или undefined, в противном случае будет возвращено значение левого операнда.

Асинхронные функции

Допустим, что у нас есть две функции, выполнение которых нам необходимо дождаться, а потом уже выполнить результат. Как мы это сделаем в ES2015?

const functionFirst = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
};
const functionSecond = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 500);
  });
};

const fn = () => {
  functionFirst().then(res1 => {
    console.log(res1); // 1
    functionSecond().then(res2 => {
      console.log(res2);
    });
  });
};

fn();

// Console: 
// 1
// 2

Как же нам сократить эту запись? С помощью async/await. ES6:

const functionFirst = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
};
const functionSecond = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 500);
  });
};

const fn = async () => {
  const res1 = await functionFirst();
  const res2 = await functionSecond();

  console.log(res1); // 1
  console.log(res2); // 2
};

fn();

// 1
// 2

Этих 7 простых фишек из ES6 сделают ваш код чуточку чище. Использовать вам их или нет, это дело уже ваше. Лично я сам сторонник того, что стоит идти в ногу со временем. Если появляется что-то новое и это что-то новое куда удобнее/быстрее, то я использую в своем коде.

Что-то интересное про JavaScript вы можете почитать еще в статье — Что такое JavaScript?