Как добавлять условные свойства объектов в JavaScript

При создании объектов в JavaScript иногда требуется включать определённые свойства только при выполнении конкретных условий. Этот приём можно реализовать с помощью оператора расширения (…) в сочетании с условной логикой. Давайте разберём, как овладеть этим мощным инструментом для более гибкого и динамичного создания объектов.

Проблема статических свойств объектов

Представьте: вы создаёте объект пользователя и хотите добавить разные свойства в зависимости от его статуса. Возможно, он администратор, или у него есть премиум-подписка, или и то, и другое! Как создать объект, который гибко включает или исключает свойства в зависимости от условий?

Решение: условное распространение (Conditional Spreading) в JavaScript

Вот где начинается магия. Мы можем использовать оператор расширения (…) вместе с логическим оператором И (&&), чтобы условно добавлять свойства в объекты JavaScript. Такой подход позволяет создавать чистый и гибкий код, динамически добавляя свойства на основании различных условий.

Разберём это на примере:

const isAdmin = true;
const hasPremium = false;

const user = {
  username: 'johndoe',
  email: 'john@example.com',
  ...(isAdmin && { role: 'admin' }),
  ...(hasPremium && { subnoscription: 'premium' }),
  ...((isAdmin || hasPremium) && { specialFeatures: 
  ['dashboard', 'reports'] }),
};

console.log(user);
/* 
{
  "username": "johndoe",
  "email": "john@example.com",
  "role": "admin",
  "specialFeatures": [
    "dashboard",
    "reports"
  ]
}
*/

Как работают условные свойства объектов

Выражение && в JavaScript вычисляется слева направо.
Если первая часть выражения ложна (falsy), то происходит короткое замыкание — вся конструкция возвращает это ложное значение, а вторая часть даже не вычисляется.

Вот что происходит в нашем примере:

- `isAdmin && { role: 'admin' }`: так как isAdmin === true, в объект добавляется свойство role: 'admin'.
- `hasPremium && { subnoscription: 'premium' }`: так как hasPremium === false, это свойство не добавляется.
- `(isAdmin || hasPremium) && { specialFeatures: [...] }`: условие истинно (потому что isAdmin === true`), поэтому в объект добавляется массив `specialFeatures.

Профессиональные советы по работе с условными свойствами объектов в JavaScript 🚀

1- Порядок имеет значение: помните, что порядок операций распространения (spread) может влиять на итоговый объект. Более поздние операции перезапишут более ранние при одинаковом ключе.

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

3- Отладка условных свойств: при отладке помните, что "ложные" значения (`...false`, ...null, `...undefined`) просто игнорируются, из-за чего некоторые проблемы могут быть неочевидны на первый взгляд.

4- Nullish coalescing: для более продвинутых случаев использования рассмотрите комбинацию этого подхода с оператором объединения с null (??) для задания значений по умолчанию.

const user = {
  ...someCondition && { prop: valueIfTrue ?? defaultValue }
};

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

👉 @frontend_1

10 современных возможностей CSS, которые стоит использовать

Точно так же, как и JavaScript, CSS не пользуется наилучшей репутацией среди (Rails)-разработчиков. И, как и в случае с JavaScript (вспомните Turbo, а также CoffeeScript), у CSS длинная история препроцессоров, постпроцессоров и различных абстракций (например, Tailwind CSS).

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

Но на дворе 2025 год, и CSS развивается (и будет развиваться!) очень быстрыми темпами. Позади остались времена spacer.gif или создания изображений для каждого угла карточки, чтобы имитировать скруглённые границы.

Если вы какое-то время пренебрегали CSS (например, потому что пользовались Tailwind CSS), ниже я хочу выделить несколько новых возможностей CSS, которые я с удовольствием применяю в некоторых проектах (созданных под эгидой Rails Designer и не только). Хотя я всё ещё люблю использовать Tailwind CSS, понимание и реальное использование самого CSS - крайне важно. Веб строится на (открытых) стандартах, что необходимо для его доступности, поддерживаемости и долгосрочной актуальности.


Min, max and clamp

min()

Соединяя их вместе, так как они перекрываются

/* Keeps buttons from getting too wide on large screens */
.pricing-button {
  width: min(300px, 90%);
}

Думайте о min() как об установке верхнего предела. Оно выберет меньшее из значений. Удобно для того, чтобы элементы не становились слишком большими, при этом оставаясь адаптивными. То есть, пока 90% вычисляется как меньше 300px - используется 90%. Как только результат превышает 300px - используется это значение.

max()

/* Ensures text stays readable even on tiny screens */
.terms-container {
  font-size: max(16px, 1.2vw);
}

https://railsdesigner.com/modern-css-overview/

👉 @frontend_1

CSS-совет 💡

Нет необходимости создавать отдельные версии логотипа в градациях серого для тёмного и светлого режимов.

Это легко делается с помощью CSS-фильтров

👉 @frontend_1

Совет по CSS 💡

Возможно, ты не знал, что можно задать и min-width, и width всего одной строкой кода в CSS

👉 @frontend_1

Совет по HTML 💡

Примеры использования элементов thead, tbody и tfoot в HTML

👉 @frontend_1

Хотите научиться создавать привлекательные карточки товара без Bootstrap и готовых шаблонов?

📅 9 сентября в 20:00 МСК на открытом уроке мы разберём, как из базовых тегов и CSS-свойств собрать мини-проект, достойный портфолио. Вы увидите, как блок <article> превратить в интерактивную витрину: текст, изображение, кнопка «Купить» и эффекты при наведении.

❗️ Вы поймёте, какие CSS-свойства (margin, padding, background-color, border) отвечают за композицию, а :hover добавит лёгкую анимацию при наведении. В реальном времени создадим карточку, применим шрифты, цвета и узнаем, как обеспечить кросс-браузерность без библиотек и фреймворков.

Урок проходит в преддверие старта курса «JavaScript Developer. Basic» и все участники получат скидку на обучение.

👉 Запишитесь на открытый урок → https://vk.cc/cPepS0

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Совет по CSS 💡

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

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

👉 @frontend_1

Совет по CSS 💡

Иногда фавикон отлично смотрится в светлой теме, но выглядит плохо (или вовсе исчезает) в тёмной, и наоборот.

Такие мелкие детали могут портить общее впечатление от сайта.

Вот как это исправить 👆

👉 @frontend_1

Шпаргалка по JavaScript

👉 @frontend_1

Как оживить формы на сайте без фреймворков? Хотите понять, как чистый JavaScript превращает скучные поля в динамичные интерфейсы?

📅 22 сентября в 20:00 МСК на открытом уроке мы разберём, как добавить в анкету динамические поля, условия показа, счётчики и реакцию на ввод — без React и Vue. Вы увидите, как одна функция может управлять доступностью кнопки и менять структуру DOM в реальном времени.

❗️ Прямо в ходе вебинара создадим интерактивную анкету с радиокнопками, чекбоксами и текстовыми областями, освоим псевдо-отправку и научимся чистому, понятному коду. Спикер продемонстрирует лучшие практики обработки форм и покажет, как без лишнего «кода-шума» добиться гибкости.

👉 Посетите урок и получите скидку на курс «JavaScript Developer. Basic» → https://vk.cc/cPzNZn

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Коллекция полезных HTML и CSS фич, которые редко используются

Я люблю помогать фронтендерам больше узнать о HTML и CSS. Общаясь, я составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает. В этой статье я пришёл поделиться ими.

Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/946052/

👉 @frontend_1

Разбор кода: фронтендер из Яндекса и пятнашки от джуна

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

В этот раз Павел Веденичев, руководитель группы фронтенд-разработки Яндекс 360, погружается в код игры в пятнашки.

Ссылка на код: https://github.com/Sasha-N/pots

👉 @frontend_1

Forest Encounter

Свёрстано и анимировано на чистых HTML и CSS.

https://codepen.io/dropside/pen/AXewvP

👉 @frontend_1

🚀 Хватит оставаться на уровне базового Vue! Пора перейти на профессиональный фронтенд.

Онлайн-курс «Vue.js разработчик» — для тех, кто хочет:
• Создавать современные SPA и многостраничные приложения
• Работать с Vuex, Vue-router, Nuxt 3 и SSR
• Писать чистый код на ES6/ES8/TypeScript и тестировать его с Jest/Cypress
• Осваивать GraphQL, Firebase и Electron
• Применять продвинутые паттерны проектирования и оптимизировать приложения под production

💡 И это ещё не всё! 25 сентября в 20:00 в рамках курса «Vue.js разработчик» пройдёт бесплатный открытый вебинар «Nuxt 3 + SSR: собираем многостраничное приложение на Vue»:

• Настроим маршрутизацию и создадим страницы: каталог, карточка товара, «О компании»
• Подключим серверный рендеринг для ускорения загрузки и SEO
• Подтянем данные из открытого API и отрендерим на сервере
• Сверстаем и задеплоим базовую структуру проекта

Зарегистрироваться на вебинар: https://vk.cc/cPKDRB

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Vue. Watch и WatchEffect на практике

Каждый, кто использует Vue для разработки или только его изучает, так или иначе встречается с необходимостью выполнить какое‑либо побочное действие при изменении значений, и сразу в голове возникает мысль о двух методах‑наблюдателях — Watch и WatchEffect.

Как работают эти 2 метода можно узнать из великолепной документации Vue, а в этой статье мы посмотрим на примеры самых часто используемых компонентов вместе с наблюдателями — по 2 компонента на каждый метод — а заодно вы сможете больше понять принцип их работы.

По ходу статьи также будут приведены некоторые полезные библиотеки Vue, которые часто используются в разработке.

https://habr.com/ru/articles/915394/

👉 @frontend_1

Как указать, что серверный компонент должен рендериться динамически во время выполнения, если он не использует динамические API в Next.js.

👉 @frontend_1

Table tenniCSS

Создано на HTML и SCSS, без использования JS.

https://codepen.io/amit_sheen/pen/PobQjMX

👉 @frontend_1

CSS Swirl

Версияна чистом CSS.

400 квадратов, с использованием sibling-index и count, кучи тригонометрических функций и немного типизированной арифметики. (Пока работает только в Chrome 140+).

https://codepen.io/amit_sheen/full/PwZoLBG

👉 @frontend_1

❓ Как сделать чат в React?

😎 Ответ — на бесплатном вебинаре 29 сентября!

WebSocket — это не сложно. Покажем на практике, как связать React-приложение с сервером для обмена сообщениями в реальном времени.

Соберем работающий прототип мессенджера с авторизацией и интерфейсом. Идеальный проект для портфолио.

Присоединяйтесь к бесплатному вебинару курса «JavaScript Developer. Professional».

👉 Пишите код вместе с экспертом:

https://vk.cc/cPQvpa

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

React предпочитают по умолчанию — и это убивает инновации во фронтенде

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

React больше не побеждает за счёт своих технических достоинств. Сегодня его выбирают по умолчанию. И именно это «по умолчанию» теперь тормозит инновации во всей фронтенд-экосистеме.

Когда командам нужен новый фронтенд, разговор редко начинается с вопроса: «Каковы ограничения и какой инструмент лучше всего под них подходит?» Чаще всё звучит так: «Давайте возьмём React — его все знают». Такой рефлекс запускает самоподдерживающийся цикл, в котором архитектуру определяют сетевые эффекты, а не техническая уместность.

https://www.lorenstew.art/blog/react-won-by-default/

👉 @frontend_1

Скрытые возможности Radix UI

Radix UI — это не просто компоненты, а гибкий набор примитивов с точным контролем поведения. Вот несколько фишек, которые можно использовать:

Контролируемое состояние

Большинство компонентов (Dialog, Popover, DropdownMenu) можно открыть/закрыть вручную через open и onOpenChange. Это удобно для синхронизации с глобальным состоянием или URL.

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  {/* ... */}
</Dialog>

Отключать порталы при необходимости

По умолчанию контент рендерится в body через Portal. Но если нужен рендеринг в текущем DOM (для стилизации, тестирования или ограничения области), вы можете отказаться от портала.

<Dialog.Content>
  {/* ... */}
</Dialog.Content>

Проигрывать анимации исчезновения

Radix по умолчанию удаляет элементы из DOM при скрытии. Чтобы включить CSS-анимации ухода (opacity, scale, transform), используйте forceMount.

<Dialog.Content forceMount className="fade-out-animation">
  {/* ... */}
</Dialog.Content>

Свободно комбинировать компоненты

Вы можете вкладывать один компонент в другой — например, Popover в DropdownMenu или Dialog в Tabs. Radix правильно обрабатывает фокус, события и поведение, даже в сложных вложенных интерфейсах.

👉 @frontend_1