JavaScript — це мова програмування для вебу, яка дозволяє робити сторінки інтерактивними.
За допомогою тегу <script src="file.js"></script> або вставити код всередині <script></script>.
Змінні зберігають дані. Оголошуються через let, const, або var.
var – стара декларація, функціональна область видимості.let – блочна область видимості, змінна.const – блочна область видимості, константа (незмінна).Основні типи: string, number, boolean, null, undefined, symbol, object.
Оператори виконують дії над значеннями: арифметичні, порівняння, логічні, присвоєння.
let a = 10; let b = 3;
console.log(a + b); // 13 (додавання)
console.log(a - b); // 7 (віднімання)
console.log(a * b); // 30 (множення)
console.log(a / b); // 3.333... (ділення)
console.log(a % b); // 1 (остача від ділення)
console.log(a ** b); // 1000 (степінь: 10^3)Масиви — це упорядковані колекції елементів, наприклад: let arr = [1, 2, 3];
Властивість length: arr.length.
Об’єкти зберігають дані у вигляді ключ-значення, наприклад: let user = {name: 'John', age: 30};
Через крапку або квадратні дужки: user.name або user['name'].
Функції — це блоки коду для повторного використання: function greet() { console.log('Hi'); }
const greet = function() { console.log('Hi'); };
Скорочений запис функції: const sum = (a, b) => a + b;
Функції, передані як аргумент іншій функції, для виклику пізніше.
Об’єкт для асинхронних операцій, який може бути: pending, fulfilled, або rejected.
let p = new Promise((resolve, reject) => { /* async code */ });
Синтаксис для зручної роботи з промісами. async function fetchData() { let data = await fetch(url); }
Document Object Model — структура HTML-документа, до якої можна звертатися через JavaScript.
document.getElementById('myId')
document.getElementsByClassName('myClass') або document.querySelectorAll('.myClass')
Через push() для кінця або unshift() для початку: arr.push(4);
pop() видаляє останній, shift() – перший елемент.
arr.indexOf(value) повертає індекс або -1.
arr.includes(value) повертає true або false.
Створює новий масив, застосовуючи функцію до кожного елемента: arr.map(x => x*2)
Створює новий масив з елементів, що проходять умову: arr.filter(x => x > 5)
Акумулює значення масиву в одне: arr.reduce((sum, x) => sum + x, 0)
Через concat() або спред-оператор: [...arr1, ...arr2]
str.split(',') розділяє рядок по роздільнику.
arr.join(', ') повертає рядок з елементів масиву.
Витягування елементів масиву у змінні: let [a, b] = [1, 2];
Витягування властивостей об’єкта у змінні: let {name, age} = user;
typeof value повертає тип: string, number, boolean, object, function.
Рядки з інтерполяцією: `Hello ${name}`
Перевіряє, чи міститься підрядок: str.includes('text')
str.indexOf('text') повертає позицію або -1.
Виділяє частину рядка: str.slice(0,5)
Видаляє пробіли з початку та кінця рядка: str.trim()
Замінює частину рядка: str.replace('old','new')
Перетворює рядок у масив: str.split(',')
document.querySelector('.myClass') або document.querySelectorAll('div')
element.textContent = 'Новий текст';
element.innerHTML = '<p>Новий HTML</p>';
element.style.color = 'red'; або element.classList.add('active');
element.addEventListener('click', () => { alert('clicked'); });
Об’єкт, що передається в обробник події і містить інформацію про подію.
event.preventDefault();
event.stopPropagation();
Поширення події через DOM: bubbling – від цільового елемента до кореня, capturing – від кореня до цілі.
document.querySelector('input').value
element.setAttribute('src', 'image.jpg');
element.remove();
let div = document.createElement('div');
parent.appendChild(div);
element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');
element.parentElement
element.nextElementSibling
element.previousElementSibling
Об’єкт для асинхронних операцій з resolve та reject.
new Promise((resolve,reject) => { ... });
promise.then(result => { ... });
promise.catch(error => { ... });
Синтаксис для роботи з промісами як із синхронним кодом.
async function f(){ let res = await fetch(url); }
Метод для HTTP-запитів: fetch('url').then(res => res.json())
fetch(url).then(res => res.json()).then(data => console.log(data))
Блок для обробки помилок у синхронному або async коді.
localStorage.setItem('key','value'); localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();
Шаблон для пошуку або заміни в рядках: /abc/i
let re = /pattern/flags; або let re = new RegExp('pattern','i');
/abc/.test('abcdef') → true
'abc123'.match(/\d+/g) → ["123"]
'abc123'.replace(/\d+/,'456') → "abc456"
Перетворення об’єкта в рядок і назад: JSON.stringify(obj), JSON.parse(str)
Аналог localStorage, але дані видаляються після закриття вкладки: sessionStorage.setItem('key','value')
Через JSON: let copy = JSON.parse(JSON.stringify(obj));
Мова програмування для веб-браузерів та серверів (Node.js), що дозволяє робити інтерактивні веб-сторінки.
Number, String, Boolean, null, undefined, Symbol, BigInt, Object.
Місце в пам’яті для зберігання даних, оголошується через var, let або const.
var – функціональна область, let і const – блочна область; const не можна переназначити.
Блок коду, який можна викликати багаторазово.
Скорочений синтаксис функцій: () => {}, зберігає контекст this.
Підняття оголошень змінних і функцій на початок області видимості.
Функція, яка має доступ до змінних зовнішньої функції навіть після її виконання.
Функція, яка передається як аргумент і виконується пізніше.
Об’єкт, який представляє результат асинхронної операції: pending, fulfilled, rejected.
Синтаксис для роботи з промісами, який дозволяє писати асинхронний код як синхронний.
Механізм обробки асинхронних операцій у JS, що дозволяє неблокуючий код.
Synchronous виконується по черзі, asynchronous – може відкладатися і виконуватись пізніше.
Формат обміну даними: текстовий, зручний для зберігання об’єктів.
JSON.parse(jsonString)
JSON.stringify(obj)
Оператор для визначення типу змінної.
Оператор для перевірки, чи є об’єкт екземпляром певного класу.
Методи для роботи з масивами: map, filter, reduce, forEach.
Синтаксис для витягування значень з масивів або об’єктів у змінні.
... дозволяє розкривати масиви або об’єкти.
...args збирає залишкові аргументи у масив.
Immediately Invoked Function Expression — функція, що виконується одразу після створення.
Контекст виклику функції.
Arrow function наслідує this з зовнішньої області, звичайна функція має власний this.
Методи для контролю this і виклику функцій: call і apply викликають одразу, bind повертає нову функцію.
Об’єкт, з якого наслідуються властивості у JS об’єктів.
Синтаксис для створення об’єктів і наслідування (ES6).
Файл з кодом, який можна експортувати та імпортувати через export/import.
Синтаксис для роботи з модулями ES6.
Техніка, коли один обробник подій на батьківському елементі обробляє події дочірніх елементів.
Document Object Model — об’єктна модель HTML документа, яку можна змінювати через JS.
Browser Object Model — об’єктна модель браузера (window, navigator, screen).
Механізм збереження даних у браузері на стороні клієнта без терміну дії.
Механізм збереження даних у браузері протягом однієї сесії.
Дані, що зберігаються у браузері і відправляються на сервер при кожному запиті.
Метод отримання даних з іншого домену через тег <script>.
Сучасний метод для роботи з HTTP-запитами, повертає проміс.
Fetch більш сучасний, працює на промісах; XHR старий, на callback.
Функція або масив, що дозволяє контролювати, які властивості серіалізуються.
Функція, що обробляє значення під час десеріалізації JSON.
Коли подія спливає з дочірнього елементу до батьківського.
Коли подія спочатку обробляється на батьківському елементі, а потім на дочірньому.
Mutable можна змінювати після створення, immutable — ні (наприклад, рядки в JS immutable).
Копія об’єкта або масиву, яка копіює лише перший рівень властивостей.
Повна копія об’єкта або масиву, включаючи всі вкладені об’єкти.
Унікальний та незмінний примітив, часто використовується як ключ об’єкта.
Тип для дуже великих чисел, що перевищують Number.MAX_SAFE_INTEGER.
Колекція ключ-значення, де ключі можуть бути будь-якого типу.
Колекція унікальних значень.
Object обмежений типом ключів (рядки, символи), Map — будь-які ключі; Map зберігає порядок.
Map, який не перешкоджає збору сміття об’єктів у ключах.
Set, що зберігає лише об’єкти і не заважає їх видаленню збирачем сміття.
Рядки з можливістю вставки виразів: `Hello ${name}`.
Функція, що обробляє template literals для кастомного форматування.
Оператор ?., що дозволяє безпечно звертатися до властивостей.
Оператор ??, що повертає праву сторону лише якщо ліва null або undefined.
Імпорт модуля всередині функції за допомогою import(), повертає проміс.
Скрипт, що працює у фоновому режимі для кешування і push notifications.
Протокол для двостороннього зв’язку між клієнтом і сервером у реальному часі.
Функція, що повертає ітератор та може призупиняти виконання через yield.
Об’єкт з методом next(), який повертає {value, done}.
Цикл для ітерації по ітерабельних об’єктах (масиви, Map, Set).
Цикл для перебору ключів об’єкта.
Використання yield* для передачі управління іншому генератору.
Послідовне виконання промісів через .then().
Метод, який повертає проміс, що виконується, коли всі проміси у масиві виконані.
Метод, який виконується, коли перший проміс завершиться.
Метод, який чекає завершення всіх промісів і повертає їх статуси.
Метод, який виконується, коли перший проміс успішний.
Синтаксис для роботи з промісами у вигляді синхронного коду. async робить функцію промісом, await чекає його виконання.
Конструкція для обробки помилок: try виконує код, catch ловить помилки, finally виконується завжди.
Об’єкт, який містить інформацію про помилку: name, message, stack.
Власний клас, що успадковує Error, наприклад class ValidationError extends Error.
Використання await fetch(url) для зручного отримання даних з сервера.
Деструктуризація масивів або об’єктів для зручного присвоєння змінних.
Оператор ... для збору решти елементів у масив або об’єкт.
Оператор ... для розгортання масиву або об’єкта у місці використання.
Значення параметрів функції за замовчуванням: function f(a = 1).
arguments — старий об’єкт, rest — масив сучасний ES6, працює тільки з параметрами функції.
Підняття оголошень функцій у верхню частину скоупу.
Підняття оголошень змінних у верхню частину скоупу. var піднімається без значення, let/const — у TDZ.
Період між підняттям змінної let/const і її оголошенням, під час якого доступ заборонений.
Коли замикання утримує непотрібні об’єкти в пам’яті довше, ніж потрібно.
Функція, що викликається одразу після оголошення: (function(){})().
Шаблон для створення модулів із приватними змінними та методами.
Сучасний синтаксис для модулів: export та import.
Імпорт модуля всередині коду функції з import(), що повертає проміс.
Можливість використовувати await на верхньому рівні модуля без async функції.
Об’єкт, який утримує слабке посилання на інший об’єкт без запобігання його збору сміттям.
API для спостереження за збором сміття об’єктів.
Об’єкт-обгортка для перехоплення операцій над іншим об’єктом.
Методи для операцій над об’єктами як функції, наприклад Reflect.get, Reflect.set.
Механізм обробки черги задач і асинхронних операцій у JS.
Стек викликів функцій у JS, де відстежується поточний виконуваний контекст.
Черга для промісів та mutation observers, виконується після поточного call stack.
Черга для setTimeout, setInterval та I/O подій, виконується після microtasks.
Помилка, коли об’єкти залишаються в пам’яті без потреби, погіршуючи продуктивність.
Функція для глибокого копіювання об’єктів у JS.
Модулі ES6 мають власний scope, відокремлений від глобального, тому var не створює глобальні змінні.