Справочник 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 — для обратного превращения.

Что дальше