LearnJS — русскоязычный учебник, от базовых понятий до продвинутых тем чтобы освоить JS!

Удобные объяснения, примеры кода, интерактивные задания помогут прокачать навыки как новичкам, так и опытным разработчикам.

📌 Оставляю ссылочку: learnjs.ru

📣 JS Ready | #сайт

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

📌 Ссылочка: jex.im/regulex

📣 JS Ready | #сайт

Nullish coalescing (??) — отличие от логического OR (||)!

В JavaScript операторы || и ?? решают похожую задачу — выбор значения по умолчанию, но работают с разной моделью проверки. Это особенно важно при обработке конфигураций, параметров функций и данных из внешних источников, где 0, false и пустая строка могут быть корректными значениями.

Оператор || использует проверку на truthy/falsy, поэтому заменяет любое значение, которое JavaScript считает ложным.

const limit = 0;

console.log(
    limit || 100
);

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

Оператор ?? использует другую проверку: запасное значение применяется только при null или undefined.

const limit = 0;

console.log(
    limit ?? 100
);

В этом случае результатом будет 0, потому что значение существует и не является null или undefined.

Разница особенно заметна при обработке объектов настроек. Частая ошибка — использовать || там, где поле может содержать валидное falsy-значение.

const options = {
    enabled: false
};

const enabled =
    options.enabled || true;

После выполнения переменная получит true, хотя исходное значение явно отключало параметр.

При использовании ?? сохраняется исходная логика:

const enabled =
    options.enabled ?? true;

Теперь значение false не будет заменено значением по умолчанию.

Оператор ?? часто используется вместе с optional chaining, когда структура объекта заранее неизвестна. Такой вариант позволяет безопасно получать вложенные значения без дополнительных проверок на каждом уровне.

const timeout =
    config?.api?.timeout ?? 5000;

Если объект config, поле api или свойство timeout отсутствуют, будет использовано значение 5000. При этом существующее значение 0 останется без изменений.

Есть важный синтаксический момент: JavaScript запрещает смешивать ?? с логическими операторами || и && без явных скобок. Следующее выражение приведёт к ошибке парсинга:

a ?? b || c;

Разработчик должен явно определить порядок вычисления, чтобы избежать неоднозначности.

(a ?? b) || c;

или таким образом:

a ?? (b || c);

Такой синтаксический запрет сделан намеренно: выражения с несколькими операторами разных типов становятся сложными для анализа даже при небольшом изменении логики.

При работе с API, формами и пользовательским вводом ?? позволяет отделить отсутствие значения от значения, которое просто является falsy. Например, пустая строка может быть частью бизнес-логики и не должна автоматически заменяться.

const title = "";

const result =
    title ?? "Untitled";

В данном случае сохраняется пустая строка, потому что она является переданным значением, а не отсутствием данных.

🔥 ?? стоит использовать там, где требуется различать null/undefined и остальные значения. В отличие от ||, он не изменяет корректные falsy-данные и делает логику работы со значениями по умолчанию более точной.

📣 JS Ready | #практика

📂 Напоминалка по this в JavaScript!

Например, в глобальной области this зависит от окружения выполнения, в методе объекта — ссылается на сам объект, а в обычной функции его значение определяется способом вызова.

На картинке — все основные случаи работы this: глобальный контекст, методы объектов, обычные функции, стрелочные функции, обработчики событий, а также управление контекстом через call(), apply() и bind().

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

📂 Напоминалка по форматированию длительности!

Intl.DurationFormat позволяет красиво выводить интервалы времени без ручной сборки строк: годы, месяцы, дни, часы, минуты и секунды автоматически форматируются с учетом языка и правил локализации.

На картинке — основные варианты использования Intl.DurationFormat, разные стили отображения (long, short, narrow, digital) и примеры форматирования длительности для разных локалей.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

Передавайте AbortSignal через всю цепочку вызовов!

Большинство разработчиков используют AbortController только рядом с fetch().

