Шпаргалка JavaScript

Краткая выжимка по основам JavaScript: синтаксис, типы данных, коллекции, функции, классы, модули, работа с DOM и асинхронность. Каждый блок — с рабочими примерами и комментарием `// результат`. Держите под рукой, когда пишете код или готовитесь к собеседованию.

Переменные: let, const, var

const — для значений, которые не переприсваиваются (по умолчанию используйте именно его). let — когда значение меняется. var — устаревший способ, остаётся в legacy-коде; у него функциональная область видимости и всплытие (hoisting).

const PI = 3.14;     // переприсвоить нельзя
let count = 0;
count = count + 1;   // 1

const user = { name: "Аня" };
user.name = "Боря";  // OK: меняем содержимое, а не ссылку
console.log(user.name); // Боря

// const и let имеют блочную область видимости
if (true) {
  let x = 10;
}
// console.log(x); // ReferenceError: x is not defined

Типы данных и проверка typeof

В JavaScript есть примитивы: number, string, boolean, null, undefined, symbol, bigint — и объекты (включая массивы и функции). Оператор typeof возвращает строку с названием типа.

typeof 42;          // "number"
typeof "привет";    // "string"
typeof true;        // "boolean"
typeof undefined;   // "undefined"
typeof null;        // "object" (историческая ошибка языка)
typeof {};          // "object"
typeof [];          // "object"  (массив — тоже объект)
typeof function(){}; // "function"
typeof 10n;         // "bigint"

// Проверка массива — отдельно:
Array.isArray([1, 2]); // true

Операторы и сравнения: == vs ===

=== (строгое равенство) сравнивает и значение, и тип — используйте его по умолчанию. == (нестрогое) приводит типы перед сравнением и даёт неожиданные результаты.

5 === 5;     // true
5 === "5";   // false (разные типы)
5 == "5";    // true  (строка приведена к числу)

0 == false;     // true
"" == false;    // true
null == undefined; // true
null === undefined; // false
NaN === NaN;    // false (NaN не равен ничему)

// Логические и нулевого слияния
true && "да";   // "да"
false || "запасной"; // "запасной"
null ?? "по умолчанию"; // "по умолчанию" (?? срабатывает на null/undefined)

Строки и шаблонные литералы

Шаблонные литералы в обратных кавычках позволяют подставлять выражения через ${...} и писать многострочный текст. У строк много полезных методов.

const name = "Мир";
const greeting = `Привет, ${name}!`;
console.log(greeting); // Привет, Мир!

const sum = `2 + 2 = ${2 + 2}`; // "2 + 2 = 4"

const s = "JavaScript";
s.length;            // 10
s.toUpperCase();     // "JAVASCRIPT"
s.includes("Script");// true
s.slice(0, 4);       // "Java"
s.replace("Java", "Type"); // "TypeScript"
"  отступ  ".trim(); // "отступ"
"a,b,c".split(",");  // ["a", "b", "c"]

Массивы и основные методы

Массив — упорядоченный список. Часть методов изменяет исходный массив (push, splice), часть возвращает новый (map, filter, slice).

const nums = [3, 1, 2];
nums.push(4);        // добавить в конец -> [3, 1, 2, 4]
nums.pop();          // удалить с конца -> вернёт 4
nums.length;         // 3

[1, 2, 3].map(n => n * 2);       // [2, 4, 6]
[1, 2, 3, 4].filter(n => n % 2 === 0); // [2, 4]
[1, 2, 3, 4].reduce((a, b) => a + b, 0); // 10
[1, 2, 3].find(n => n > 1);       // 2
[1, 2, 3].includes(2);            // true
[3, 1, 2].sort((a, b) => a - b);  // [1, 2, 3]
[1, 2, 3].join("-");              // "1-2-3"

Объекты

Объект хранит данные в виде пар «ключ — значение». Доступ — через точку или квадратные скобки.

const user = {
  name: "Аня",
  age: 25,
  greet() { return `Я ${this.name}`; }
};

user.name;          // "Аня"
user["age"];        // 25
user.greet();       // "Я Аня"

user.city = "Москва"; // добавить свойство
delete user.age;      // удалить свойство

Object.keys(user);    // ["name", "greet", "city"]
Object.values({a: 1, b: 2}); // [1, 2]
Object.entries({a: 1});      // [["a", 1]]

// Короткая запись при совпадении имён
const x = 10, y = 20;
const point = { x, y }; // { x: 10, y: 20 }

Условия: if, switch, тернарный оператор

Ветвление: if/else для условий, switch для выбора по значению, тернарный оператор ?: для коротких выражений.

const age = 18;

