1️⃣ Первый пример

В коде создается объект images, где каждому свойству (ключу) присваивается функция, возвращающая JSX элемент (компонент). Это позволяет нам легко и быстро ссылаться на различные компоненты-изображения через этот объект, что может упростить управление вашими изображениями в вашем приложении.

#code #JavaScript #объектные_литералы

2️⃣ Второй пример

Мы используем объектный литерал renderByPage, где каждому ключу соответствует функция, возвращающая соответствующий компонент JSX. Затем, вы динамически выбираете и возвращаете нужный компонент, обращаясь к свойству объекта с использованием переменной page.

Во второй части, мы достигаем того же результата, используя серию if-else условий, чтобы проверить значение переменной page и возвратить соответствующий компонент.

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

#code #JavaScript #объектные_литералы

3️⃣ Третий пример

В версии с объектным литералом, мы создаем объект actions, в котором каждой стране соответствует функция, выводящая в консоль определенное действие, ассоциированное с этой страной. Затем, в функции doAction, мы вызываем соответствующую функцию, используя динамический доступ к свойствам объекта. Это делает код более чистым и легко масштабируемым.

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

#code #JavaScript #объектные_литералы

🔍 Сравнение NaN и undefined

🔹 NaN — это специальное значение, которое представляет "не число". Оно возникает как результат некорректной математической операции. Важно отметить следующие особенности NaN:

Самый заметный "подводный камень" - NaN не равно самому себе. То есть, NaN === NaN вернет false.
Для проверки на NaN лучше использовать функцию isNaN().

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

🧐 Строгое сравнение (===)
При строгом сравнении, тип данных и значение обоих операндов должны быть идентичными.

NaN === NaN – вернет FALSE.
undefined === undefined – вернет TRUE.
NaN === undefined – вернет FALSE, так как NaN и undefined являются различными типами данных.

😃 Нестрогое сравнение (==)
Нестрогое сравнение сравнивает значения, но не учитывает типы данных, что может привести к некоторым неожиданным результатам.

NaN == NaN – вернет FALSE, так как NaN не равно ничему, даже самому себе.
undefined == undefined – вернет TRUE.
NaN == undefined – вернет FALSE, несмотря на то, что сравнение не строгое, NaN и undefined остаются неравными.

#JavaScript #NaN #undefined #ОбучающийПост

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

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

Постарался сделать это видео максимально полезным. Там около 15-18 советов. Все эти советы я сформулировал после встречи с представителями больших компаний, hr и рекрутерами. Они рассказали как происходит найм их глазами, на что они обращают внимание.

Уверен будет интересно и полезно👌🏻😌

Завтра ещё выложу видео продолжение React Новости.
Будет короткая серия с исправлениями.
Добавим слайдер для списка категорий. Будем листать категории стрелочками👌🏻

ООП (Объектно-ориентированное программирование) – это стиль программирования, в котором основное внимание уделяется объектам и классам, а не процедурам. В ООП объекты могут взаимодействовать друг с другом, имея свойства (характеристики) и методы (действия). Это помогает организовывать код более структурированно и гибко.

Принципы:

1️⃣Инкапсуляция: Это скрытие внутренних деталей объекта и предоставление ограниченного набора публичных методов для взаимодействия с этим объектом. Это помогает избегать нежелательного взаимодействия с внутренними частями объекта.

2️⃣Наследование: Это механизм, с помощью которого один класс может наследовать атрибуты и методы от другого класса. Это способствует повторному использованию кода и установлению отношений "есть" между объектами.

3️⃣Полиморфизм: Это возможность объектов с одинаковым интерфейсом иметь различное поведение. В ООП это чаще всего реализуется через переопределение методов в подклассах.

4️⃣Абстракция: Это процесс создания простых классов, которые определяют общую характеристику набора объектов. Это помогает сосредоточиться на том, что делает объект, а не как он это делает.

На сегодняшний день функциональное программирование намного популярнее ООП, как минимум в JavaScript/React и в других фреймворках.

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

🌐 Зачем нам его изучать? Даже если вы не планируете полностью погружаться в мир ООП, его основные принципы можно эффективно применять и вне контекста объектно-ориентированного программирования, сделав ваш код более организованным и масштабируемым.

#JavaScript #обучающийПост #ООП

Поделюсь с вами данным YouTube каналом.
https://youtu.be/q2TyxOzBTdg?si=WBRO6e3q8XutPpbo

