JavaScript шпаргалка українською — основи

Все базове по JavaScript на одній сторінці: змінні, типи, оператори, умови, цикли, функції, об'єкти. Довідник для тих, хто щойно вчить JS, або щоб «швидко згадати» через місяць.

Якщо потрібен глибший розбір — починай з уроку про змінні. Шукаєш конкретно методи масивів — у нас є окрема шпаргалка по масивах (map, filter, reduce і компанія).

Змінні: let, const, var

let age = 25;          // можна змінювати
const name = "Ivan";   // не можна перепризначити
var old = "не використовуй";

Правило 90/10: використовуй const за замовчуванням. Якщо побачив, що значення треба перепризначити — заміни на let. var не використовуй взагалі — це legacy з дев'яностих, і вона спричиняє несподівані баги через function scope і hoisting.

Типи даних

JavaScript має 7 примітивних типів і один не-примітив (object):

typeof null === "object" — це історичний баг JavaScript з 1995 року, який ніколи не виправили заради зворотної сумісності.

Конвертація типів

String(42);      // "42"
Number("3.14");  // 3.14
Boolean(0);      // false
Boolean("");     // false
Boolean("0");    // true (!) — будь-який непорожній рядок = true
parseInt("12px");   // 12
parseFloat("3.14"); // 3.14

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

const name = "Ivan";
const age = 25;
const greet = `Привіт, ${name}! Тобі ${age + 1} наступного року.`;
// "Привіт, Ivan! Тобі 26 наступного року."

Зворотні лапки + ${...} — заміна старому "Привіт, " + name + "!".

Оператори

Арифметичні

Порівняння

Завжди використовуй === і !==. == робить неявну конвертацію типів, що дає сюрпризи: 0 == "", null == undefined, [] == false — все true. У 99% випадків ти цього не хочеш.

Логічні

// Класичний хак з ||: значення за замовчуванням
const name = userName || "Гість";
// АЛЕ: 0 || "Гість" → "Гість" (бо 0 — falsy)

// Краще: ?? — тільки null/undefined вважає "порожнім"
const count = userCount ?? 0;
// 0 ?? "default" → 0 ✅

Тернарний оператор

const status = age >= 18 ? "дорослий" : "дитина";

Скорочена форма if/else — корисно для простих умов в одному рядку.

Truthy / Falsy

JavaScript ділить усі значення на «правдиві» (truthy) і «хибні» (falsy). У контексті if (...), falsy перетворюється на false.

Falsy значення (запам'ятай ці 7):

false
0          // (і -0, 0n)
""         // порожній рядок
null
undefined
NaN

Все інше — truthy. Включно з:

• "0" (рядок з нулем)
• "false" (рядок зі словом false)
• [] (порожній масив!)
• {} (порожній об'єкт!)

Умови

if / else if / else

if (age < 13) {
  console.log("дитина");
} else if (age < 18) {
  console.log("підліток");
} else {
  console.log("дорослий");
}

switch

switch (day) {
  case "пн":
  case "вт":
  case "ср":
  case "чт":
  case "пт":
    console.log("робочий день");
    break;
  case "сб":
  case "нд":
    console.log("вихідний");
    break;
  default:
    console.log("невідомо");
}

break критично важливий — без нього виконання «провалюється» в наступний case.

Цикли

for

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

while / do...while

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// do...while виконується мінімум один раз
do {
  console.log("один раз точно");
} while (false);

for...of (по значеннях)

const fruits = ["яблуко", "груша", "слива"];
for (const fruit of fruits) {
  console.log(fruit);
}

for...in (по ключах об'єкта)

const user = { name: "Ivan", age: 25 };
for (const key in user) {
  console.log(key, user[key]);
}

break / continue

for (let i = 0; i < 10; i++) {
  if (i === 3) continue; // пропустити 3
  if (i === 7) break;    // зупинити цикл
  console.log(i);
}
// 0, 1, 2, 4, 5, 6

Функції

Function declaration

function add(a, b) {
  return a + b;
}

«Підіймається» (hoisting) — можна викликати ще до оголошення в коді.

Function expression

const add = function(a, b) {
  return a + b;
};

Не підіймається — спочатку треба оголосити.

Arrow function

const add = (a, b) => a + b;

// З тілом і явним return
const add = (a, b) => {
  const sum = a + b;
  return sum;
};

// Один параметр — дужки не обов'язкові
const double = x => x * 2;

// Без параметрів
const greet = () => "Привіт!";

Arrow-функції не мають власного this — це робить їх ідеальними для колбеків у методах об'єктів і React-компонентах.

Параметри за замовчуванням

function greet(name = "Гість") {
  return `Привіт, ${name}!`;
}

greet();         // "Привіт, Гість!"
greet("Ivan");   // "Привіт, Ivan!"

Rest параметри

function sum(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}

sum(1, 2, 3, 4, 5); // 15

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

function createUser({ name, age, email = "n/a" }) {
  return `${name}, ${age}, ${email}`;
}

createUser({ name: "Ivan", age: 25 }); // "Ivan, 25, n/a"

Об'єкти

Створення і доступ

const user = {
  name: "Ivan",
  age: 25,
  greet() {
    return `Привіт, я ${this.name}`;
  }
};

user.name;          // "Ivan"
user["name"];       // те саме
user.greet();       // "Привіт, я Ivan"

Додавання / видалення

user.email = "ivan@example.com"; // додати
delete user.age;                  // видалити
"name" in user;                   // true — перевірка наявності

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

const { name, age } = user;
// name = "Ivan", age = 25

// З перейменуванням і дефолтом
const { name: userName, country = "UA" } = user;

Spread (розгортання)

const updated = { ...user, age: 26 };  // копія + перевизначене поле
const merged = { ...user, ...other };   // об'єднання двох об'єктів

Корисні методи

Object.keys(user);    // ["name", "age", "greet"]
Object.values(user);  // ["Ivan", 25, function]
Object.entries(user); // [["name", "Ivan"], ["age", 25], ...]
Object.assign({}, user, { age: 26 }); // те саме що spread

Масиви (коротко)

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

fruits.length;           // 3
fruits[0];               // "яблуко"
fruits.push("вишня");    // додати в кінець
fruits.pop();            // видалити з кінця
fruits.includes("слива"); // true

Повний довідник з усіма методами (map, filter, reduce, find, sort, що мутує, що ні) — у шпаргалці по масивах.

Часті помилки початківців

• == замість === — приводить до незрозумілих багів через коерцію типів. Завжди ===.
• var замість let/const — var має дивний function scope і hoisting. Просто забудь про нього.
• Зміна const-об'єкта — const arr = [1,2]; arr.push(3) працює! const блокує тільки перепризначення посилання.
• typeof null === "object" — null має тип object. Перевіряй явно: value === null.
• this в arrow-функціях — стрілочні функції не мають власного this. Якщо потрібен this контексту виклику — звичайна function.
• Hoisting змінних var — оголошення підіймається наверх, а присвоєння — ні. У let/const ця проблема вирішена через TDZ.
• Порівняння об'єктів через === — {a: 1} === {a: 1} → false. Об'єкти порівнюються за посиланням, не за вмістом.
• for...in на масивах — обходить prototype-властивості. Для масивів — for...of або forEach.