JavaScript з нуля: як почати у 2026 році

JavaScript з нуля варто починати не з React, не з товстої книжки й не з марафону на 10 годин, а з простого циклу: написав маленький код, запустив, побачив результат, виправив помилку. У 2026 році JavaScript лишається головною мовою браузера, а також активно використовується на сервері через Node.js, у мобільних і десктопних застосунках, автоматизації та тестуванні.

Якщо коротко: спершу вивчи основу мови, потім DOM — інтерфейс для роботи з HTML-сторінкою з JavaScript, далі асинхронність, тобто код, який чекає на відповідь мережі, файл або таймер, і лише після цього берися за фреймворк. Найважливіше — не «пройти курс», а зібрати власні малі проєкти й навчитися читати помилки.

У цій статті — практичний план, з чого почати вчити JavaScript, що пропустити на старті, які проєкти робити та як організувати навчання, щоб не кинути через два тижні.

1. Що таке JavaScript і чому він добрий для старту

JavaScript — це мова програмування, яка виконується в браузері та може змінювати сторінку без перезавантаження: реагувати на кліки, надсилати запити до API, перевіряти форми, оновлювати список товарів, малювати графіки. API — це узгоджений спосіб, яким одна програма звертається до іншої по дані або дію.

JavaScript також працює поза браузером. Node.js дає змогу запускати JavaScript на комп’ютері або сервері: читати файли, створювати вебсервер, писати скрипти, працювати з базою даних. Саме тому одна мова відкриває багато напрямів.

2. Мінімальний набір інструментів

Не треба встановлювати десяток програм. Для старту достатньо чотирьох речей.

1. Браузер Chrome або Firefox — для запуску коду на сторінці й роботи з DevTools.
2. VS Code — редактор коду. Можна використати будь-який редактор, але VS Code має зручні підказки й термінал.
3. Node.js LTS — стабільна версія Node.js для запуску JavaScript поза браузером.
4. Git — система контролю версій, яка зберігає історію змін у проєкті.

Перший файл можна запустити без складних налаштувань. Створи hello.js:

const name = 'Оля';

console.log(`Привіт, ${name}!`);

// Виведе:
// Привіт, Оля!

У терміналі запусти:

node hello.js

А в браузері перший код можна написати у DevTools → Console:

2 + 2;
// 4

Цього достатньо, щоб почати. Усе інше — збирачі, лінтери, TypeScript, фреймворки, Docker — додаватимеш тоді, коли з’явиться реальна потреба.

3. Дорожня карта: що вчити по черзі

Ось практичний план на 8 тижнів. Його можна розтягнути на 12–16 тижнів, якщо ти вчишся після роботи або навчання.

Дорожня карта вивчення JavaScript від інструментів до першого проєкту

Що не варто вчити одразу

На старті не обов’язково заглиблюватися в:

• Webpack, Vite, Babel — достатньо знати, що це інструменти для збирання проєктів;
• React або інший фреймворк — після основ мови буде значно легше;
• складні алгоритми — почни з масивів, рядків, об’єктів і простих задач;
• архітектуру великих застосунків — спершу навчися писати маленькі зрозумілі функції;
• TypeScript — корисний, але краще додати його після перших проєктів на JavaScript.

Як зрозуміти, що можна рухатися далі

Переходь до наступної теми, коли можеш пояснити попередню своїми словами й написати 3–5 коротких прикладів без підглядання. Не треба чекати «повного розуміння» — воно приходить після повторного використання теми в проєктах.

Добрий сигнал, що основа вже тримається: ти можеш подивитися на помилку в консолі, знайти рядок, де вона сталася, і самостійно перевірити 2–3 гіпотези.

4. Основи JavaScript: що має знати початківець

Змінні та типи даних

Змінна — це назва для значення. У сучасному JavaScript використовуй const, якщо змінну не треба перепризначати, і let, якщо значення змінюється. var у новому коді краще не використовувати: він має менш очевидні правила видимості.

const course = 'JavaScript';
let lessonsDone = 3;

lessonsDone = lessonsDone + 1;

console.log(course, lessonsDone);
// JavaScript 4

