ES6+ — частина 1

Просунутий JavaScript ES6 — точний механізм сучасної мови програмування

У попередніх блоках ми вже використовували деякі фічі ES6 — arrow functions, let/const, template literals, деструктуризацію. Тепер систематизуємо ці знання та вивчимо додаткові можливості, які роблять JavaScript код коротшим та виразнішим.

Що таке ES6?

ES6 (ECMAScript 2015) — велике оновлення JavaScript, яке додало десятки нових фіч. З тих пір щороку виходять невеликі оновлення (ES2016, ES2017...). Разом їх називають ES6+ або Modern JavaScript.

Ти вже знаєш: let/const, arrow functions, template literals, destructuring, spread/rest. Тепер поглибимо ці знання.

Template literals — розширені можливості

Багаторядкові рядки

// Старий спосіб
const oldHtml = '<div>\n  <h1>Привіт</h1>\n  <p>Текст</p>\n</div>';

// Template literal — природні переноси рядків
const html = `
  <div>
    <h1>Привіт</h1>
    <p>Текст</p>
  </div>
`;

Вирази всередині $

const price = 100;
const tax = 0.2;

// Будь-який вираз
console.log(`Ціна з податком: ${price * (1 + tax)} грн`);
// "Ціна з податком: 120 грн"

// Виклик функцій
console.log(`Сьогодні: ${new Date().toLocaleDateString("uk")}`);

// Тернарний оператор
const age = 20;
console.log(`Статус: ${age >= 18 ? "дорослий" : "неповнолітній"}`);

Tagged templates (коротко)

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `<strong>${values[i]}</strong>` : "");
  }, "");
}

const name = "Олексій";
const result = highlight`Привіт, ${name}!`;
// "Привіт, <strong>Олексій</strong>!"

Enhanced Object Literals

Shorthand property names

Коли ім'я змінної збігається з ключем:

const name = "Олексій";
const age = 25;

// Старий спосіб
const user1 = { name: name, age: age };

// Скорочення
const user2 = { name, age };
// { name: "Олексій", age: 25 }

Shorthand methods

// Старий спосіб
const calc1 = {
  add: function(a, b) { return a + b; }
};

// Скорочення
const calc2 = {
  add(a, b) { return a + b; }
};

Computed property names

Ключ об'єкта може бути виразом:

const field = "email";

const user = {
  name: "Олексій",
  [field]: "alex@test.com",          // email: "alex@test.com"
  [`${field}Verified`]: true,         // emailVerified: true
};

Це корисно для динамічного створення об'єктів:

function createPair(key, value) {
  return { [key]: value };
}

console.log(createPair("color", "blue")); // { color: "blue" }

Spread — поглиблення

Копіювання з модифікацією

const config = { theme: "dark", lang: "uk", fontSize: 16 };

// Оновити одне поле
const updated = { ...config, fontSize: 18 };
// { theme: "dark", lang: "uk", fontSize: 18 }

// Додати нове поле
const extended = { ...config, debug: true };

Spread у викликах функцій

const numbers = [3, 7, 1, 9, 4];

// Замість Math.max.apply(null, numbers)
console.log(Math.max(...numbers)); // 9

// Об'єднання масивів з додатковими елементами
const all = [0, ...numbers, 10];
// [0, 3, 7, 1, 9, 4, 10]

Глибоке vs поверхневе копіювання

const user = {
  name: "Олексій",
  address: { city: "Київ", zip: "01001" },
};

const copy = { ...user };
copy.name = "Марія";     // ✅ не змінює оригінал
copy.address.city = "Львів"; // ❌ ЗМІНЮЄ оригінал! (поверхневе копіювання)

// Глибока копія
const deepCopy = structuredClone(user);
deepCopy.address.city = "Львів"; // ✅ оригінал не змінюється

for...of vs for...in

const fruits = ["яблуко", "банан", "вишня"];

// for...of — значення (для масивів)
for (const fruit of fruits) {
  console.log(fruit); // "яблуко", "банан", "вишня"
}

// for...in — ключі (для об'єктів)
const user = { name: "Олексій", age: 25 };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Symbol, Set, Map (огляд)

Set — унікальні значення

const numbers = [1, 2, 2, 3, 3, 3];
const unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3]

Map — колекція ключ-значення

const userRoles = new Map();
userRoles.set("alex@test.com", "admin");
userRoles.set("maria@test.com", "user");

console.log(userRoles.get("alex@test.com")); // "admin"
console.log(userRoles.size); // 2

Підсумок

• Template literals: багаторядкові рядки, вирази в ${}
• Shorthand properties: { name, age } замість { name: name, age: age }
• Computed properties: { [dynamicKey]: value }
• Spread: поверхнева копія, structuredClone() для глибокої
• for...of для масивів, for...in для об'єктів
• Set — масив унікальних значень, Map — покращений словник

Що далі?

У наступному уроці — ES6+ частина 2: optional chaining, nullish coalescing, logical assignment та інші сучасні фічі.