6 непопулярних, але зручних можливостей ES6

Спільнота JavaScript-розробників з великою радістю зустрічає нові API, оновлення синтаксису та цікаві фічі, адже все це робить життя легшим, а програмування цікавішим. ES6 несе з собою велику купу всього нового, але сьогодні не про це, сьогодні ми розглянемо шість маленьких, можливо не дуже помітних, але зручних нововведень.

1. Змінні ключі прямо в літералі об'єкта

Досада, що мучила розробників протягом багатьох років, це неможливість в літералі об'єкта встановити змінну в якості ключа, потрібно було робити це вже після оголошення.

let myKey = 'key3';
let obj = {
    key1: 'One',
    key2: 'Two'
};
obj[myKey] = 'Three';

Виглядає некрасиво, ще й плутає розробників. ES6 дозволяє писати ось так:

let myKey = 'variableKey';
let obj = {
    key1: 'One',
    key2: 'Two',
    [myKey]: 'Three' /* yay! */
};

Всього лише потрібно поставити навколо ключа квадратні дужки, саме вони роблять всю магію.

2. Функції-стрілочки

Спочатку вони можуть збити з пантелику, але насправді це корисне нововведення в синтаксисі, що дозволяє писати лаконічніші анонімні функції.

// Додати 10% до total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11

// Ще одна невеличка дія -- скасування івенту
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);

Ніяких function чи return, іноді навіть дужки не потрібні.

3. find та findIndex

Array.prototype.indexOf дозволяє розробнику отримати індекс якогось конкретного елементу, а от щоб знайти якийсь невідомий об'єкт, але який задовольняє певні критерії потрібно було використовувати цикли. Тепер не потрібно: просто використовуйте find щоб знайти сам елемент, та findIndex щоб знайти його індекс. Обидва методи приймають параметром функцію, яка в свою чергу приймає об'єкт і повертає true/false, в залежності від того, чи відповідає об'єкт критеріям.

let ages = [12, 19, 6, 4];

let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 18); // 1

4. Оператор розпакування ...

Цей оператор вказує інтерпретатору, що масив, або будь який ітератор, що стоїть попереду слід розбити, а елементи передати як окремі параметри. Погляньте на приклади:

// Передача масиву аргументів в функцію
// Схоже на Function.prototype.apply()
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

// Конвертуємо NodeList в Array
let divsArray = [...document.querySelectorAll('div')];

// Конвертуємо Arguments в Array
let argsArray = [...arguments];

Дуже зручним є те, що він працює з ітераторами (NodeList, arguments) і дозволяє конвертувати їх в справжні масиви, без використання Array.from чи схожих хаків.

5. Літерали шаблонів

Щоб створити стрічку, що займає декілька рядків, потрібно додавати купу символів нового рядка та зворотніх слешів. Також, щоб досягти нормальної взаємодії зі шаблонами, розробники часто використовували різні хаки.

Але тепер не потрібно, ES6 підтримує вбудовані літерали для шаблонів з використанням зворотніх лапок:

// Декілька рядків
let myString = `Hello

I'm a new line`; // І ніяких помилок!

// Базова інтерполяція
let obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3

Звісно, декілька рядків в стрічці - це не єдине застосування для шаблонів, але вже це змушує мене посміхатися.

6. Параметри за умовчуванням

Параметри за умовчуванням доступні в більшості серверних мов (Python чи PHP), а тепер вони доступні і в JavaScript.

// Базове використання
function greet(name = 'Anon') {
  console.log(`Hello ${name}!`);
}
greet(); // Hello Anon!

// Можна навіть функцію
function greet(name = 'Anon', callback = function(){}) {
  console.log(`Hello ${name}!`);

  
  callback();
}

// Лише для одного параметра
function greet(name, callback = function(){}) {}