Основні типи, які треба впевнено розрізняти: рядок, число, булеве значення, null, undefined, масив, об’єкт.

const title = 'План навчання'; // рядок
const hours = 40; // число
const isFinished = false; // булеве значення
const mentor = null; // значення навмисно порожнє
let nextLesson; // undefined, бо значення ще не задане

console.log(typeof title, typeof hours, typeof isFinished);
// string number boolean

Умови та цикли

Умова виконує різний код залежно від значення. Для порівняння майже завжди використовуй === і !==, а не == і !=: так JavaScript не робитиме прихованих перетворень типів.

const score = 72;

if (score >= 80) {
  console.log('Чудово');
} else if (score >= 50) {
  console.log('Є прогрес');
} else {
  console.log('Потрібно повторити');
}

// Є прогрес

Цикл повторює дію. Для масивів часто зручніші методи map, filter, reduce, але звичайний for...of варто знати.

const topics = ['змінні', 'функції', 'масиви'];

for (const topic of topics) {
  console.log(`Повтори тему: ${topic}`);
}

// Повтори тему: змінні
// Повтори тему: функції
// Повтори тему: масиви

Функції

Функція — це повторно використовуваний блок коду. Вона приймає вхідні дані та повертає результат.

function calculateProgress(done, total) {
  if (total === 0) return 0;

  return Math.round((done / total) * 100);
}

console.log(calculateProgress(7, 10));
// 70

У сучасному коді часто побачиш стрілкові функції:

const formatLesson = (number, title) => `Урок ${number}: ${title}`;

console.log(formatLesson(4, 'Функції'));
// Урок 4: Функції

Не треба сперечатися, який запис «кращий». На старті важливіше розуміти, що функція має назву або змінну, параметри, тіло й результат. Пізніше ти окремо розбереш this, замикання та відмінності між оголошенням функції й функціональним виразом.

Масиви й об’єкти

Масив — це впорядкований список. Об’єкт — набір властивостей із назвами.

const lessons = ['змінні', 'умови', 'функції'];
const user = {
  name: 'Іван',
  streak: 5,
  isActive: true
};

console.log(lessons[0]);
console.log(user.name);
// змінні
// Іван

Корисні методи масивів:

const tasks = [
  { title: 'прочитати про const', done: true },
  { title: 'написати функцію', done: false },
  { title: 'зробити мініпроєкт', done: false }
];

const openTasks = tasks.filter((task) => !task.done);
const titles = openTasks.map((task) => task.title);

console.log(titles);
// [ 'написати функцію', 'зробити мініпроєкт' ]

Це одна з найважливіших навичок у JavaScript: брати список даних і перетворювати його на потрібний вигляд.

DOM, події та асинхронність

DOM — це модель HTML-сторінки, з якою JavaScript може працювати як з об’єктами. Наприклад, знайти кнопку, змінити текст, додати клас.

// Цей код працює у браузері на сторінці з елементом:
// <button id="save">Зберегти</button>
const button = document.querySelector('#save');

button.addEventListener('click', () => {
  console.log('Кнопку натиснули');
});

// Після кліку виведе:
// Кнопку натиснули

Асинхронність потрібна, коли програма чекає: відповідь сервера, файл, таймер. Promise — це об’єкт, який представляє майбутній результат: він або успішно виконається, або завершиться помилкою.

const loadUser = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');

  if (!response.ok) {
    throw new Error('Не вдалося завантажити користувача');
  }

  const user = await response.json();
  console.log(user.name);
};

loadUser();
// Leanne Graham

async/await робить асинхронний код схожим на звичайний покроковий код. Докладні пояснення синтаксису можна звіряти з MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript

5. Перші проєкти: вчи через результат

Курси дають напрям, але навичку формують проєкти. Для початку обирай задачі, які можна завершити за 2–6 годин, а не «великий застосунок на місяць».

Проєкт 1: лічильник звички

HTML може бути мінімальним, а логіка — у JavaScript:

let count = 0;

const increase = () => {
  count += 1;
  return count;
};

console.log(increase());
console.log(increase());
console.log(increase());
// 1
// 2
// 3

