Login
JavaScript

ES6-фішки без яких неможливо жити

15 Nov 2022

Що таке ES6?

ES6 або ECMAScript 2015 — це 6-е та основне видання стандарту специфікації мови ECMAScript.

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

У цій статті ми обговоримо про не велику частину найпопулярніших функцій ES6, які ми можемо використовувати у нашому повсякденному кодуванні.

Я виділив декілька простих та водночас основних фішек, які потрібно знати:

  1. Змінні let, const
  2. Стрілочні функції (Arrow function)
  3. Шаблонні рядки (Template strings)
  4. Параметри за замовчуванням (Default parameters)
  5. Spread/Rest оператори
  6. Деструктуризація (Destructuring assignment)

Щоб полегшити статтю, я буду описувати матеріал у вигляді окремих важливих фактів.

Одже, все по порядку

Змінні let, const

До нашого старого друга var приєдналися ще 2 способи оголошення змінних - let та const

  • Головна різниця між var та новими let,const - область видимості.
  • Область видимості - якщо спростити, це певна ділянка коду, де ми маємо доступ до змінної
  • let, const - дозволяють оголошувати змінні лише для блоку {...}, в якому відбувається оголошення. Це називається блоковою областю видимості.
  • var має область видимості всередині функції.

Простий приклад:

var a = 10;
{
    let a = 5;
    console.log(a); // 5
}
console.log(a); // 10

Тепер різниця між let та const:

  • let дає змогу перезаписувати та оголошувати змінну скільки завгодно раз
  • const призначено для оголошення змінних (констант), значення яких доступні лише для читання. Тому ми не можемо оголошувати без значень або перезаписувати.

Також варто пам'ятати про підняття змінних (hoisting). Нагадаю, це коли ми викликаємо змінну перед її оголошенням.

  • var (як і function) існують до оголошення, тому при виклику повертає значення undefined
  • let, const - не існують до оголошення, тому ми отримуємо помилку

Стрілочні функції (Arrow function)

Стрілочні функції одна з моїх улюблених нововведень. Вони являють собою більш скорочений та унікальний запис функцій ES6. 

// Classic function expression
let foo = function(a, b) {
    return a + b;
};

// Arrow function
let foo = (a, b) => a + b;

Але стрілочні функція це не просто синтаксичний цукор, у них є певна відмінність від класичних функцій. Ця відмінність пов'язана з контекстом виклику (this).

  • Стрілочні функції не мають свого this, тому всередині стрілочних функцій значення this те саме, що й зовні.

Для більш детального ознайомлення с темою контексту, переходьте за посиланням.

Шаблонні рядки (Template strings)

ES6 надає простіший спосіб вставки значення змінної або результату виразу в рядок (string). Цей прийом називається інтерполяція

  • ${ ... } - використовується для обчислення значення змінної/виразу.
  • `` - зворотні лапки використовуються як роздільник для таких випадків.
let company = 'Metamorfosi';
console.log(`${company} - best company!`); // Metamorfosi - best company!

Параметри за замовчуванням (Default parameters)

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

let sum = (a, b = 1) => {
  return a + b;
}

console.log(sum(8, 2)); // 10

console.log(sum(4)); // 5

Тобто, якщо не встановлювати параметри, у разі виклику функції з недостатньої кількості аргументів, або без аргументів, ми отримуємо помилку.

Spread/Rest оператори

ES6 добавили нові супер зручні оператори, які дозволяють працювати з об'єктами, що ітеруються(iterable). В основному це масиви та об'єкти.

... - цей оператор називають як spread чи rest, залежно від того, як і де він використовується:

  • Spread - якщо ми використовуємо його наприклад з масивом чи об'єктом, то даний оператор розбиває його на індивідуальні елементи. Від цього і назва, Spread - "поширювати"
  • Rest - якщо ми об'єднуємо набір значень в один масив.

Приклад:

// Оператор spread
function foo(x, y, z) {
    console.log(x, y, z);
}

let arr = [1, 2, 3];
foo(...arr); // 1 2 3

// Оператор rest
function foo(...args) {
    console.log(args);
}

foo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

Деструктуризація (Destructuring assignment)

Деструктурізація - прийом, який допомогає виносити окремі властивості об'єкта та окремі елементи масива в змінні.

Деструктурізація масива:

// масив з іменами
let arr = ["Peter", "Parker"];

// Деструктурізація 
let [firstName, surname] = arr;

console.log(firstName); // Peter
console.log(surname);  // Parker

Тепер ми можемо використовувати змінні замість елементів масиву.

Лайфхак, як швидко виносити елементи за допомогою split()

let [firstName, surname] = "Peter Parker".split(' ');

console.log(firstName); // Peter
console.log(surname);  // Parker

Також є змога пропускати елементи, які нам не потрібні за допомогою ком:

// пропускаємо другий елемент
let [company, , status] = ["Metamorfosi", "worst", "best"];

alert(status); // best

Як ми вже знаємо в ES6 існує зручний спосіб задавати параметри за замовчуванням.

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

Якщо ми хочемо, щоб значення за замовчуванням замінило відсутнє, ми можемо вказати його за допомогою нашого вже знайомого синтаксису:

// значення за замовчуванням
let [name = "Alex", surname = "Anonymous"] = ["Mark"];

console.log(name); // Mark (з массива)
console.log(surname); // Anonymous

Деструктурізація об'єкта:

let options = {
  title: "Item",
  width: 100,
  height: 200
};

let {title, width, height} = options;

console.log(title);  // Item
console.log(width);  // 100
console.log(height); // 200

Як ви побачили, ми легко виносимо окремі властивості об'єкта, вказавши назви властивостей.

При цьому, немає різниці який порядок. Ось так – теж працює:

let {height, width, title} = { title: "Item", height: 200, width: 100 }

Також, у практиці ми можемо перейменовувати властивості як завгодно за допомогою двокрапки:

let options = {
  title: "Item",
  width: 100,
  height: 200
};

let {title: name, width: w, height: h} = options;

console.log(name);  // Item
console.log(w);  // 100
console.log(h); // 200

Отже, це була лише невелика частина крутих фішок, які є в ES6, тому рано розслаблятися.

Я сподіваюся, ця стаття допомогла кожному знайти щось нове або освіжити пам'ять.

Всім гарного кодування!

2