if (age >= 18) {
  console.log("взрослый");
} else {
  console.log("несовершеннолетний");
}
// взрослый

// Тернарный оператор
const status = age >= 18 ? "можно" : "нельзя";
console.log(status); // можно

// switch
const day = 2;
switch (day) {
  case 1: console.log("Пн"); break;
  case 2: console.log("Вт"); break; // Вт
  default: console.log("другой");
}

Циклы: for, for..of, for..in, while

for — классический счётчик. for..of — по значениям массива/строки. for..in — по ключам объекта. while — пока условие истинно.

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

for (const item of ["a", "b"]) {
  console.log(item); // "a", "b"
}

const obj = { x: 1, y: 2 };
for (const key in obj) {
  console.log(key); // "x", "y"
}

let n = 3;
while (n > 0) {
  n--; // 2, 1, 0
}
console.log(n); // 0

Функции

Обычные функции, стрелочные, параметры по умолчанию, остаточные параметры (rest) и расширение (spread).

// Обычная функция
function add(a, b) {
  return a + b;
}
add(2, 3); // 5

// Стрелочная функция
const square = n => n * n;
square(4); // 16

// Параметры по умолчанию
function greet(name = "гость") {
  return `Привет, ${name}`;
}
greet();        // "Привет, гость"
greet("Аня");   // "Привет, Аня"

// rest: собрать аргументы в массив
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3); // 6

// spread: развернуть массив в аргументы
const arr = [1, 2, 3];
Math.max(...arr); // 3
const copy = [...arr, 4]; // [1, 2, 3, 4]

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

Деструктуризация распаковывает значения из массивов и объектов в отдельные переменные.

// Из массива
const [first, second] = [10, 20];
first;  // 10
second; // 20

// Из объекта
const { name, age } = { name: "Аня", age: 25 };
name; // "Аня"
age;  // 25

// Со значением по умолчанию и переименованием
const { city = "Москва", name: userName } = { name: "Боря" };
city;     // "Москва"
userName; // "Боря"

// В параметрах функции
function show({ title }) { return title; }
show({ title: "Книга" }); // "Книга"

Замыкания (кратко)

Замыкание — функция, которая «запоминает» переменные из области, где была создана, даже после её завершения. Часто применяют для приватного состояния.

function makeCounter() {
  let count = 0; // приватная переменная
  return function () {
    count++;
    return count;
  };
}

const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3
// count снаружи недоступна — она «замкнута» внутри

Классы

Классы — синтаксический сахар над прототипами: конструктор, методы, наследование через extends и super.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} издаёт звук`;
  }
}

class Dog extends Animal {
  speak() {
    return `${this.name} лает`;
  }
}

const dog = new Dog("Рекс");
dog.speak();     // "Рекс лает"
dog.name;        // "Рекс"
dog instanceof Animal; // true

Модули: import и export

Модули позволяют разбивать код на файлы. Бывает именованный экспорт (несколько на файл) и экспорт по умолчанию (один на файл).

// math.js — именованный экспорт
export const PI = 3.14;
export function add(a, b) { return a + b; }

// utils.js — экспорт по умолчанию
export default function greet(name) {
  return `Привет, ${name}`;
}

// app.js — импорт
import greet, { PI, add } from "./math.js";
import { add as plus } from "./math.js"; // переименование

add(2, 3); // 5
PI;        // 3.14

Работа с DOM (кратко)

DOM — представление HTML-страницы в виде объектов. Через JavaScript можно находить элементы, менять их и навешивать обработчики событий.

// Поиск элементов
const btn = document.querySelector("#run");      // первый по селектору
const items = document.querySelectorAll(".item"); // все подходящие

// Изменение содержимого и стилей
const box = document.querySelector(".box");
box.textContent = "Привет";
box.classList.add("active");
box.style.color = "red";

// Обработка событий
btn.addEventListener("click", () => {
  console.log("Кнопка нажата");
});

// Создание и вставка элемента
const li = document.createElement("li");
li.textContent = "Новый пункт";
document.querySelector("ul").append(li);

async / await (кратко)

Асинхронный код без «лесенки» колбэков. async-функция всегда возвращает промис; await ждёт результат промиса. Ошибки ловятся через try/catch.

async function loadUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    const data = await response.json();
    return data; // объект пользователя
  } catch (error) {
    console.error("Ошибка загрузки", error);
  }
}

// Вызов: async-функция возвращает промис
loadUser(1).then(user => {
  console.log(user);
});

// Несколько запросов параллельно
const [a, b] = await Promise.all([
  fetch("/a"),
  fetch("/b")
]); // дождётся обоих