![VS [Front-end]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1sfz5B%2F5219802342310929784%3Fty%3Dl&w=48&q=75){kind=small}
VS [Front-end]
Open in Telegram
Вітаємо на каналі про JavaScript,який здивувує вас більше,ніж реклама,яка знає,що ви шукаєте в Інтернеті!На каналі ми збираємося розповісти вам все про JavaScript. Якщо у вас виникли питання зверніться до адміністраторів: -@vlad_sha2 -@alina_mytsa
Show more2 540
Subscribers
No data24 hours
-87 days
-2730 days
Posts Archive
![VS [Front-end]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1sfz5B%2F5219802342310929784%3Fty%3Dx&w=64&q=75){kind=small}
2 540
Як працює асинхронний JavaScript?📱
Асинхронний код дозволяє виконувати операції, які можуть займати тривалий час (наприклад, запити на сервер), не блокуючи інші процеси.
Це досягається за допомогою таких механізмів, як
callbacks, promises та async/await. Замість того, щоб чекати на завершення завдання, JavaScript продовжує виконувати інший код і повертається до асинхронної операції, коли вона завершиться.
🔸 Callback — функція, що викликається після завершення операції.
🔸 Promises — об’єкти, що представляють майбутній результат асинхронної операції (успіх або помилка).
🔸 async/await — спрощує роботу з асинхронним кодом, надаючи можливість писати його у стилі синхронного.
index.js
function fetchData(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = { name: 'Alice', age: 30 }; // Симулюємо отримання даних
if (data) {
resolve(data); // Викликаємо, якщо дані є
} else {
reject('Data not found');
}
}, 2000);
});
}
async function getUserData() {
try {
console.log('Fetching data...');
const userData = await fetchData('https://example.com/user');
console.log('Data received:', userData);
} catch (error) {
console.error('Error:', error);
}
}
getUserData();
Що тут відбувається?
1. Функція fetchData(url)
• return new Promise() — тут створюється promise (обіцянка). Це об’єкт, який представляє асинхронну операцію та її можливий результат у майбутньому. Усі promise мають два стани:
• resolve — операція завершилася успішно.
• reject — операція не вдалася (наприклад, виникла помилка).
• setTimeout(() => { ... }, 2000); — використовується для симуляції затримки на 2 секунди. Це затримка виконання операції, наче ми чекаємо на відповідь від сервера.
• const data = { name: 'Alice', age: 30 }; — після 2 секунд ми симулюємо отримання деяких даних, які в реальному світі могли б прийти від API.
• if (data) — перевіряється, чи є дані. Якщо дані є, викликається resolve(data), що передає отримані дані. Якщо даних немає, викликається reject('Data not found'), що означає помилку.
2. Функція getUserData()
• async перед функцією означає, що функція є асинхронною, і всередині неї можна використовувати ключове слово await для очікування завершення асинхронних операцій.
• try { ... } catch (error) { ... } — це блок для обробки помилок. Код у try виконується, а якщо трапляється помилка, вона перехоплюється в catch.
• console.log('Fetching data...'); — виводить повідомлення про початок асинхронної операції, щоб показати, що виконання коду триває.
• const userData = await fetchData('https://example.com/user'); — тут викликається функція fetchData, яка повертає promise. Ключове слово await змушує програму “чекати”, поки promise не завершиться (успішно або з помилкою). Під час цієї паузи інші частини коду можуть продовжувати виконуватися, не блокуючи основний потік.
Якщо promise буде вирішено успішно (через resolve), результат (дані) присвоюються змінній userData.
• console.log('Data received:', userData); — після отримання результату виводиться повідомлення з даними. Якщо виконання пройшло без помилок, ми побачимо об’єкт { name: 'Alice', age: 30 }.
• catch (error) — якщо щось піде не так (наприклад, буде викликано reject у fetchData), помилка буде перехоплена тут і виведена в консоль.
3. Виклик getUserData()
• Викликається асинхронна функція getUserData(), яка запускає ланцюжок дій, описаних вище.
Важливі моменти:
🔺 Асинхронна пауза з await — під час очікування відповіді від fetchData, виконання функції зупиняється, але основний потік не блокується.
🔺 Обробка помилок через try/catch — дозволяє безпечно працювати з асинхронними функціями і перехоплювати помилки в будь-який момент.
👀 Telegram | Youtube | LinkedIn
2 540
Трохи життєвого
Як мене «кинули» на гроші в IT-компанії ⬇️⬇️
У мене є декілька історій, які трапилися зі мною, однією з таких я зараз поділюся.
Тоді я був «зеленим», працював у компанії BeInWeb, розробляв сайти, верстав, програмував – загалом, сама звичайна робота веб-розробника.
Компанія спеціалізувалася на інтернет-магазинах, тож більшу частину часу я займався саме цим.
Тривожні дзвіночки почалися з моменту, як мене почали просити працювати з дому. Я тоді не бачив у цьому нічого такого, але не розумів, чому, тим паче, що до офісу мені було 5 хвилин пішки.
Через місяць настав час отримувати зарплату. Тоді я написав керівнику і наступного дня пішов до офісу. Там мене зустріли дві людини – керівник та його заступник, які відразу почали висувати мені претензії щодо виконаної роботи тощо. Відразу скажу, що під час розробки та тестування запитань щодо якості роботи, багів і т.д. мені не ставилося, було «все гуд, продовжуй».
Обидва розповідали мені, який я поганий, а я, як людина без досвіду в таких діалогах, не знав, що робити, та розумів, що нервувати не можна. Тож я попросив поговорити з керівником наодинці, щоб той заступник вийшов, адже мені було незручно, коли він постійно перебивав і говорив нісенітниці.
Він все ж таки вийшов і пішов кудись собі покурити, після чого я залишився з керівником наодинці. На всі його «запитання» щодо якості, швидкості роботи тощо я відповів аргументовано і правдиво.
Цей діалог тривав досить довго, і в кінці він мені сказав: «Вова, насправді все набагато простіше. Наші клієнти розірвали з нами договори, хоча все було нормально і нічого такого не прогнозувалося. А до тебе не було питань під час розробки, тому що з розробкою все було стабільно і без якихось великих проблем, як і на будь-якому іншому проекті».
Але зарплату за половину місяця моєї роботи мені так і не заплатили, тому що «не було чим».
На той час вони залишились мені винні близько 200 доларів.
І чесно, це було дуже смішно, тому що керівник (це був повністю його бізнес) мав дві машини – BMW і якийсь Mercedes, новенькі, не старі. Одна для літнього сезону – кабріолет, а інша для холодної погоди.
Чому я це написав? Тому що він сам про це постійно розповідав :)
Трохи довга історія вийшла, насправді я вже майже все забув, але деякі тези до сих пір пам'ятаю."
P.S Якось так я виглядав 🥲
2 540
Після легенького опитування побігли читати цікаву, а головне корисну статтю👀
Робота з формами вже давно стала буденністю для фронт-енд розробників, тому ця тема актуальна як ніколи. Зараз є величезна кількість різних інструментів для обробки форм, де одним із найпопулярніших є Formik.
Стаття розкриває переваги використання бібліотеки Formik для обробки форм у React. Вона пояснює, як Formik спрощує управління станом форм, валідацію та обробку подій, дозволяючи зосередитися на бізнес-логіці.
Демонструється, як легко налаштувати Formik, використовуючи прості приклади, включаючи валідацію через Yup.
Особливу увагу приділено інтеграції Formik з компонентами Material-UI для покращення UI/UX.
У статті також обговорюються найбільш поширені помилки під час роботи з формами та способи їх уникнення. Це чудове введення для тих, хто хоче підвищити продуктивність своїх форм у React.
🔗ПОСИЛАННЯ НА СТАТТЮ
#article
👀 Telegram | Youtube | LinkedIn
2 540
CSS Diner🥢
Прикольна невеличка гра для того, щоб згадати селектори CSS і як з ними працювати. Іноді приємно освіжити памʼять🍃
🔗ПОСИЛАННЯ
#resource
👀 Telegram | Youtube | LinkedIn
2 540
+4📽🎞Добірка фільмів для вас (там є навіть старі фільми, якщо хтось любить таке, бо ми так :))
1. “The Social Network” (2010) – драматична історія про заснування Facebook Марком Цукербергом. Фільм показує тернистий шлях від створення сайту до світової популярності, а також конфлікти й судові позови, що супроводжували цей процес.
2. “The Imitation Game” (2014) – біографічний фільм про Алана Тюрінга, який під час Другої світової війни створив машину для дешифрування нацистського коду “Енігма”. Тюрінг вважається піонером сучасного комп’ютерного програмування.
3. “WarGames” (1983) – школяр випадково проникає в систему військових комп’ютерів і запускає симуляцію ядерної війни, думаючи, що це лише гра. Після цього він намагається зупинити катастрофу.
4. “Tron” (1982) – програміст потрапляє у віртуальний світ комп’ютерних програм, де йому доводиться боротися за виживання та протистояти диктатурі, що панує у віртуальному світі.
5. “Ex Machina” (2014) – молодий програміст бере участь у тестуванні штучного інтелекту в ізольованій лабораторії. Питання, чи може робот мислити й відчувати як людина, стає центральним у сюжеті.
Дивилися щось із цього вже? Які Ваші враження?
#forfun
👀 Telegram | Youtube | LinkedIn
2 540
2 540
Короче, придумали такеʼ *потираю руки*😈
Задача:
Напишіть функцію, яка приймає масиви та кількість елементів для ітерації. Функція повинна повертати елементи з цих масивів, переходячи до наступного масиву після досягнення кінця поточного. Якщо всі масиви пройдено, ітерація продовжується знову з першого масиву.
Приклад:
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b'];
const result = iterateArrays([arr1, arr2], 7);
console.log(result); // [1, 'a', 2, 'b', 3, 1, 'a']
Давайте, де і як вам зручно (можна скріни, можна в коментарі просто), дуже хочеться подивитися хто як цікаво напише😋
👀 Telegram | Youtube | LinkedIn
2 540
В Hillel вийшов новий подкаст з Вовою 👀 пішли дивитися!
Скільки айтівця не годуй, він усе одно хантиться?
У новому YouTube подкасті «Цього разу» поговорили про те, що слід знати про ІТ-івців. Шукали відповіді з гостями, які є улюбленцями студентів і глядачів, але мають різний досвід та погляди на ІТ.
Volodymyr Shaitan — Senior Full Stack Developer в UKEESS Software House і викладач Hillel IT School. Дев’ять років працює розробником, викладає в школі курси з фронтенду, має крутий фан-клуб студентів та багато запитань до ІТ.
Євген Ламбов — Front-end Developer IT-департаменту Hillel IT School. Три роки працює розробником. Це його перший досвід в ІТ, де знайшов і реалізовує себе. Фанат ІТ та точно знає, «де питання і претензії навіть не планує шукати»)
🔗ПОСИЛАННЯ НА ПОДКАСТ
Чи можливо ви вже подивилися, що скажете?)
(попередній пост чомусь не можна було коментувати)
2 540
В Hillel вийшов новий подкаст з Вовою 👀 пішли дивитися!
Скільки айтівця не годуй, він усе одно хантиться?
У новому YouTube подкасті «Цього разу» поговорили про те, що слід знати про ІТ-івців. Шукали відповіді з гостями, які є улюбленцями студентів і глядачів, але мають різний досвід та погляди на ІТ.
Volodymyr Shaitan — Senior Full Stack Developer в UKEESS Software House і викладач Hillel IT School. Дев’ять років працює розробником, викладає в школі курси з фронтенду, має крутий фан-клуб студентів та багато запитань до ІТ.
Євген Ламбов — Front-end Developer IT-департаменту Hillel IT School. Три роки працює розробником. Це його перший досвід в ІТ, де знайшов і реалізовує себе. Фанат ІТ та точно знає, «де питання і претензії навіть не планує шукати»)
🔗ПОСИЛАННЯ НА ПОДКАСТ
Чи можливо ви вже подивилися, що скажете?)
2 540
Що ж таке Hoisting?📱
Hoisting у JavaScript — це механізм, за яким змінні та функції “піднімаються” на початок свого контексту під час виконання. Це означає, що оголошення змінних і функцій може відбуватися після їхнього використання в коді, оскільки під час виконання вони “піднімаються” на початок області видимості.
У випадку зі змінними, тільки їхнє оголошення піднімається, але не ініціалізація.
Наприклад, якщо ви оголосите змінну з використанням
var, вона буде доступна, але її значення до ініціалізації буде undefined.
Змінні, оголошені через let і const, також підлягають hoisting, але вони потрапляють у TDZ, де не можуть бути використані до їх фактичного оголошення.
Функції, оголошені через function, повністю піднімаються разом із їхнім кодом, що дозволяє викликати їх до моменту оголошення в коді.
Hoisting також впливає на функції, що оголошуються через function declaration, але не на ті, що оголошені через функціональні вирази (function expressions) або стрілкові функції.
Це означає, що ви можете викликати функцію до її оголошення, якщо вона визначена через function declaration, але якщо використовуєте вираз функції або стрілкову функцію, це викличе помилку.
hoistedFunc(); // Працює, бо function declaration піднімається
function hoistedFunc() {
console.log("Function is hoisted");
}
nonHoistedFunc(); // Помилка: nonHoistedFunc не є функцією
var nonHoistedFunc = function() {
console.log("Function is not hoisted");
};
