JS
ДЖСПРАКТИКА СПРАВОЧНИК

Переменные и Константы: Глубокое погружение

Переменные — это именованные хранилища для данных. В JavaScript история переменных прошла через три этапа: var, let и const. Понимание разницы между ними — это первый вопрос на любом собеседовании.

1. let — современный стандарт

Появился в 2015 году (ES6). Главная особенность — блочная область видимости. Если вы объявите переменную внутри if или for, она не будет видна снаружи. Это избавляет от сотен багов, связанных со случайным переиспользованием имен.

if (true) {
  let message = "Я внутри";
}
console.log(message); // Ошибка! Переменная погибла внутри блока

2. const — защита от дурака

Константы работают так же, как let, но их нельзя переназначить. Это не значит, что значение неизменно (иммутабельно). Если в константе лежит объект или массив, вы можете менять его внутренности. const лишь гарантирует, что в этой переменной всегда будет лежать одна и та же ссылка.

const user = { name: "Ivan" };
user.name = "Alex"; // Можно!
user = { name: "Petr" }; // Ошибка! Нельзя менять саму коробку

3. var — призрак прошлого

Старый способ объявления. У var нет блочной области видимости, и он подвержен хоистингу (всплытию). Это значит, что переменная "всплывает" в начало кода и может быть использована до того, как вы её объявили. В современном коде var — это признак плохого тона.

Правила именования (Best Practices)

  • Используйте camelCase для обычных переменных (userName, totalPrice).
  • Используйте UPPER_SNAKE_CASE для констант, значения которых известны до запуска кода (COLOR_RED, API_KEY).
  • Имена должны быть существительными. Переменная — это вещь.
  • Избегайте сокращений вроде a, b, val. Через месяц вы сами не поймете, что там лежит.

Типы данных: От примитивов до объектов

JavaScript — это язык с динамической типизацией. Это значит, что одна и та же переменная может сначала хранить число, а потом строку. Но сами данные всегда имеют четкий тип.

Семь примитивных типов

Number: Целые и числа с плавающей точкой. Максимальное безопасное число: 2^53 - 1.

BigInt: Для работы с числами любой длины (добавляется n в конце).

String: Строки. В JS нет типа "символ", только строки.

Boolean: true и false.

Null: Отдельный тип, означающий "ничего" или "пусто".

Undefined: Означает, что значение не было присвоено.

Symbol: Уникальные идентификаторы для свойств объектов.

Объектный тип

Все остальные данные — это объекты. Массивы, функции, даты — всё это частные случаи объектов. Объекты передаются по ссылке, а не по значению. Это фундаментальное отличие, которое нужно осознать как можно раньше.

Странности JavaScript

typeof null возвращает "object". Это официально признанная ошибка в языке, которую нельзя исправить, чтобы не сломать старые сайты. Просто запомните это.

NaN (Not a Number) имеет тип "number". Да, "не число" — это число. Логика JS иногда беспощадна.

Логика и Условия: Искусство принятия решений

Условия — это развилки на дороге вашего кода. Без них программа была бы просто списком команд, выполняющихся сверху вниз. Логика делает код «умным».

1. Операторы сравнения

Результатом любого сравнения всегда является Boolean (true или false).

  • === — Строгое равенство (проверяет и значение, и тип). Всегда используйте его!
  • !== — Строгое неравенство.
  • == — Нестрогое равенство (пытается привести типы, опасно!).
  • > , < , >= , <= — Больше, меньше и их вариации.

2. Логические операторы (&&, ||, !)

Они позволяют комбинировать несколько условий в одно сложное.

&& (И) — Ищет первую ложь

Возвращает true, только если ВСЕ условия верны. Если наткнется на false — сразу вернет его.

|| (ИЛИ) — Ищет первую истину

Возвращает true, если хотя бы ОДНО условие верно. Если наткнется на true — сразу вернет его.

! (НЕ) — Инвертор

Превращает true в false и наоборот. Двойное отрицание !!value — быстрый способ превратить любое значение в Boolean.

Конструкция switch