Это плейлист по ООП. В свое время, эти видео помогли мне понять концепции ООП. Автор объясняет это очень понятно, никто другой так не объяснил. Как минимум я не встречал таких видео.

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

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

Reactify рекомендует 👍

#JavaScript #advice #ООП

🤓 Вообще я на первой работе выступал с презентацией по ООП, вдохновился этими видео. В презентации я в пример привел создание онлайн кинотеатра, где есть фильмы с разными жанрами, оценками и тд.

1️⃣ Инкапсуляция: В нашем онлайн-кинотеатре каждый фильм может представлять собой объект с частными свойствами, такими как название, жанр, рейтинг и т. д. Методы объекта могут включать функции, такие как "просмотреть", "поставить оценку" и т. д., обеспечивая безопасный доступ к данным.

2️⃣ Наследование: Мы можем создать базовый класс "Фильм", который будет содержать общие свойства и методы для всех фильмов. От этого класса можно наследовать дочерние классы, например, "Фильм ужасов", "Комедийный фильм" и т. д., каждый из которых будет иметь свои уникальные свойства и методы, дополняющие или переопределяющие те, что в базовом классе.

3️⃣ Полиморфизм: Допустим, у нас есть метод в базовом классе "Фильм", который позволяет получить краткое описание фильма. В дочерних классах мы можем переопределить этот метод, чтобы предоставить более специализированные версии описаний, подходящие для каждого жанра.

4️⃣ Абстракция: Мы можем создать абстрактный класс "Пользователь", который определяет общий интерфейс для всех типов пользователей (администратор, зарегистрированный пользователь, гость и т.д.). Этот класс определит общие методы, которые должны быть реализованы в каждом конкретном подклассе.

#JavaScript #обучающийПост #ООП

Как и обещал, продолжение React Новости! Скоро начнется съемка серий по TypeScript✌️ Эх больше всего жду когда будем добавлять Redux, RTK Query, Router👍

Но решать что будет после TS - вам! На следующей неделе будет голосование

https://youtu.be/DOhL0n7nas4

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

Это стек технологий компании Facebook (meta)

Чего не хватает и что добавить?

Тут не только Frontend, с большинство технологий вы скорее всего никогда не столкнётесь.

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

В маленьких компаниях, один человек может быть frontend, backend, devops и тд😄

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

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

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

Так же в приложении по каждой технологии был бы обучающий контент - roadmap, ссылки для изучения

Потом можно было бы добавить общение пользователей. Пользователи могли бы вступить в клан своей технологии (типо аналог чатов в ТГ, групп) и учавствовать в турнирах, кто лучше знает свою технологию.

Как вам идея? Создаем Опенсорс команду?😅

Привет всем! Сегодня поговорим про два очень часто используемых метода массивов в JavaScript: forEach и map. Почему бы их не сравнить, чтобы вы точно знали, когда какой использовать? 🤔

forEach
Этот метод просто проходится по всем элементам массива и делает с ними что-то полезное. Но сам массив при этом не изменяет. Он просто как турист: прошёл, посмотрел, но ничего не тронул.

const numbers = [1, 2, 3];
numbers.forEach(num => {
console.log(num * 2);
});

map
Этот метод похож на forEach, но с одним важным отличием: он создаёт новый массив на основе старого. Как будто клонирует массив, но при этом может что-то изменить в клонах.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

Когда что использовать?

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

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

#JavaScript #обучающийПост #Array #methods

Применение

Различие заключается в том, что map возвращает новый преобразованный массив, а forEach позволяет просто итерироваться по массиву и добавлять свою логику.

В примере мы решили одну и ту же задачу разными методами.

В данном случае map является предпочтительным.

#JavaScript #обучающийПост #Array #methods

Каждую неделю я просматриваю hh.
Смотрю вакансии, что предлагают, что хотят.

Из наблюдений:
1. Стало больше вакансий на Vue js
2. Количество вакансий в Москве увеличилось с ~1650 до 1813 (месяц назад было 1650)
3. Стало появляться больше вакансий для джунов

Кстати первая вакансия висит уже месяца 3, если не больше. И все это время в топе.

Смею предположить, что не могут найти специалиста. Стек там самый обычный, популярный TS, Redux, React. Проект тоже типичный, что-то типо админ панели для клиентов.

Наверное не могут выбрать из множества специалистов🤔