JavaScript: Структури даних та алгоритми, які варто знати кожному розробнику

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

У цій статті ми розглянемо ключові структури даних і алгоритми в JavaScript, їхні практичні приклади та коли їх варто використовувати.

🔧 Що таке структура даних?

Структура даних — це спосіб організації та зберігання інформації так, щоб вона була зручною для обробки.

У JavaScript більшість структур даних реалізовано “з коробки”, але розуміння того, як вони працюють під капотом — критично важливе для написання ефективного коду.

📦 Базові структури даних у JavaScript

1. Масиви (Array)

Найвідоміша та найвживаніша структура. JavaScript-масиви — динамічні, підтримують будь-який тип даних і мають безліч вбудованих методів (map, filter, reduce, splice тощо).

Коли використовувати:

• Потрібен індексований доступ до елементів.

• Часте додавання або видалення з кінця.

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[1]); // 'banana'

2. Об’єкти (Object)

Класична структура у форматі “ключ-значення”. Підходить для асоціативних даних.

const user = {
  name: 'Anna',
  age: 30
};
console.log(user['name']); // Anna

Альтернатива: Map (коли потрібно зберігати ключі будь-якого типу або ітерувати в порядку вставлення).

3. Мапа (Map) та Сет (Set)

const map = new Map();
map.set('key', 'value');

const set = new Set();
set.add(1).add(2).add(2); // лише унікальні значення

• Map — коли потрібен контрольований словник.

• Set — для зберігання унікальних значень (наприклад, унікальні теги в блозі).

🔁 Структури зі складною логікою

4. Стек (Stack)

LIFO (last-in, first-out) структура.
Методи: push, pop.

Приклад використання:

• Відкат дій (undo).

• Рекурсивні обчислення.

const stack = [];
stack.push(1);
stack.push(2);
console.log(stack.pop()); // 2

5. Черга (Queue) та Двостороння черга (Deque)

FIFO (first-in, first-out) структура.
Методи: enqueue, dequeue (реалізуються через push і shift).

Застосування:

• Обробка подій.

• Таймери.

• Менеджери задач.

const queue = [];
queue.push('task1');
queue.push('task2');
console.log(queue.shift()); // task1

6. Пов’язаний список (Linked List)

У JavaScript реалізується вручну. Підходить для частого додавання/видалення з середини.

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

🧮 Алгоритми, які варто знати

📊 Сортування

• Array.prototype.sort() — нативне, але не завжди стабільне.

• Реалізація вручну: Bubble sort, Merge sort, Quick sort.

Приклад: Сортування бульбашкою (Bubble sort)

function bubbleSort(arr) {
  let len = arr.length;
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

🔍 Пошук

• Лінійний пошук — простий, повільний.

• Бінарний пошук — для відсортованих масивів.

function binarySearch(arr, target) {
  let left = 0, right = arr.length - 1;
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    if (arr[mid] === target) return mid;
    arr[mid] < target ? left = mid + 1 : right = mid - 1;
  }
  return -1;
}

🧠 Рекурсія

Рекурсія — основа багатьох алгоритмів у JS, зокрема DFS (обхід дерев), генераторів комбінацій, та алгоритмів розгалуження.

function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

🌐 Реальні кейси застосування

• React — використовує стек для побудови дерева компонентів.

• Redux — зберігає стан у вигляді об’єкта (словар).

• GraphQL — оптимізує запити через дерева та рекурсивні алгоритми.

• Ігри або 3D-сцени — графи, дерева, стек для undo/redo.

📈 Чому це важливо?

Навіть якщо JavaScript абстрагує багато механік, розуміння алгоритмів і структур даних:

• дозволяє писати продуктивний код;

• полегшує проходження співбесід;

• допомагає вирішувати нетривіальні задачі ефективно;

• підвищує рівень «архітектурного мислення».

🧠 Висновок

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

Розбирайтеся не лише у фреймворках, а й у фундаменті — і тоді ви зможете вирішувати будь-яку задачу, незалежно від контексту. 🚀