Після цього додай кнопку в HTML, виведення числа на сторінку й збереження в localStorage — сховище браузера для невеликих даних.

// Працює у браузері.
const state = {
  count: Number(localStorage.getItem('habitCount') ?? 0)
};

const save = () => {
  localStorage.setItem('habitCount', String(state.count));
};

state.count += 1;
save();

console.log(localStorage.getItem('habitCount'));
// 1

Проєкт 2: список справ із фільтром

Тут ти попрактикуєш масиви, об’єкти, події та рендеринг — створення HTML на основі даних.

const todos = [
  { id: 1, text: 'повторити масиви', done: true },
  { id: 2, text: 'зробити список справ', done: false },
  { id: 3, text: 'прочитати про Promise', done: false }
];

const getVisibleTodos = (items, filter) => {
  if (filter === 'done') return items.filter((item) => item.done);
  if (filter === 'open') return items.filter((item) => !item.done);

  return items;
};

console.log(getVisibleTodos(todos, 'open'));
// [
//   { id: 2, text: 'зробити список справ', done: false },
//   { id: 3, text: 'прочитати про Promise', done: false }
// ]

Проєкт 3: пошук погоди або курсів валют

Це вже робота з API. Ти надсилаєш запит, отримуєш JSON — текстовий формат даних, схожий на об’єкти JavaScript, — і показуєш результат.

const getPostTitle = async (id) => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);

  if (!response.ok) {
    throw new Error('Не вдалося отримати дані');
  }

  const post = await response.json();
  return post.title;
};

const main = async () => {
  const title = await getPostTitle(1);
  console.log(title);
};

main();
// sunt aut facere repellat provident occaecati excepturi optio reprehenderit

6. Як вчитися, щоб не кинути

Головна причина, чому люди кидають JavaScript, — не складність мови, а неправильний ритм. Вони дивляться багато відео, мало пишуть код, пропускають помилки й чекають, що впевненість з’явиться до практики. Насправді навпаки: впевненість з’являється після десятків малих зіткнень із кодом.

Цикл навчання JavaScript: вивчи, застосуй, повтори

Працюй короткими циклами

Один навчальний цикл:

1. Візьми одну тему: наприклад, filter.
2. Прочитай коротке пояснення або подивись 10–15 хвилин уроку.
3. Напиши 5 власних прикладів.
4. Додай тему в мініпроєкт.
5. Наступного дня повтори без підглядання.

Краще 40 хвилин щодня, ніж 5 годин раз на тиждень. JavaScript вимагає практичної пам’яті: синтаксис, помилки, спосіб думати функціями й даними закріплюються через повторення.

Веди журнал помилок

Створи файл mistakes.md і записуй:

• текст помилки;
• що ти хотів зробити;
• що було причиною;
• як виправив;
• короткий приклад правильного коду.

Наприклад:

const user = null;

// Помилка: не можна читати властивість name у null.
// console.log(user.name);

console.log(user?.name ?? 'Користувача немає');
// Користувача немає

Оператор ?. безпечно читає властивість, якщо об’єкт існує. Оператор ?? повертає запасне значення, якщо ліворуч null або undefined.

Не застрягай на одному поясненні

Якщо тема не дається, зміни формат: документація, відео, стаття, чужий код, власний приклад. Але не перестрибуй між курсами щодня. Обери один основний маршрут і доповнюй його точково.

Постав вимірювану ціль

Погана ціль: «вивчити JavaScript». Добра ціль: «за 8 тижнів зробити список справ, застосунок з API та сторінку з фільтрами; опублікувати код на GitHub». Так ти бачиш прогрес і не оцінюєш себе туманним «я ще нічого не знаю».

7. Типові помилки

1. Починати з фреймворку

React, Vue або Svelte не замінюють JavaScript. Якщо ти не розумієш масиви, об’єкти, функції та асинхронність, фреймворк здаватиметься магією.

Невдала послідовність:

1. React.
2. Нерозуміння стану й props — даних, які компонент отримує ззовні.
3. Повернення до map, filter, замикань і Promise.

Краща послідовність:

1. JavaScript-основа.
2. DOM і події.
3. Асинхронність.
4. Малий проєкт.
5. Фреймворк.

