Обработка событий в JavaScript (1)

#code #JavaScript #DOM

Примеры чистых и нечистых функций

#code #JavaScript

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

#JavaScript #code #делегирование

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

#code #JavaScript #делегирование

Поднятие переменных в JavaScript

#JavaScript #code #hoisting

#JavaScript #code

#JavaScript #code #this

👆При клике на <div>, который оборачивает всю карточку пользователя, будет вызван обработчик goToProfile, что приведёт к переходу на страницу профиля пользователя.

👆При клике на кнопку "Удалить", сначала сработает обработчик handleDelete, который вызовет функцию onDelete и остановит всплытие события благодаря event.stopPropagation(). Это предотвратит вызов обработчика goToProfile и, следовательно, переход на страницу профиля пользователя не произойдёт.

#JavaScript #code

Разница между «атрибутом» (attribute) и «свойством« (property)

#JavaScript #code #HTML

В этом примере, мы сначала "фиксируем" URL, а затем метод, создавая функции getUser и createUser, которые уже "знают" эти параметры и принимают только тело запроса в качестве аргумента. Это упрощает повторное использование кода и делает наши функции более чистыми и читаемыми.

#каррирование #code #JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

Раньше делали так (spread оператор):
[...people].sort()

Теперь же можно делать так:
people.toSorted()

#code #JavaScript #Array #methods

Примеры сравнений различных типов

#JavaScript #code

Функция для глубокого копирования объектов

1️⃣ Проверка наличия и типа объекта
Проверяем, существует ли obj и является ли он объектом.
Если obj равен null или его тип данных не 'object', функция возвращает obj, не производя дополнительных действий.
Здесь мы гарантируем, что функция будет применена только к объектам или массивам.

2️⃣ Обработка массивов
Устанавливаем, является ли obj массивом.
Создаем новый пустой массив arrCopy и проходим по всем элементам obj. Примитивные значения копируются напрямую, а для объектов вызывается функция deepClone рекурсивно.
Этот этап обеспечивает глубокое копирование каждого элемента массива, включая вложенные объекты и массивы.

3️⃣ Обработка объектов
Если obj не массив, но объект, начинаем процесс копирования объекта.
Создаем пустой объект objCopy. Для каждого свойства obj, проверяем, является ли оно собственным с помощью метода hasOwnProperty. Собственные свойства копируются. Если значение свойства - объект, функция deepClone вызывается рекурсивно.
Так мы гарантируем, что все собственные свойства объекта, включая вложенные объекты, будут глубоко скопированы.

#JavaScript #code #Objects #deepCopy

В первом примере используется обычная функция, и this внутри setInterval не ссылается на экземпляр Person. По умолчанию (в строгом режиме) this будет undefined, а в нестрогом — глобальный объект. Поскольку undefined не имеет свойства age, попытка инкрементировать его приведет к NaN

Во втором примере используется стрелочная функция, которая не имеет собственного this. Она "позаимствует" его из окружающего контекста, в данном случае из функции-конструктора Person. Это означает, что this.age будет корректно инкрементироваться каждую секунду, и в консоль будет выводиться возраст Person, который увеличивается на 1 каждую секунду.

#code #JavaScript #functions #this