Довідник JavaScript з поясненням на прикладах

1. const, let, var — у чому різниця

Усі три ключові слова створюють змінну, але поводяться по-різному.

var — застарілий варіант

var — найстаріший спосіб. У нього «дірява» область видимості (function scope), через що змінна може випадково «витікати» за межі блоку { }. Сьогодні використовувати його не рекомендується.

let — змінна, яку можна змінювати

let count = 0;
count = count + 1; // можна змінювати значення
console.log(count); // 1

let живе строго всередині блоку { }, в якому оголошена — це і називають block scope.

const — змінна, яку не можна перепризначити

const name = "Іван";
name = "Петро"; // ❌ Помилка: Assignment to constant variable

const user = { name: "Іван" };
user.name = "Петро"; // ✅ так можна

Правило за замовчуванням: використовуй const всюди, де змінна не буде перепризначена. Якщо значення буде змінюватися — бери let. var сьогодні майже не використовують.

2. Як обрати елемент на сторінці

Щоб змінювати щось у HTML через JavaScript, спершу потрібно «знайти» цей елемент.

querySelector — знаходить перший підходящий елемент

const btn = document.querySelector(".my-button");
const title = document.querySelector("#main-title");

Працює як CSS-селектор: .class — за класом, #id — за id, tag — за тегом.

querySelectorAll — знаходить усі підходящі елементи

const items = document.querySelectorAll(".list-item");
items.forEach(function (item) {
    console.log(item.textContent);
});

getElementById — швидкий пошук за id

const box = document.getElementById("box");

querySelector універсальніший і у 99% випадків його достатньо — рекомендуємо починати саме з нього.

3. onclick, onchange, addEventListener

Події — це реакція на дії користувача: клік, введення тексту, відправка форми.

onclick — подія кліку

const btn = document.querySelector(".btn");
btn.onclick = function () {
    console.log("Кнопку натиснули!");
};

onchange — подія зміни значення

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

const select = document.querySelector("select");
select.onchange = function () {
    console.log("Обрано:", select.value);
};

addEventListener — гнучкіший спосіб

btn.addEventListener("click", function () {
    console.log("Клік через addEventListener");
});

4. Шаблонні рядки (template literals)

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

const name = "Марія";
const age = 20;

// старий спосіб
console.log("Привіт, " + name + "! Тобі " + age + " років.");

// шаблонний рядок
console.log(`Привіт, ${name}! Тобі ${age} років.`);

Всередині ${ } можна писати будь-який вираз, не тільки змінну: `Через рік: ${age + 1}`.

5. Стрілкові функції vs звичайні

// звичайна функція
function sum(a, b) {
    return a + b;
}

// стрілкова функція
const sum2 = (a, b) => a + b;

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

Головна відмінність — стрілкові функції не мають власного this, вони беруть його з навколишнього коду. На старті це не критично, але важливо знати, що така різниця існує.

6. Перебір масивів: forEach, map, filter

forEach — просто «пройтися» по масиву

const fruits = ["яблуко", "банан", "груша"];
fruits.forEach(function (fruit) {
    console.log(fruit);
});

map — створити новий масив на основі старого

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

filter — залишити тільки потрібні елементи

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4]

Просте правило: forEach — коли потрібно просто щось зробити з кожним елементом; map — коли потрібен новий перетворений масив; filter — коли потрібно відібрати частину елементів.

7. Робота з об'єктами

const user = {
    name: "Анна",
    age: 22,
    isStudent: true
};

console.log(user.name);       // через крапку
console.log(user["age"]);     // через квадратні дужки

user.city = "Київ";           // додати нову властивість
delete user.isStudent;        // видалити властивість

Квадратні дужки зручні, коли ім'я властивості зберігається у змінній: user[key].

8. JSON: stringify і parse

JSON — формат обміну даними. У JavaScript об'єкт і JSON-рядок — не одне й те саме, між ними потрібне перетворення.

const user = { name: "Олег", age: 30 };

// об'єкт → JSON-рядок
const json = JSON.stringify(user);
console.log(json); // '{"name":"Олег","age":30}'

// JSON-рядок → об'єкт
const parsed = JSON.parse(json);
console.log(parsed.name); // "Олег"

JSON.stringify найчастіше потрібен для надсилання даних на сервер або збереження у localStorage, а JSON.parse — для зворотного перетворення.

Що далі