Frontend Development blog by Mykyta Monastyrskyi

Чисті функції, мутації та побічні ефекти

Wed, 20 Nov 2024 00:00:00 GMT

У контексті JS, React, Redux та функціонального програмування часто використовуються такі терміни як - [мутації / мутабельність (mutations / mutability)](#мутації), - [побічні ефекти (side effects)](#побічні-ефекти-side-effects), - [чисті функції (pure functions)](#чисті-функції-pure-functions), - [ідемпотентні функції (idempotent functions)](#ідемпотентні-функції). Давайте з’ясуємо, що вони означають, як використовуються (в контексті JS), та, нарешті, поставимо крапку в термінологічній плитунині, яка притаманна цим термінам. ## Мутації

![ninja-turtles](../../images/ninja-turtles.png)

Мутація в програмуванні означає зміну стану об’єкта, змінної чи структури даних після їх створення. І нажаль ніяк не пов’язана з черепашками-ніндзя, або з людьми-мутантами. У JavaScript примітивні значення (всі типи данних крім обʼєктів) є іммутабельними (immutable), тобто вони не можуть бути змінені, але втім, можуть бути переназначені. Часто можна почути, що `let` є мутабельним, а `const` — ні. Це не зовсім правильно. Різниця між `let` та `const` саме в тому, що `const` не можна переназначити, але так само як і для `let`, обʼекти і массиви в `const` **не** є іммутабельними. ### Приклад ```js const person = {name: 'Cassius Marcellus Clay'}; person.name = 'Muhammad Ali'; ``` У цьому прикладі властивість `name` об’єкта `person` змінюється. Це є мутацією. ### Чому це вважається поганим? Мутації самі по собі не є шкідливими, але вони можуть призводити до помилок і ускладнювати розуміння коду. Короткий приклад: ```js const a = [1, 2, 3]; const b = a; b.push(4); console.log(a); // [1, 2, 3, 4] ``` У цьому прикладі ми мутуємо масив `b`, але він вказує на той самий об’єкт, що і `a`. Це може призвести до непередбачуваної поведінки. Щоб уникнути цього, можна використовувати методи, які повертають новий об’єкт, а не мутують старий: ```js const a = [1, 2, 3]; const b = {...a, 4}; console.log(a); // [1, 2, 3] ``` ### Іммутабельність в React/Redux #### React Одне з основних правил React - це те що [`props` і `state` повинні бути іммутабельними](https://react.dev/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable). #### Redux Так само і в Redux - перше правило в [Redux Style Guide](https://redux.js.org/style-guide/style-guide#do-not-mutate-state) - не мутувати стан. ### Бібліотеки для роботи з іммутабельністю Для того щоб уникнути мутацій, можна використовувати вбудований в JavaScript метод `Object.freeze` або бібліотеки, які допомагають працювати з іммутабельністю, наприклад: - [Immer](https://immerjs.github.io/immer/docs/introduction) - [Immutable.js](https://immutable-js.github.io/immutable-js/) ## Побічні ефекти (Side Effects)

![side-effects](https://i.imgflip.com/9b13jd.jpg)

Побічний ефект — це будь-яка зміна в системі, яка впилває на зовнішній світ. Можливо, зараз це звучить дещо абстрактно. Коли ви викликаєте функцію, ваш комп’ютер працює інтенсивніше, виділяючи тепло. Це тепло може поступово підвищувати температуру в кімнаті. Чи можна це вважати побічним ефектом функції? Що ж, це залежить від контексту: В контексті фізики — так. Але в контексті программи, яку ми розробляємо, — ні. Зазвичай побічні ефекти в програмуванні стосуються лише того, що відбувається в межах программи, наприклад: - Зміна глобальної змінної. ```js let counter = 0; function increment() { counter++; // Побічний ефект: змінюється зовнішній стан } increment(); console.log(counter); // 1 ``` - Логування в консоль. ```js function logMessage(message) { console.log(message); // Побічний ефект: вивід у консоль } logMessage('Hello, world!'); ``` Логування не змінює стан програми, але впливає на середовище виконання, залишаючи слід у консолі. - Зміни в DOM. ```js function updateTitle(newTitle) { document.title = newTitle; // Побічний ефект: зміна заголовка сторінки } updateTitle('Новий заголовок'); console.log(document.title); // "Новий заголовок" ``` ### Побічні ефекти в React/Redux #### React В функціональних компонентах React місцем для побічних ефектів є хук `useEffect`. Там можуть відбуватися такі побічні ефекти як: - Запити до сервера ```jsx useEffect(() => { fetch('https://api.example.com/data') .then((response) => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then((data) => setData(data)) .catch((error) => console.error('Fetch error:', error)); }, []); ``` Варто зазначити, що для запитів до сервера можна використовувати бібліотеки, які дозволяють писати код більш декларативно, наприклад [React Query](https://react-query.tanstack.com/) або [SWR](https://swr.vercel.app/). - Підписка на події ```jsx useEffect(() => { const handleOffline = () => setIsOffline(true); const handleOnline = () => setIsOffline(false); window.addEventListener('offline', handleOffline); window.addEventListener('online', handleOnline); return () => { window.removeEventListener('offline', handleOffline); window.removeEventListener('online', handleOnline); }; }, []); ``` - Робота з локальним сховищем ```jsx useEffect(() => { const data = JSON.parse(localStorage.getItem('data')); setData(data); }, []); ``` - Маніпуляції з DOM ```jsx useEffect(() => { document.title = 'Новий заголовок'; }, []); ``` #### Redux В Redux управління побічними ефектами у ньому реалізується через middleware. Найпопулярнішим middleware для цього — [Redux Thunk](https://github.com/reduxjs/redux-thunk) ```jsx const fetchUserById = createAsyncThunk('users/fetchByIdStatus', async (userId: number, thunkAPI) => { const response = await userAPI.fetchById(userId); return response.data; }); ``` ## Чисті функції (Pure Functions) ![Pure function](https://i.imgflip.com/9b1btv.jpg) Чисті функції — це функції, які мають дві властивості: 1. Вони не мають [побічних ефектів](#побічні-ефекти-side-effects). 2. Детермінізм - це значить, що для одних і тих самих вхідних даних функція завжди повертає один і той самий результат. Давайте розглянемо пару прикладі ### Приклади Чи буде ця функція чистою? ```js function addRandom(a) { return a + Math.random(); } ``` Для цього нам потрібно відповісти на два питання: 1. Чи має ця функція побічні ефекти? Ні, побічних ефектів тут немає. 2. Чи є ця функція детермінованою? Тобто, чи завжди повертає один і той самий результат для одних і тих самих вхідних даних? Ні, ця функція не є детермінованою, оскільки `Math.random()` повертає випадкове число. Через що при першому виклику `addRandom(2)` може повернути, наприклад, `2.123`, а при другому, скажімо, — `2.456`. Отже, ця функція не є чистою. А ця? ```js function add(a, b) { return a + b; } ``` Ця функція відповідає обом вимогам чистої функції: вона не має побічних ефектів і є детермінованою. #### Чисті функції в Redux Одним з трьох основних принципов в Redux є [використання чистих функцій](https://redux.js.org/understanding/thinking-in-redux/three-principles#changes-are-made-with-pure-functions) ## Ідемпотентні функції

![Idempodent](https://i.imgflip.com/9b1sg7.jpg)

![Non-idempotent](https://i.imgflip.com/9b1tjc.jpg)

Термін [«ідемпотентність»](https://uk.wikipedia.org/wiki/%D0%86%D0%B4%D0%B5%D0%BC%D0%BF%D0%BE%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D1%96%D1%81%D1%82%D1%8C) означає властивість, яка проявляється в тому, що повторне застосування операції над об’єктом не змінює його стан після першого виконання. Функція є ідемподентною, якщо її повторні виклики з однаковими вхідними даними не змінюють результат або стан після першого виклику. Тобто вликлик функції `f(x)` декілька разів, наприклад `f(x); f(x); f(x);` дасть той самий результат, що і один виклик `f(x);`. (Тут варто зазначити, що в математиці ідемподентність означає, що `f(f(x)) = f(x)`, але то вже трохи інша історія. Якщо цікаво, можете прочитати це в чудовій книзі Кайла Сімпсона [Functional-Light JavaScript](https://github.com/getify/Functional-Light-JS/blob/40a68612275b23904c7b37abdb724b250bdf75e7/manuscript/ch5.md/#mathematical-idempotence)) ### Приклади ```js function convertToUpper(str) { return str.toUpperCase(); } ``` Ця функція є ідемпотентною, тому що вилкик цієї функції, скажімо, 10 разів, дає той же самий еффект, що й виклик один раз. Ця функція також є й чистою. Чисті функції завжди є ідемпотентними, але не обов'язково навпаки. --- ```js function setUserActive(user) { user.status = 'active'; } ``` Ця функція є ідемпотентною, оскільки при кожному виклику з однаковим об'єктом `user` буде встановлювати статус `active`. Але ця функція не є чистою, оскільки мутує об'єкт `user`. --- ```js function addHiddenClass(element) { element.classList.add('hidden'); } ``` Аналогічно, функція addHiddenClass є ідемпотентною: після першого виклику клас hidden додається до елемента, і наступні виклики не змінюють стан. Однак через те, що функція мутує DOM, вона не є чистою. --- Тут у нас не буде прикладів використання в React/Redux, тому що частіше термін ідемпотентність використовується в [контексті API](https://www.youtube.com/watch?v=t99NvIazD68) або [HTTP методів](https://developer.mozilla.org/en-US/docs/Glossary/Idempotent). ### Висновок На цьому все. Сподіваюсь ця стаття додала трошки ясності в вищезгадані терміни. Якщо у вас виникли питання, або ви знайшли помилку, можете написати тут в коментарях або на будь-який з контактів зазначенних в футері.

Цікаві медіа-запити (media queries)

Sun, 10 Nov 2024 00:00:00 GMT

## Інтро Вам, напевно, доводилося використовувати медіа-запити для адаптації вашого сайту під різні пристрої, і ви могли писати щось на зразок: ```css @media only screen and (max-width: 768px) { /* ... */ } ``` Але чи знали ви, що спектр можливостей `@media` набагато ширший? Далі ми розберемо цікаві й незвичні способи використання `@media`, але спочатку коротко згадаємо основи медіа-запитів. Якщо ви вже знайомі з основами, можете одразу перейти до [незвичайних способів використання медіа-запитів](#незвичні-способи-використання-медіа-запитів). ## Основи `@media` і медіа-запитів `@media` і медіа-запити часто вважають одним і тим самим, але між ними є невелика відмінність: - `@media` — це [@-правило (at-rule)](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) в CSS, яке використовується для оголошення медіа-запиту. Воно застосовує певні стилі тільки в тому випадку, якщо задані умови для медіа-запиту є правдивими. - Медіа-запит (media query) — це умова, що міститься в `@media` і перевіряє певні параметри поточного пристрою (наприклад, ширину, висоту, орієнтацію тощо). - @-правило (at-rule) в CSS — це команда, яка починається зі знаку `@` і використовується для керування поведінкою стилів. @-правила дозволяють CSS вказувати особливі інструкції для браузера. Крім `@media`, існують й інші @-правила, наприклад: - `@import` — дозволяє імпортувати інші CSS-файли. - `@font-face` — використовується для оголошення власних шрифтів. - `@keyframes` — визначає анімацію з ключовими кадрами. - `@container` — дозволяє застосовувати стилі на основі розмірів або інших властивостей контейнера елемента. Отже, повертаючись до нашого прикладу: ```css @media only screen and (max-width: 768px) { /* ... */ } ``` - `@media` — це @-правило. - `only screen and (max-width: 768px)` — це медіа-запит. Кожен медіа-запит може складатися з: - **Медіа-типів** ([\](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types)) — це типи пристроїв, на які застосовуються стилі. Наприклад: - `screen`: для екранів (комп'ютерів, телефонів, планшетів). - `print`: для друку. - `all`: для всіх медіа-типів. - **Медіа-фіч** ([\](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features)) — це характеристики пристрою, які перевіряються у медіа-запитах, щоб застосувати потрібні стилі. Наприклад: - `width`: ширина області перегляду. - `height`: висота області перегляду. - `orientation`: орієнтація екрану (`portrait` чи `landscape`). - **Логічних операторів** ([Logical operators](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#logical_operators)) — дозволяють комбінувати медіа-тип та медіа-фічі в одному запиті: - `and`: для одночасного виконання всіх умов. - `or`: для виконання хоча б однієї з умов. - `not`: для виключення певних умов. - `only`: обмежує застосування стилів тільки до конкретних медіа-типів або умов, ігноруючи сумісність зі старішими браузерами. - `,` (кома): для об’єднання кількох медіа-запитів (аналогічно логічному "або"). --- Тепер давайте розберемо медіа-запит із нашого прикладу: ```css @media only screen and (max-width: 768px) { /* ... */ } ``` - `only` — обмежує дію стилів тільки для пристроїв із підтримкою медіа-запитів. Раніше це було актуально, оскільки старі браузери без підтримки медіа-запитів інтерпретували `screen and (max-width: 768px)` як `screen`, ігноруючи решту запиту, таким чином застосовуючи стилі всередині на всіх екранах. Але тут варто зазначити, що коли ми говоримо "старі браузери", то ці браузери дійсно [дуже старі](https://caniuse.com/css-mediaqueries). Це буквально Internet Explorer 8 і нижче. Тож у сучасному коді про `only` можна сміливо забути. - `screen` — медіа-тип, який вказує, що стилі застосовуються тільки для екранних пристроїв (наприклад, моніторів, смартфонів, планшетів). - `and` — логічний оператор, який використовується для об’єднання кількох медіа-фіч в один медіа-запит. У цьому випадку медіа-тип і медіа-фічу. - `(max-width: 768px)` — медіа-фіча, яка вказує, що стилі будуть застосовуватися тільки для екранів із шириною включно до 768 пікселів. Отже, цей медіа-запит обмежує стилі для екранів шириною включно до 768 пікселів. Ключове слово `only` можна вважати залишком минулого, тому запит можна спростити до: ```css @media screen and (max-width: 768px) { /* ... */ } ``` --- ## Незвичні способи використання медіа-запитів Крім звичного використання медіа-запитів у CSS, як показано в прикладах вище, існують й інші, не менш корисні способи: ### @import Ви можете комбінувати медіа-запит із `@import` для умовного завантаження CSS-файлів. Наприклад: ```css @import url('styles.css') screen and (min-width: 768px); ``` ### HTML Атрибут `media` можна використовувати в HTML-елементах, таких як: #### `` ```html ``` - У цьому випадку, якщо ширина екрану менша або дорівнює `768px`, стилі з файлу `styles.css` будуть завантажені і застосовані. - Але, якщо ширина екрану більша за `768px`, `styles.css` все одно буде завантажено (без [блокування візуалізації](https://web.dev/articles/critical-rendering-path/render-blocking-css)), але стилі не будуть застосовані. Давайте ще раз: - Якщо медіа-запит атрибуту `media` оцінюється як `true` (у цьому випадку, якщо ширина менша або дорівнює `768px`), то цей `.css` файл і його вміст буде завантажено з [блокуванням візуалізації](https://web.dev/articles/critical-rendering-path/render-blocking-css), і його стилі будуть застосовані як зазвичай. - Але якщо медіа-запит оцінюється як `false`, то файл буде завантажено без блокування візуалізації, і стилі застосовані не будуть. #### ` ``` - Якщо медіа-запит виконується, стилі всередині `