const controller = new AbortController();

fetch('/users', {
  signal: controller.signal
});

Но намного полезнее сделать AbortSignal частью API ваших функций.

async function loadUser(id, signal) {
  const response = await fetch(
    `/users/${id}`,
    { signal }
  );

  return response.json();
}

Теперь любая операция выше по стеку может отменить всю цепочку асинхронных вызовов.

const controller = new AbortController();

const user = loadUser(
  42,
  controller.signal
);

// ...

controller.abort();

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

🔥 AbortSignal делает API функций композиционным и позволяет отменять сложные операции одной командой.

📣 JS Ready | #совет

TextEncoder и TextDecoder — работа с байтами и кодировками!

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

Внутри JavaScript строки используют UTF-16 кодовые единицы, а многие браузерные API работают с бинарными данными (Uint8Array, ArrayBuffer). Для преобразования текста в байты и обратного восстановления строки используются встроенные TextEncoder и TextDecoder.

TextEncoder нужен, когда строку необходимо подготовить для бинарного API. Он кодирует текст в UTF-8 и возвращает объект Uint8Array с последовательностью байтов. Пример:

const encoder = new TextEncoder();

const bytes = encoder.encode(
  'Hello JavaScript'
);

console.log(bytes);

После вызова encode() получается массив беззнаковых 8-битных значений. Каждый элемент представляет один байт UTF-8 представления строки.

Размер результата зависит от содержимого текста. Символы ASCII занимают один байт, а символы других языков могут занимать несколько байтов. Например:

const encoder = new TextEncoder();

const bytes = encoder.encode(
  'Привет'
);

console.log(bytes.length);

bytes.length показывает количество байтов после UTF-8 кодирования. Это значение не равно количеству символов в строке.

Обратное преобразование выполняет TextDecoder:

const decoder = new TextDecoder();

const text = decoder.decode(
  bytes
);

console.log(text);

decode() принимает бинарные данные (Uint8Array, ArrayBuffer) и преобразует их обратно в обычную JavaScript-строку.

По умолчанию используется UTF-8. Если данные приходят из старых систем или файлов с другой кодировкой, можно указать необходимый формат:

const decoder = new TextDecoder(
  'windows-1251'
);

const text = decoder.decode(
  data
);

console.log(text);

Такой вариант часто встречается при работе с устаревшими файлами или внешними системами, которые используют кодировки, отличные от UTF-8.

Один из практических примеров — чтение текстовых файлов через File API:

const file = input.files[0];

const buffer = await file.arrayBuffer();

const decoder = new TextDecoder();

const text = decoder.decode(
  buffer
);

console.log(text);

Метод arrayBuffer() возвращает содержимое файла в виде бинарного буфера. После этого TextDecoder преобразует полученные байты обратно в текст.

TextEncoder также часто используется вместе с Web Crypto API. Криптографические методы работают не со строками, а с бинарными данными, поэтому перед вычислением хэша текст необходимо сначала закодировать:

const encoder = new TextEncoder();

const data = encoder.encode(
  'password'
);

const hash = await crypto.subtle.digest(
  'SHA-256',
  data
);

console.log(
  new Uint8Array(hash)
);

В этом примере строка преобразуется в UTF-8 байты, после чего передаётся алгоритму SHA-256 для вычисления хэш-значения.

Отдельно стоит помнить о разнице между длиной строки и размером её бинарного представления:

const text = 'Привет';

console.log(text.length);

const bytes = new TextEncoder()
  .encode(text);

console.log(bytes.length);

text.length показывает количество UTF-16 кодовых единиц, а bytes.length — количество байтов в UTF-8 представлении. Эти значения могут отличаться.

🔥 TextEncoder и TextDecoder используются во многих Web API: при работе с файлами, потоками данных, сетевыми протоколами и криптографическими операциями. Они позволяют напрямую преобразовывать текстовое представление в бинарное и обратно без сторонних библиотек.

