Object.assign и spread: почему не копируются геттеры!

Object.assign и spread часто используют как быстрый способ скопировать объект, и на простых структурах всё действительно выглядит как прямое копирование значений.

const user = {
  name: "Анна"
};

const copy = Object.assign({}, user);

console.log(copy);

Пока объект состоит только из обычных полей, никакой разницы не видно.

Проблема появляется, когда в объекте есть геттеры.

const user = {
  firstName: "Анна",
  lastName: "Иванова",

  get fullName() {
    console.log("getter called");
    return `${this.firstName} ${this.lastName}`;
  }
};

fullName здесь не хранит значение. Это вычисляемое свойство, и оно выполняется в момент чтения.

Когда вызывается Object.assign, он проходит по собственным перечисляемым свойствам и читает каждое через [[Get]]. В этот момент геттер реально срабатывает.

const copy = Object.assign({}, user);

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

console.log(Object.getOwnPropertyDescriptor(copy, "fullName"));

В копии уже нет никакого геттера, там обычное значение, полученное в момент копирования.

{
  value: "Анна Иванова",
  writable: true,
  enumerable: true,
  configurable: true
}

В оригинальном объекте всё иначе — там сохраняется сам accessor, а не результат его выполнения.

console.log(Object.getOwnPropertyDescriptor(user, "fullName"));

{
  get: [Function],
  set: undefined,
  enumerable: true,
  configurable: true
}

spread работает ровно так же.

const copy = {
  ...user
};

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

Если нужно сохранить именно поведение объекта вместе с геттерами, используют копирование дескрипторов.

const copy = Object.defineProperties(
  {},
  Object.getOwnPropertyDescriptors(user)
);

В этом варианте ничего не вычисляется заранее — переносится описание свойств как есть. И Object.assign, и spread работают только с собственными перечисляемыми свойствами. Прототипные свойства в процесс не попадают.

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

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

📂 Напоминалка для работы с датами!

Например, new Date() создаёт объект даты, getFullYear() возвращает текущий год, а toISOString() помогает получить дату в удобном формате для API и хранения данных.

На картинке — основные методы Date, которые пригодятся для создания, изменения, форматирования и получения значений даты.

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

📣 JS Ready | #ресурс

Генерируем UUID без библиотек!

Очень частая задача: создать уникальный id для пользователя, заказа, файла или любой сущности.

Раньше для этого почти всегда тянули библиотеки типа uuid.

import { v4 as uuid } from 'uuid';

Хотя в современном JavaScript это уже есть нативно.

crypto.randomUUID()

Метод сразу возвращает криптографически стойкий UUID v4.

const id = crypto.randomUUID();

Результат выглядит так:
36b8f84d-df4e-4d49-b662-bcde71a8764f

Подходит для случаев, где нужен уникальный идентификатор: id сущностей, ключи записей, request/session id, временные идентификаторы.

Для секретных токенов (reset password, API tokens) лучше использовать crypto.getRandomValues() или crypto.randomBytes().

В браузере работает в secure context — HTTPS или localhost.

🔥 crypto.randomUUID() — простой способ получать уникальные id.

📣 JS Ready | #совет

AbortSignal.timeout() — встроенный способ задавать таймаут для fetch!

У fetch нет встроенного параметра для ограничения времени ожидания. Если сервер отвечает слишком долго или соединение зависает, запрос может оставаться активным неопределённое время.

Долгое время стандартным решением был AbortController в сочетании с setTimeout().

const controller = new AbortController();

const timeoutId = setTimeout(() => {
  controller.abort();
}, 5000);

try {
  const response = await fetch("/api/users", {
    signal: controller.signal
  });

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error(error);
} finally {
  clearTimeout(timeoutId);
}

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

С появлением AbortSignal.timeout() эта задача решается значительно проще.

const response = await fetch("/api/users", {
  signal: AbortSignal.timeout(5000)
});

const data = await response.json();
console.log(data);

В этом случае AbortSignal автоматически перейдёт в состояние aborted через указанное количество миллисекунд, после чего операция будет отменена.

Для типового случая этого обычно достаточно. Обработка ошибок при этом остаётся стандартной.