2. Лише дивитися уроки

Після години відео здається, що все зрозуміло. Але це пасивне впізнавання, не навичка. Правило просте: на 20 хвилин теорії має бути хоча б 40 хвилин коду.

3. Копіювати код без змін

Коли повторюєш приклад, одразу зроби три зміни: інші дані, інша назва функції, інша умова. Так мозок перестає запам’ятовувати картинку й починає розуміти механіку.

const prices = [120, 80, 250, 40];

const expensive = prices.filter((price) => price > 100);
const withDiscount = expensive.map((price) => price * 0.9);

console.log(withDiscount);
// [ 108, 225 ]

Тепер зміни поріг, знижку й масив. Це вже практика, а не переписування.

4. Ігнорувати помилки в консолі

Помилка — не провал, а повідомлення про те, де програма зупинилася. Вчися читати перший рядок помилки й номер файлу. Часто відповідь уже там.

const lessons = ['змінні', 'функції'];

console.log(lessons[5]);
// undefined

undefined тут не «зламав» програму. Він показує, що елемента з індексом 5 немає.

5. Пропускати англійські терміни

У JavaScript багато англомовних назв: callback, Promise, event, scope, closure. Callback — це функція, яку передають в іншу функцію, щоб викликати пізніше. Не перекладай їх насильно, а пояснюй зміст.

const greet = (name) => `Привіт, ${name}`;

const runWithName = (callback) => {
  return callback('Марія');
};

console.log(runWithName(greet));
// Привіт, Марія

6. Не перевіряти крайні випадки

Початківці часто пишуть код лише для «щасливого шляху»: коли дані є, сервер відповів, масив не порожній. Але навіть у малих проєктах варто перевіряти порожні списки, неправильний ввід і помилки мережі.

const getAverage = (numbers) => {
  if (numbers.length === 0) return 0;

  const sum = numbers.reduce((total, number) => total + number, 0);
  return sum / numbers.length;
};

console.log(getAverage([10, 20, 30]));
console.log(getAverage([]));
// 20
// 0

8. Перевір себе

Виконай завдання без підглядання, а потім звірся з відповідями.

1. Напиши функцію isAdult(age), яка повертає true, якщо вік 18 або більше.
2. Є масив чисел [3, 10, 17, 22, 5]. Отримай лише числа більші за 10.
3. Є масив користувачів з полями name і active. Отримай імена активних користувачів.
4. Напиши асинхронну функцію, яка завантажує пост з https://jsonplaceholder.typicode.com/posts/1 і повертає його title.
5. Поясни своїми словами різницю між null і undefined.

const isAdult = (age) => age >= 18;

console.log(isAdult(17));
console.log(isAdult(18));
// false
// true

const numbers = [3, 10, 17, 22, 5];
const biggerThanTen = numbers.filter((number) => number > 10);

console.log(biggerThanTen);
// [ 17, 22 ]

const users = [
  { name: 'Анна', active: true },
  { name: 'Петро', active: false },
  { name: 'Софія', active: true }
];

const activeNames = users
  .filter((user) => user.active)
  .map((user) => user.name);

console.log(activeNames);
// [ 'Анна', 'Софія' ]

const getPostTitle = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

  if (!response.ok) {
    throw new Error('Не вдалося отримати пост');
  }

  const post = await response.json();
  return post.title;
};

const main = async () => {
  console.log(await getPostTitle());
};

main();
// sunt aut facere repellat provident occaecati excepturi optio reprehenderit

9. Коротко

• JavaScript з нуля у 2026 році найкраще вчити через малі запущені приклади, а не через нескінченну теорію.
• Правильна послідовність: основи мови → масиви й об’єкти → DOM → асинхронність → перші проєкти → фреймворк.
• Для старту достатньо браузера, VS Code, Node.js і Git; складні інструменти додаси пізніше.
• Пиши код щодня або майже щодня: 30–60 хвилин регулярної практики дають більше, ніж рідкісні довгі ривки.
• Веди журнал помилок і збирай портфоліо з малих завершених проєктів.
• Не чекай моменту, коли «все стане зрозуміло». Розуміння приходить після практики, виправлень і повторення.