📣 JS Ready | #практика

Крутая статья лежит на Хабре: «Пишем Pac-Man на чистом JavaScript: ностальгия, “Пиксели” и туман войны»!

В этой статье:
• Разбирается создание собственной версии культовой игры Pac-Man с нуля без игровых движков и сторонних библиотек;
• Показывается реализация игровой логики, движения персонажа, поведения призраков и системы столкновений на чистом JavaScript;
• Подробно описывается добавление необычной механики «тумана войны», адаптация управления под ПК и мобильные устройства, а также архитектура проекта.

🔊 Продолжайте читать на Habr!

📣 JS Ready | #статья

📂 Шпаргалка по API запросам в JavaScript!

Например, fetch() используется для современных HTTP-запросов через Promise, Axios упрощает работу с API в браузере и Node.js, а XMLHttpRequest и jQuery AJAX чаще встречаются в старых проектах.

На картинке — основные способы отправки HTTP-запросов в JavaScript: XMLHttpRequest, Fetch API, Axios и jQuery AJAX, а также примеры получения данных с сервера через REST API.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

Math.trunc() — когда нужно убрать дробную часть числа без округления!

В JavaScript есть несколько способов получить целое число из значения с дробной частью. Часто для этого используют parseInt(), но важно понимать, что этот метод создан в первую очередь для разбора строк, а не для математических операций.

Например, parseInt() может извлечь число из строки, если после значения есть дополнительные символы:

parseInt("120px");
// 120

parseInt("50items");
// 50

Такое поведение удобно при обработке данных из строк, например CSS-значений или пользовательского ввода.

Но когда у нас уже есть число и нужно только удалить дробную часть, лучше использовать Math.trunc().

Math.trunc(12.99);
// 12

Math.trunc(45.78);
// 45

Math.trunc() не округляет число. Метод просто отбрасывает часть после десятичного разделителя и возвращает целое значение.

Важно не путать Math.trunc() с другими методами округления. Они решают разные задачи и могут давать разные результаты.

Math.trunc(-12.99);
// -12

Math.floor(-12.99);
// -13

Math.ceil(-12.99);
// -12

Math.round(-12.99);
// -13

Math.floor() всегда округляет в меньшую сторону, Math.ceil() — в большую, а Math.round() выбирает ближайшее значение. Math.trunc() не смотрит на значение дробной части — он просто удаляет её.

Один из практических случаев — расчёт процентов, когда результат должен быть целым числом без округления. Например, есть количество выполненных задач и общее количество задач:

const completed = 37;
const total = 120;

const progress = Math.trunc(
  (completed / total) * 100
);

console.log(progress);
// 30

Если использовать Math.round(), результат будет округлён:

const progress = Math.round(
  (completed / total) * 100
);

console.log(progress);
// 31

В интерфейсах, статистике и отчётах иногда важно показывать именно достигнутое значение, а не округлённое.

Ещё один пример — работа с координатами или значениями, которые должны быть целыми.

const x = 125.87;
const y = 240.42;

const position = {
  x: Math.trunc(x),
  y: Math.trunc(y)
};

console.log(position);

// {
//   x: 125,
//   y: 240
// }

Такой подход может использоваться при работе с координатами элементов, индексами массивов, количеством объектов или другими значениями, где дробная часть не имеет смысла.

При этом Math.trunc() не заменяет parseInt() полностью. У этих методов разные задачи. parseInt() используется, когда нужно получить число из строки:

const value = parseInt("300px");

console.log(value);
// 300

А Math.trunc() используется, когда значение уже является числом:

const value = Math.trunc(300.75);

console.log(value);
// 300

Если передать в Math.trunc() строку, которая не является обычным числом, результатом будет NaN:

Math.trunc("300px");
// NaN

🔥 Math.trunc() — это простой способ явно показать намерение: нужно не округлить число и не извлечь значение из строки, а именно убрать дробную часть. В коде с вычислениями это делает поведение более предсказуемым.

