JavaScript 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 | #практика

Пачку офферов заказывали? О всех трудоустройствах через ИИ-ассистента Софи ребята узнают от пользователей. И какой же кайф, когда они делятся своими историями. Вот так в чате узнали сразу о трех новых офферах: • Кейс Сергея - 2 недели в Софи и 2 оффера. • Кейс Елены - 1 неделя в Софи и оффер спустя 10 лет перерыва в работе. Елене 52 года. • Кейс Юлии - 1 месяц в Софи, свитчер из финансового аналитика в разработчика SQL. И еще один оффер🎉 Искренние поздравления ребятам и удачи им на новой работе! В следующий раз доступ в Софи откроется уже 21 июля. Если хочешь получить 3 дня бесплатного доступа - подписывайся на этот канал, все анонсы будут там.

📂 Напоминалка о внутреннем процессе загрузки веб-страницы в браузере! Например, после ввода URL браузер выполняет цепочку операций: разрешение DNS, установка HTTPS-соединения, отправка HTTP-запроса, получение ресурсов и запуск механизма рендеринга. На картинке — полный жизненный цикл обработки страницы: от сетевого взаимодействия до построения DOM/CSSOM, выполнения JavaScript Engine и формирования итогового интерфейса. Сохрани, чтобы не потерять! 📣 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 | #практика

1000+ свежих IT-вакансий каждый месяц в одном месте 🤘 Пока другие листают hh — мы ищем вакансии по всему рынку: каналы, сайты компаний, стартапы и закрытые источники. IT Россия IT СНГ Стажировки Digital Международка Удалёнка Python Бигтех Дизайн QA Джунам Frontend Аналитика Стартапы за рубежом DevOps Не с HH Автоотклики

Шпаргалка по циклам в JavaScript! Например, for подходит для ситуаций, когда заранее известно количество итераций, а for...of является способом перебора значений массивов, строк и других итерируемых объектов. На картинке основные конструкции циклов: классический for, циклы с предварительной и постусловной проверкой while и do...while, перебор коллекций через for...of и for...in, метод массива forEach(), управление выполнением, а также примеры вложенных циклов. Сохрани, чтобы не потерять! 📣 JS Ready | #ресурс

💅 Полезная статья попалась на Хабре: «Что такое API? Простыми словами для начинающих»! В этой статье: • Простым языком объясняется, что такое API и зачем он нужен в современных приложениях; • На примере маркетплейса показывается, как программы обмениваются данными между собой; • Разбирается разница между UI, frontend, backend и API; • Показывается, как работают endpoint’ы, JSON и HTTP-запросы; 🔊 Продолжай читать на Habr! 📣 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 | #совет

❤️‍🔥"Это разъ*бный сетап, бро!" 😤 Так сказал мой друг из Африки, когда увидел этот стол) Не знаю уж че за сетап, меня зовут Саша и качественную необычную мебель из натурального дерева я делаю уже больше 12-ти лет, столько же занимаюсь и темой здоровья. Когда я услышал, что до 10% смертности связано с сидячим образом жизни, меня это поразило и я задался целью делать максимально функциональные и полезные рабочие пространства, ибо геморрой в 30 это конечно довольно нишево, но все же сомнительно 😂 Ну а собрать такой комплект под свои задачи и при этом сразу прикинуть цены вы можете в удобном Mini App конструкторе ➕

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 | #практика