Когда условий слишком много (например, выбор дня недели), if/else превращается в кашу. В таких случаях лучше использовать switch.

switch (browser) {
  case 'Chrome':
    console.log('Ок');
    break;
  case 'Firefox':
    console.log('Тоже ок');
    break;
  default:
    console.log('Мы такое не знаем');
}

Циклы: Роботизация рутины

Циклы позволяют выполнять один и тот же блок кода многократно. Это то, что компьютеры делают лучше людей — монотонная работа без ошибок.

Цикл for

Классический цикл со счетчиком. Идеален, когда вы точно знаете, сколько раз нужно повторить действие.

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

1. Начало (i=0) -> 2. Условие (i<5) -> 3. Тело -> 4. Шаг (i++)

Цикл while

Цикл с условием. Работает, пока условие истинно. Опасен возможностью создания бесконечного цикла.

while (condition) {
  // код
}

Управление циклом

break — Немедленно прерывает цикл и выходит из него.

continue — Прерывает текущую итерацию и переходит к следующей.

Массивы: Энциклопедия методов

Массивы в JavaScript — это не просто списки, это мощные объекты с огромным количеством встроенных инструментов для обработки данных.

Основные методы (Шпаргалка)

Добавление/Удаление

  • push(...items) — в конец
  • pop() — извлечь с конца
  • shift() — извлечь с начала
  • unshift(...items) — в начало

Поиск

  • indexOf(item) — найти индекс
  • includes(item) — проверить наличие
  • find(callback) — найти первый элемент

Методы перебора

.map(callback)

Создает новый массив, трансформируя каждый элемент. Оригинал не меняется.

const names = ['ivan', 'alex'];
const upper = names.map(n => n.toUpperCase());

.filter(callback)

Отфильтровывает элементы по условию. Возвращает новый массив.

const nums = [1, 10, 5, 20];
const big = nums.filter(n => n > 10);

Объекты и Контекст: Моделирование реальности

Объекты — это фундамент JavaScript. Почти всё в этом языке является объектом. Это коллекции данных в формате ключ: значение.

1. Ссылочный тип данных

В отличие от примитивов, объекты передаются по ссылке. Если вы скопируете объект в другую переменную, вы не создадите новый объект, а просто дадите старому второе имя.

const a = { name: 'Ivan' };
const b = a;
b.name = 'Alex';
console.log(a.name); // 'Alex' — оригинал изменился!

2. Ключевое слово this

this — это способ объекта обратиться к самому себе. Значение this вычисляется в момент вызова функции.

  • В методе объекта this — это сам объект.
  • В обычной функции (не в строгом режиме) this — это window.
  • У стрелочных функций нет своего this, они берут его снаружи.

Функции и Замыкания: Магия памяти

Функции в JS — это не просто блоки кода, а объекты, которые можно передавать, возвращать и наделять памятью.

Замыкание (Closure)

Это способность функции помнить переменные из места своего рождения. Даже если внешняя функция уже отработала, внутренняя функция сохраняет доступ к её переменным.

function createCounter() {
  let count = 0;
  return () => ++count;
}
const counter = createCounter();
console.log(counter()); // 1

ООП и Классы: Инженерия кода

Объектно-ориентированное программирование помогает структурировать хаос больших приложений.

Инкапсуляция

Скрытие внутренней логики. Используйте #privateProperty для защиты данных.

Наследование

Создание классов на базе других через extends и super().

Регулярные выражения: Поиск по шаблону

RegExp — это отдельный язык внутри JavaScript для работы со строками.

const str = "Я люблю JS";
console.log(str.search(/JS/i)); // 8

DOM: Управление браузером

Document Object Model — это интерфейс, который позволяет JS изменять структуру, стили и содержимое страницы.

const div = document.createElement('div');
div.classList.add('box');
document.body.appendChild(div);

Асинхронность: Жизнь без блокировок

JavaScript однопоточен, но асинхронность позволяет ему выполнять сетевые запросы и таймеры, не замораживая страницу.

async function start() {
  const data = await fetch('url');
  const json = await data.json();
}