📣 JS Ready | #практика

📂 Напоминалка по URLSearchParams!

Например, вместо ручного парсинга URL через split() или регулярные выражения можно использовать встроенный API URLSearchParams, который позволяет удобно получать, изменять и добавлять query-параметры.

На картинке — работа с параметрами запроса в URL: как получить значения через .get(), изменить существующий параметр через .set() и добавить новый через .append().

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

📂 Напоминалка по HTTP/2 и HTTP/3!

Например HTTP/2 работает поверх TCP: потеря одного пакета может задержать передачу данных сразу для всех потоков, а HTTP/3 использует QUIC (UDP), где потоки независимы, поэтому потеря пакета влияет только на один из них.

На картинке — наглядное сравнение HTTP/2 и HTTP/3 с их основными отличиями.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

📂 Шпаргалка: что происходит, когда вводишь URL в браузере!

Например, когда открываешь https://example.com, браузер сначала проверяет DNS-кэш и получает IP-адрес сервера, затем устанавливает защищённое HTTPS-соединение, отправляет HTTP-запрос и получает ответ с HTML, CSS и JavaScript.

На картинке показан полный путь загрузки веб-страницы:
DNS resolution — TCP/TLS handshake — HTTP request/response — обработка HTML/CSS/JS — построение DOM и CSSOM — рендеринг страницы в браузере.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

performance.now() — измерение времени выполнения кода!

performance.now() — это Web API для измерения продолжительности выполнения операций с высоким временным разрешением. В отличие от Date.now(), он использует монотонные часы, поэтому отлично подходит для профилирования и измерения производительности.

Метод возвращает DOMHighResTimeStamp — количество миллисекунд, прошедших с момента performance.timeOrigin. В некоторых браузерах разрешение таймера может искусственно снижаться по соображениям безопасности.

Быстрый замер выполнения кода:

const start = performance.now();

doHeavyWork();

console.log(`Время выполнения: ${performance.now() - start} ms`);

Такой способ отлично подходит для поиска узких мест в синхронном коде.

Для удобства можно сделать универсальную функцию:

function measure(fn) {
  const start = performance.now();
  const result = fn();

  return {
    result,
    duration: performance.now() - start,
  };
}

console.log(measure(runA));
console.log(measure(runB));

Не делайте выводы по одному запуску. На результат влияют JIT-компиляция, сборщик мусора, загрузка процессора и фоновые процессы браузера, поэтому сравнивать код лучше по серии измерений после прогрева.

performance.now() полезен и для асинхронных операций:

async function measureAsync(fn) {
  const start = performance.now();
  const result = await fn();

  return {
    result,
    duration: performance.now() - start,
  };
}

measureAsync(fetchData)
  .then(({ duration }) => console.log(`${duration} ms`));

В этом случае измеряется общее время выполнения операции, включая ожидание Promise, сетевых запросов и таймеров.

API также позволяет быстро оценить продолжительность синхронного участка:

const start = performance.now();

renderLargeList();

const duration = performance.now() - start;

if (duration > 16.7) {
  console.warn("Синхронный код выполняется слишком долго");
}

Такой замер обычно не включает последующие этапы отрисовки (layout, paint, compositing), хотя принудительный синхронный layout, например при чтении offsetWidth или getBoundingClientRect(), попадет в результат.

При 60 Hz на кадр приходится около 16.7 ms, при 120 Hz — около 8.3 ms. Это бюджет всего кадра, а не только JavaScript, поэтому синхронный код должен занимать лишь часть этого времени.

Главное отличие от Date.now():

console.log(Date.now());        // системное время
console.log(performance.now()); // монотонное время

Date.now() зависит от системных часов, а performance.now() — нет. Именно поэтому для измерения производительности используют performance.now().

🔥 performance.now() — один из самых полезных инструментов для ручного профилирования и анализа производительности JavaScript.

📣 JS Ready | #практика