[ITEM 3] QUESTION: Що таке FormData?

Об'єкт FormData у JavaScript є потужним і зручним інструментом для створення та маніпуляцій з наборами пар ключ-значення, які потім можуть бути легко відправлені на сервер з використанням асинхронних запитів, таких як fetch або XMLHttpRequest. Основний спосіб створення об'єкта FormData — передача в конструктор існуючої HTML-форми: const formData = new FormData(formElement). При цьому об'єкт автоматично зчитує всі поля введення, що мають атрибут name, включаючи текстові поля, випадаючі списки і навіть файли, вибрані користувачем через input типу file.

Окрім автоматичного збору даних з існуючої форми, ви можете працювати з FormData програмно, використовуючи вбудовані методи. Метод append(name, value) дозволяє додавати нові дані або додаткові значення до існуючих ключів. Якщо потрібно отримати конкретне значення за ключем, використовується метод get(name), а для видалення даних служить метод delete(name). Також об'єкт підтримує метод set(name, value), який перезаписує всі існуючі значення із зазначеним ім'ям на нове.

Для обходу всіх даних, що містяться в об'єкті FormData, передбачені спеціальні методи ітерації, такі як entries(). З його допомогою можна легко пройтися по всіх парах ключ-значення за допомогою циклу for...of, що особливо корисно для налагодження або попередньої валідації даних перед відправкою.

Головною перевагою FormData є вбудована підтримка мультимедійних даних. Ви можете додавати файли безпосередньо з input.files, і браузер автоматично сформує запит у форматі multipart/form-data, який коректно опрацьовується бекендом на будь-яких мовах програмування. Відправка таких даних за допомогою fetch виглядає вкрай лаконічно: достатньо передати об'єкт FormData як значення властивості body в конфігураційному об'єкті запиту, не дбаючи про ручне встановлення заголовків Content-Type, так як браузер встановить їх самостійно разом з необхідним унікальним роздільником.