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

1️⃣Всегда возвращает один и тот же результат для одинаковых аргументов. Если вы передадите одни и те же аргументы, вы всегда получите один и тот же результат.

2️⃣Не имеет побочных эффектов. Это значит, что функция не взаимодействует с внешним миром: не меняет глобальные переменные, не работает с вводом/выводом и т.д.

Почему чистые функции важны?

🔑Тестируемость: Чистые функции легко тестировать, так как для одних и тех же аргументов они всегда возвращают один и тот же результат.

👍Понятность: Они делают код более понятным и предсказуемым, уменьшая возможность ошибок.

🌍Параллелизм: Они могут быть легко выполнены параллельно, так как не взаимодействуют с внешним состоянием.

Чистые функции представляют собой мощный инструмент для написания чистого, модульного и легко поддерживаемого кода. Они являются важной частью функционального программирования и могут помочь вам создать более надёжные и масштабируемые приложения.

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

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

#code #JavaScript

Если вы хотите углубить свои знания в JavaScript и по-новому взглянуть на этот язык, рекомендую обратить внимание на серию книг "Вы не знаете JS" от Кайла Симпсона. Это настоящая сокровищница знаний для каждого, кто работает с JS.

1️⃣Введение в программирование. Идеальное начало для новичков и хорошее освежение для опытных.

2️⃣Область видимости и замыкания. Познайте, как JavaScript видит ваш код, и разберитесь с самыми сложными аспектами.

3️⃣this и Прототипы Объектов. Глубокое погружение в одну из самых запутанных особенностей JS.

4️⃣Типы и грамматика. Узнайте все тонкости типов данных и их преобразований.

5️⃣Асинхронность и Производительность. Освойте механику асинхронных операций и узнайте, как заставить JS работать ещё быстрее.

6️⃣ES6 и не только. Изучите новейшие возможности языка, которые делают кодирование в JS ещё удобнее и мощнее.

Эта серия книг может стать вашим ключом к глубокому пониманию JavaScript. Удачного чтения и новых открытий! 🚀📖

#JavaScript #book #post

Для начала в самый раз) всего 65 страниц

Вы когда-нибудь сталкивались с ситуацией, когда нужно было обрабатывать события множества элементов на странице? Делегирование событий — это решение этой задачи, которое сделает ваш код гораздо проще и эффективнее.

💡 Что такое делегирование событий?

Это техника, при которой вы не привязываете обработчик события к каждому элементу отдельно. Вместо этого, вы назначаете один обработчик для их общего родителя. Когда событие происходит, вы можете определить, на каком именно элементе оно случилось, используя event.target.

📌 Как это работает?

Назначьте обработчик события контейнеру (родителю).
Когда событие произойдёт, через event.target вы узнаете, на каком дочернем элементе оно случилось.
Обработайте событие нужным образом.

🥇 Преимущества делегирования:

1️⃣Экономия ресурсов: один обработчик вместо многих.

2️⃣Гибкость: легко добавлять и удалять элементы без изменения обработчиков.

3️⃣Упрощение кода: при массовых изменениях элементов можно просто обновить innerHTML.

В следующий раз, когда вы столкнетесь с необходимостью обработки событий на многих элементах, помните о делегировании. Это упростит вашу жизнь и сделает код чище! 🚀

#JavaScript #ОбучающийПост #делегирование

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

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

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

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

Вышло новое видео. В этом видео мы добавляем Скелетон и отслеживваем статус загрузки новостей. Так же работаем в таск менеджере, работаем с гитом (ветки, ПР, мердж).
https://youtu.be/FeDSumhe0kQ

На выходных выйдет еще одно видео с пагинацией. Будем дозировать контент с сервера, переключать страницы. Собственно для этого мы и делали скелетон, чтобы при переключении страниц и получении новых новостей наш контент не скакал😄

Нативные и Host-объекты

1️⃣Нативные объекты:

Это основные "строительные блоки" языка JavaScript, которые всегда доступны, независимо от того, где вы запускаете свой код.

🔹Object: Основной объект, на котором построено большинство других объектов.
🔹Date: Объект для работы с датами и временем.
🔹Math: Предоставляет математические функции и константы.
🔹parseInt, eval: И другие глобальные функции и свойства.

Преимущества нативных объектов:

📖Они являются частью стандарта ECMAScript и предоставляют основные функции языка.
🔑Где бы вы ни запускали код на JavaScript, нативные объекты будут доступны.

2️⃣Host-объекты (или объекты хоста):

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

Примеры в браузерной среде:

🔹window: Глобальный объект для браузера.
🔹document: Объект, представляющий текущую веб-страницу.
🔹XMLHttpRequest: Для выполнения асинхронных запросов к серверу.
🔹setTimeout: Позволяет выполнять код через заданный интервал времени.