try {
  const response = await fetch("/api/users", {
    signal: AbortSignal.timeout(5000)
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return await response.json();
} catch (error) {
  if (error.name === "TimeoutError") {
    console.log("Время ожидания истекло");
  } else {
    console.error(error);
  }
}

Если запрос был прерван через AbortSignal.timeout(), ошибка обычно имеет имя TimeoutError. Если отмена произошла вручную через AbortController.abort(), чаще это будет AbortError. Это даёт возможность разделять сценарии таймаута и ручной отмены на уровне обработки ошибок.

Механизм работает не только с fetch. Любой API с поддержкой AbortSignal может использовать тот же подход.

await someAsyncOperation({
  signal: AbortSignal.timeout(10000)
});

Отдельно стоит упомянуть AbortSignal.any(), который позволяет объединять несколько сигналов отмены.

const controller = new AbortController();

const signal = AbortSignal.any([
  controller.signal,
  AbortSignal.timeout(5000)
]);

await fetch("/api/users", { signal });

В таком случае операция завершится при срабатывании первого сигнала — либо по ручной отмене, либо по таймауту.

🔥 Если в проекте до сих пор используется ручная реализация таймаута через AbortController и setTimeout, сейчас во многих случаях её можно упростить.

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

🤔 HTML5Book — большой учебник по HTML, CSS и JavaScript!

На сайте собрана большая база материалов по веб-разработке: подробные уроки по HTML5, CSS3, JavaScript и jQuery, а также удобные справочники по HTML- и CSS-свойствам. Здесь можно найти разбор тегов, форм, анимаций, Flexbox, Grid, DOM и других ключевых технологий фронтенда. Большое количество практических примеров, готовых решений и UI-эффектов для интерфейсов.

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

📣 JS Ready | #сайт

Берём первый успешный async-результат!

Иногда есть несколько источников данных: основной API, резервный endpoint или кеш. Нужно взять тот, который первым успешно ответит, а не просто завершится первым.

Для этого есть Promise.any().

Promise.any([main, backup, cache])

Он вернёт первый выполненный Promise и проигнорирует те, которые упали.

const response = await Promise.any([
  fetch('/api/main'),
  fetch('/api/backup')
]);

В отличие от Promise.race(), он не падает из-за первого reject.

Promise.race([...]) // первый завершился — и всё
Promise.any([...])  // ждёт первый успешный

Если упали все варианты, тогда будет AggregateError.

catch (err) {
  console.log(err.errors);
}

🔥 Полезно для резервных API, CDN-зеркал, запасных адресов сервера, загрузки конфигурации и любой логики, где важен первый успешный результат.

📣 JS Ready | #совет

Парсим URL без try...catch!

Очень часто нужно проверить, является ли строка корректным URL. Обычно для этого используют конструктор URL, но он выбрасывает исключение.

new URL(input);

Из-за этого приходится оборачивать код в try...catch.

Теперь в JavaScript появился URL.parse().

const url = URL.parse(input);

Если строка содержит корректный URL, метод вернёт объект URL.

console.log(url.hostname);

Если строка некорректна — вместо исключения вернётся null.

URL.parse('not a url');
// null

Это позволяет писать обычные проверки без лишней обработки ошибок.

🔥 URL.parse() — удобный способ валидировать и разбирать URL без try...catch, что особенно полезно при работе с пользовательским вводом, API и роутингом.

📣 JS Ready | #совет

📂 Напоминалка по массивам (Array)!

Например, push() добавляет элементы в массив, map() создаёт новый после обработки данных, а filter() помогает отбирать нужные значения.

На картинке — 18 практических задач с решениями по работе с массивами JavaScript: создание, изменение, поиск, удаление, сортировка, объединение, преобразование и обработка данных.

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

📣 JS Ready | #ресурс

delete: почему его осторожно используют в производительном коде!

delete — стандартный оператор JavaScript для удаления свойств объекта. На практике он встречается довольно часто: удалить временное поле, убрать ненужный параметр перед отправкой данных, очистить объект после выполнения операции.

Например:

const user = {
  name: "Анна",
  age: 25,
  role: "admin"
};

delete user.age;

console.log(user);
// { name: "Анна", role: "admin" }

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

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

JavaScript-движки вроде V8 оптимизируют работу с объектами, которые имеют одинаковую структуру. Когда объекты выглядят одинаково, движку проще хранить информацию о них и быстрее выполнять операции доступа к свойствам.

Например:

const users = [
  {
    id: 1,
    name: "Анна",
    age: 25
  },
  {
    id: 2,
    name: "Иван",
    age: 30
  },
  {
    id: 3,
    name: "Олег",
    age: 28
  }
];

Все объекты здесь имеют одинаковую форму: у каждого есть id, name и age. Такой подход часто встречается в реальных приложениях: списки пользователей, товары, сообщения, записи из базы данных.

Но если начать менять структуру объектов:

delete users[0].age;

один объект уже отличается от остальных.

Если сделать это массово:

delete users[0].age;
delete users[1].age;
delete users[2].age;

коллекция становится неоднородной.

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

Например:

const products = data.map(item => ({
  id: item.id,
  title: item.title,
  price: item.price
}));

Допустим, дальше нужно убрать цену у всех товаров:

for (const product of products) {
  delete product.price;
}

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

for (const product of products) {
  product.price = undefined;
}

Теперь поле остаётся частью объекта:

console.log("price" in products[0]);
// true

А после delete оно полностью исчезает:

delete products[0].price;

console.log("price" in products[0]);
// false

Разница такая: undefined — свойство осталось, изменилось только значение; delete — свойство удалено из объекта полностью. Но из этого не следует, что delete нужно запрещать, есть много случаев, где он является правильным решением.

Например, когда нужно удалить ключ из кэша:

const cache = {};

cache.users = data;

delete cache.users;

Здесь объект используется как хранилище ключей, и удаление свойства полностью соответствует задаче.

Если структура данных постоянно меняется, часто используют Map:

const cache = new Map();

cache.set("users", data);

cache.delete("users");

Map хорошо подходит для динамических коллекций: кэшей, словарей, временных хранилищ и таблиц соответствий, где ключи регулярно добавляются и удаляются.

Ещё один момент, который часто вызывает вопросы: delete удаляет только свойство объекта, но не сам объект из памяти.

Например:

const user = {
  settings: {
    theme: "dark"
  }
};

const settings = user.settings;

delete user.settings;

console.log(settings.theme);
// dark

После удаления user.settings объект всё ещё существует, потому что переменная settings продолжает хранить на него ссылку. То есть delete убирает связь между объектом и свойством, но не уничтожает данные, на которые ещё кто-то ссылается.

🔥 Если вы работаете с большими массивами однотипных объектов, большим количеством данных или производительными участками кода, стоит помнить: частое изменение структуры объектов может влиять на оптимизации JavaScript-движка.

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

Клонирование объектов без JSON.stringify!

Очень часто для копии объекта используют старый приём:

const copy = JSON.parse(JSON.stringify(obj));

Но это подходит только для простых JSON-данных и может неожиданно менять структуру объекта.

В современном JavaScript есть нативный способ — structuredClone():

const copy = structuredClone(original);

Он создаёт полноценную глубокую копию, сохраняя типы данных.

const user = {
  created: new Date(),
  roles: new Set(['admin'])
};

const clone = structuredClone(user);

После копирования остаются настоящие Date и Set, а не преобразованные значения.

Также structuredClone() умеет работать с циклическими ссылками:

const obj = {};
obj.self = obj;

const copy = structuredClone(obj);

🔥 structuredClone() — замена JSON-клонированию для глубоких копий объектов без сторонних библиотек и скрытых потерь данных.

📣 JS Ready | #совет

💅 Полезная статья попалась на Хабре: «Что такое API? Простыми словами для начинающих»!

В этой статье:
• Простым языком объясняется, что такое API и зачем он нужен в современных приложениях;
• На примере маркетплейса показывается, как программы обмениваются данными между собой;
• Разбирается разница между UI, frontend, backend и API;
• Показывается, как работают endpoint’ы, JSON и HTTP-запросы;

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

📣 JS Ready | #статья

Шпаргалка по циклам в JavaScript!

Например, for подходит для ситуаций, когда заранее известно количество итераций, а for...of является способом перебора значений массивов, строк и других итерируемых объектов.

На картинке основные конструкции циклов: классический for, циклы с предварительной и постусловной проверкой while и do...while, перебор коллекций через for...of и for...in, метод массива forEach(), управление выполнением, а также примеры вложенных циклов.

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

📣 JS Ready | #ресурс

Разбираем, как сделать функцию ограничения значения в диапазоне!

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

Обычно такие проверки пишут через несколько if, но одинаковая логика быстро начинает повторяться. Для таких задач удобно использовать небольшой паттерн clamp() — он оставляет значение внутри заданного диапазона.

Создаём функцию clamp

function clamp(value, min, max) {
  return Math.min(
    Math.max(value, min),
    max
  );
}

clamp() принимает три значения: само число, минимальную и максимальную границу.

Если значение меньше min, вернётся минимальная граница. Если больше max — максимальная. Во всех остальных случаях вернётся исходное значение. Проверяем работу функции

console.log(clamp(150, 0, 100));
// 100

console.log(clamp(-20, 0, 100));
// 0

console.log(clamp(50, 0, 100));
// 50

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

Ограничиваем прогресс загрузки

const serverProgress = 135;

const progress = clamp(
  serverProgress,
  0,
  100
);

console.log(progress);
// 100

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

Ограничиваем пользовательский ввод

const userLimit = Number(input.value);

const limit = clamp(
  userLimit,
  10,
  100
);

fetch(`/api/items?limit=${limit}`);

Например, пользователь может ввести 10000 или отрицательное число. Перед отправкой запроса значение приводится к допустимому диапазону:

10 <= limit <= 100

Это помогает держать бизнес-логику предсказуемой и не размазывать проверки по всему коду.

Ограничиваем координаты элемента

const x = clamp(
  mouseX,
  0,
  containerWidth
);

const y = clamp(
  mouseY,
  0,
  containerHeight
);

Такой вариант полезен для drag-and-drop, игровых механик или любых интерфейсов, где объект не должен выходить за пределы контейнера. Вместо постоянных проверок границ используется одна универсальная функция.

Добавляем проверку некорректного диапазона

function clamp(value, min, max) {
  if (min > max) {
    throw new Error(
      "min cannot be greater than max"
    );
  }

  return Math.min(
    Math.max(value, min),
    max
  );
}

Если перепутать границы:

clamp(50, 100, 0);

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

🔥 clamp() — небольшая функция, но она хорошо подходит для большого количества задач. Вместо повторяющихся условий с if появляется единый способ работы с диапазонами, который проще поддерживать и использовать в разных частях приложения.

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

📂 Напоминалка о внутреннем процессе загрузки веб-страницы в браузере!

Например, после ввода URL браузер выполняет цепочку операций: разрешение DNS, установка HTTPS-соединения, отправка HTTP-запроса, получение ресурсов и запуск механизма рендеринга.

На картинке — полный жизненный цикл обработки страницы: от сетевого взаимодействия до построения DOM/CSSOM, выполнения JavaScript Engine и формирования итогового интерфейса.

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

📣 JS Ready | #ресурс

Temporal API — замена Date в JavaScript!

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

Temporal — это новый API, который предлагает более предсказуемую модель работы с датами и временем: отдельные типы для даты, времени, момента во времени и часовых поясов.

Создадим объект календарной даты без привязки к времени:

const birthday = Temporal.PlainDate.from(
  "1995-08-15"
);

console.log(birthday);
// 1995-08-15

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

Работа с датами становится более очевидной:

const nextWeek = birthday.add({
  days: 7
});

console.log(nextWeek);
// 1995-08-22

В отличие от Date, объекты Temporal являются иммутабельными: методы не изменяют исходное значение, а возвращают новый объект.

Для точного момента времени используется другой тип:

const now = Temporal.Now.instant();

console.log(now);
// 2026-07-15T12:30:45.123Z

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

Часовые пояса теперь являются отдельной частью модели:

const zoned = now.toZonedDateTimeISO(
  "Europe/Warsaw"
);

console.log(zoned);

Вместо ручных вычислений смещений Temporal явно связывает момент времени с конкретной временной зоной.

Можно безопасно получать локальные компоненты даты:

console.log(zoned.hour);
console.log(zoned.day);
console.log(zoned.month);

Это устраняет большое количество ошибок, которые возникают при использовании getHours(), getDate() и ручной работе с UTC.

Ещё один практический сценарий — сравнение дат:

const start = Temporal.PlainDate.from(
  "2026-01-01"
);

const end = Temporal.PlainDate.from(
  "2026-12-31"
);

Вместо сложных преобразований в миллисекунды используется понятное сравнение:

console.log(
  Temporal.PlainDate.compare(start, end)
);
// -1

Temporal разделяет разные сущности времени, поэтому код становится понятнее: дата, время, момент и часовой пояс больше не смешиваются в одном объекте.

🔥 Temporal — это переработанная модель работы со временем, которая решает основные проблемы старого Date: мутабельность, часовые пояса и сложные преобразования.

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

Получаем размер данных в байтах без ручных подсчётов!

Когда нужно узнать размер строки или подготовленных данных, многие используют:

str.length

Но length считает количество UTF-16 кодовых единиц, а не размер данных в байтах.

В JavaScript есть нативный способ — Blob.

const size = new Blob([data]).size;

Он показывает размер содержимого Blob в байтах.

Например:

new Blob(['😀']).size;
// 4

'😀'.length;
// 2

Emoji занимает 2 UTF-16 code units, но в Blob превращается в 4 байта UTF-8.

Полезно перед загрузкой файлов, отправкой данных через API, проверкой лимитов и работой с бинарными данными.

Для файлов ещё проще:

file.size;

🔥 Blob.size — простой нативный способ узнать размер данных в байтах без сторонних библиотек.

📣 JS Ready | #совет

📂 Напоминалка для работы с авторизацией в Web-приложениях!

Например, cookies позволяют браузеру хранить небольшие данные на стороне клиента, а sessions переносят хранение пользовательского состояния на сервер, оставляя у клиента только идентификатор сессии.

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

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

📣 JS Ready | #ресурс

📂 Напоминалка по работе HTTPS!

Например, TLS-сертификат подтверждает подлинность сервера, а обмен ключами позволяет безопасно создать сессионный ключ для дальнейшего шифрования данных.

На картинке — основные этапы работы HTTPS: TCP handshake, проверка сертификата через Certificate Authority, обмен ключами, создание защищённой сессии, симметричное шифрование и безопасная передача данных между клиентом и сервером.

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

📣 JS Ready | #ресурс