JavaScript основи

Змінні, функції, DOM, асинхронність, замикання та ES6+ — перевірте знання JavaScript для веб-розробки. 20 питань.

8-10 хв 20 питань JavaScript

Оновлено:

JavaScript: мова веб-розробки

JavaScript -- єдина мова програмування, що працює нативно у всіх браузерах. Від клієнтської інтерактивності до серверних додатків (Node.js), мобільних застосунків (React Native) та десктопних програм (Electron). JavaScript входить у топ-3 найпопулярніших мов за рейтингами Stack Overflow, GitHub та TIOBE. ES6+ (ECMAScript 2015 і новіше) кардинально оновив мову: let/const, стрілкові функції, деструктуризація, модулі, класи, async/await.

Тип даних Приклади typeof
string"hello", 'world', `template`"string"
number42, 3.14, NaN, Infinity"number"
booleantrue, false"boolean"
nullnull (навмисна відсутність)"object" (баг)
undefinedundefined (не визначено)"undefined"
object{key: "value"}, [1, 2, 3]"object"
symbolSymbol("id")"symbol"

ES6+: let/const, стрілкові функції, деструктуризація

let та const замінили var: let для змінних значень, const для констант (не змінюється посилання). Стрілкові функції (=>) мають коротший синтаксис та лексичне this. Деструктуризація витягує значення з об'єктів та масивів: const {name, age} = user. Spread-оператор (...) копіює та об'єднує масиви й об'єкти. Template literals (`текст ${змінна}`) замінюють конкатенацію рядків. Модулі (import/export) організують код у файли. Optional chaining (?.) безпечно звертається до вкладених властивостей: user?.address?.city.

Методи масивів

  • map() -- трансформує кожен елемент
  • filter() -- фільтрує за умовою
  • reduce() -- зводить до одного значення
  • find() -- перший елемент за умовою
  • forEach() -- ітерація без повернення

Scope та замикання

  • Global scope -- доступний усюди
  • Function scope -- всередині функції
  • Block scope -- let/const у блоці {}
  • Closure -- функція "запам'ятовує" зовнішні змінні
  • Hoisting -- var піднімається, let/const ні

Асинхронність: Promise, async/await та Event Loop

JavaScript -- однопотокова мова з асинхронною моделлю. Event Loop обробляє callback-и з черги після завершення синхронного коду. Promise представляє майбутній результат операції: pending, fulfilled або rejected. Ланцюжок .then().catch() обробляє успіх та помилки. async/await -- синтаксичний цукор над Promise для лінійного коду замість вкладених callback-ів. fetch() виконує HTTP-запити та повертає Promise. DOM API (document.querySelector, addEventListener, classList) дозволяє JavaScript маніпулювати HTML-елементами на сторінці.

За даними Stack Overflow Developer Survey (2025), JavaScript залишається найпопулярнішою мовою програмування 13-й рік поспіль — її використовують 63% розробників. Екосистема npm налічує понад 2.5 млн пакетів. Сучасний JavaScript (ES6+) з async/await, деструктуризацією та модулями кардинально відрізняється від версії 2015 року. TypeScript, побудований на JavaScript, зростає найшвидше — його використання збільшилося з 12% до 38% за п'ять років.

Ключові концепції JS: замикання (closures) дозволяють функціям «запам'ятовувати» змінні з батьківського scope, промісі та async/await замінили callback hell для асинхронних операцій, event loop пояснює неблокуючу природу JavaScript. DOM-маніпуляція — основа фронтенду: querySelector, addEventListener, createElement. Fetch API замінив XMLHttpRequest для HTTP-запитів.

Про тест

Тест «JavaScript основи» містить 20 питань про типи даних, ES6+ синтаксис, замикання, Promise, async/await, DOM API, Event Loop, масиви та об'єкти.

Також рекомендуємо: TypeScript, React, Node.js та HTML і CSS.

Часті питання

Корисні матеріали

Статті з психології та нові тести — раз на тиждень