Что нужно знать про host-объекты:

🛠Они могут сильно отличаться в разных средах выполнения. Например, в Node.js будут другие host-объекты, чем в браузере.
📌Они дополняют возможности языка в конкретной среде, предоставляя доступ к уникальным для этой среды функциям.

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

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

Хочу вам посоветовать очень крутой ресурс для обучения JavaScript. Это онлайн учебник

https://learn.javanoscript.ru

Этот учебник всегда в моем браузере во вкладках и в свободное время я перечитываю темы.

Тут вся актуальная теория, так как учебник постоянно обновляется и дополняется. ✅

#book #JavaScript

Деструктуризация и Рест оператор в JavaScript:

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

🔹Деструктуризация позволяет локализованно и явно извлекать значения из массивов или свойства из объектов.

🔹Рест оператор позволяет собирать "остаточные" элементы в массив или свойства объекта в новый объект.

Различия:

🎯Назначение: Деструктуризация извлекает и присваивает индивидуальные элементы или свойства, в то время как рест оператор собирает "оставшиеся" элементы или свойства.
📖Синтаксис: Деструктуризация использует конструкции {} или [] в зависимости от типа данных. Рест оператор начинается с ....

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

Новое видео. Добавил пагинацию в приложение🎯

https://youtu.be/3iE8BbL0038

Спред оператор в JavaScript:

Спред оператор — это мощный инструмент, призванный обеспечивать гибкость при манипулировании данными, делая ваш код более универсальным и читаемым.

🔹Спред оператор позволяет "распространять" элементы массива или свойства объекта, делая их индивидуальными элементами или свойствами.

Особенности:

🎯Назначение: В отличие от рест оператора, который "собирает" элементы или свойства, спред оператор "расширяет" или "распространяет" их.
📖Синтаксис: Спред оператор также начинается с троеточия (...), но используется в слегка иных контекстах.

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

AJAX, стоящий за аббревиатурой "Asynchronous Javanoscript And XML", представляет собой революционный метод обращения к серверу без необходимости полной перезагрузки страницы. Эта технология обогатила пользовательский опыт, делая веб-приложения быстрыми, плавными и похожими на приложения для рабочего стола.

🚀 Ключевые особенности:

1️⃣Быстрый отклик: Благодаря AJAX, пользователь может видеть обновленные данные на странице без длительного ожидания.

2️⃣Динамичная подгрузка: AJAX позволяет подгружать данные в реальном времени, что идеально подходит для деревьев меню, где содержание узлов подгружается при их раскрытии.

3️⃣Живой поиск: Современные веб-приложения активно используют AJAX для мгновенного поиска, предоставляя результаты по мере ввода запроса.

4️⃣Универсальность данных: Несмотря на присутствие "XML" в названии, AJAX может работать с различными форматами данных, включая JSON, HTML, простой текст и даже бинарные файлы.

📌 Применение AJAX:

🔹Интерактивные элементы: AJAX позволяет создавать кнопки и формы, которые обрабатывают пользовательский ввод без перезагрузки страницы. Примеры таких элементов - кнопки "Добавить в корзину" в интернет-магазинах или кнопка "Подписаться" на новостные рассылки.

🔹Динамическая загрузка контента: С AJAX можно динамически подгружать новый контент или данные на страницу без необходимости её перезагрузки. Это особенно полезно для сайтов с большим количеством информации, например, каталогов товаров или онлайн-галерей.

🔹Мгновенный поиск: AJAX используется для создания функций "живого поиска", где результаты начинают отображаться сразу при вводе запроса пользователем, без необходимости нажимать кнопку "Поиск".

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

1️⃣Мы добавляем обработчик событий для всего документа, который будет отслеживать клики.

2️⃣Если элемент, по которому был совершен клик, имеет класс 'add-to-cart', это означает, что пользователь нажал на кнопку добавления товара в корзину.

3️⃣Из этой кнопки мы извлекаем атрибут data-product-id, который содержит уникальный идентификатор товара, который пользователь хочет добавить в корзину.

4️⃣Функция addToCart отвечает за отправку AJAX-запроса на сервер для добавления выбранного продукта в корзину.

🔹Создаем новый экземпляр объекта XMLHttpRequest, который будет использоваться для выполнения асинхронного запроса.

🔹Мы устанавливаем метод запроса как POST и указываем URL-адрес сервера, куда будет отправлен запрос. Устанавливаем заголовок Content-Type как application/json;charset=UTF-8, указывая, что мы будем отправлять данные в формате JSON.

🔹Далее мы указываем функцию, которая будет вызвана, когда сервер ответит на наш запрос. При успешном ответе сервера мы обновляем содержимое корзины на странице.

🔹После, мы конвертируем объект с идентификатором продукта в строку JSON и отправляем его на сервер.

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