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

С другой стороны, объектные литералы в этом сравнении изначально шли немного медленнее, но после 7 кейсов их время выполнения оставалось стабильным, не зависимо от того, было ли там 7 или 100000 кейсов. Это делает их потенциально более предпочтительным выбором для ситуаций с большим количеством кейсов.

Я не смог найти его, поэтому нарисовал😃

#ОбучающийПост #JavaScript #объектные_литералы

Тут кстати автор упомянул про Дерево переходов, оптимизацию switch-case

Часть 2

Сейчас же компилятор, когда видит switch использует либо дерево из условных переходов, либо использует таблицу переходов.
С другой стороны, при использовании конструкции switch-case не нужно забывать про особенности работы с ключевыми словами break и default.

Некоторые забывают, например, слово break и в результате имеют некорректное выполнение программы (выполняется не только нужный case, но и последующие, пока не встретится break)
Что еще хочу сказать. switch хорошо работает с константными целыми или перечисленными типами. В этом случае компилятор даже может подсказать, что есть проблема.

🛠 Switch-case действительно имеет оптимизацию.
Компилятор или интерпретатор используют Дерево переходов. Оно позволяет вам мгновенно перейти к правильному кейсу. Это значительно ускоряет процесс поиска, потому, что вы можете пропустить много ненужных кейсов.

Тем не менее, если количество кейсов растет, время на поиск правильного кейса тоже может увеличиваться, хотя, возможно, не так сильно, как с if-else

Что выбирать зависит от задачи.
Если у вас немного вариантов (1-3) то if else
Если у вас 4-7 то имеет место быть switch-case
Если вариантов, условий больше - 8, 9, 12, 20, то возможно ваш выбор это объектный литерал💪

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

Дальше расскажу про применение, покажу примеры

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, ссылки для изучения

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

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