Ghostly Frontend

// Суммирование чисел
const numbers = [10, 20, 30, 40];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // → 100

// Преобразование массива в объект
const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

const usersById = users.reduce((acc, user) => {
  acc[user.id] = user.name;
  return acc;
}, {});

console.log(usersById);
// → { 1: "Alice", 2: "Bob", 3: "Charlie" }

// Группировка элементов по условию
const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];

const fruitCount = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

console.log(fruitCount);
// → { apple: 3, banana: 2, orange: 1 }

// Функциональная обработка: фильтрация + трансформация за один проход
const products = [
  { name: "Laptop", price: 1000, inStock: true },
  { name: "Mouse", price: 25, inStock: false },
  { name: "Keyboard", price: 80, inStock: true }
];

const availableProductNames = products.reduce((acc, product) => {
  if (product.inStock) {
    acc.push({ name: product.name, price: product.price });
  }
  return acc;
}, []);

console.log(availableProductNames);
// → [{ name: "Laptop", price: 1000 }, { name: "Keyboard", price: 80 }]

// Копирование массива
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // → [1, 2, 3]

// Объединение массивов
const arr1 = [1, 2];
const arr2 = [3, 4];
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // → [1, 2, 3, 4]

// Копирование объекта
const user = { name: "Alice", age: 30 };
const userCopy = { ...user };
console.log(userCopy); // → { name: "Alice", age: 30 }

// Объединение и переопределение свойств
const userWithCity = { ...user, city: "Berlin" };
console.log(userWithCity); // → { name: "Alice", age: 30, city: "Berlin" }

const updatedUser = { ...user, age: 31 };
console.log(updatedUser); // → { name: "Alice", age: 31 }

// Функциональное преобразование (добавление элемента без мутации)
const addNewSkill = (user, newSkill) => ({
  ...user,
  skills: [...(user.skills || []), newSkill]
});

const userWithSkills = addNewSkill({ name: "Alice" }, "JavaScript");
console.log(userWithSkills); // → { name: "Alice", skills: ["JavaScript"] }

📦 Полезно для создания интерактивных UI, модальных окон, динамических списков, табов и любых элементов, которые должны обновляться без перезагрузки страницы

<div id="container"></div>
<button id="add-btn">Добавить элемент</button>



const container = document.getElementById("container");
const button = document.getElementById("add-btn");

// Создание и добавление нового элемента
button.addEventListener("click", () => {
  const newItem = document.createElement("p");
  newItem.textContent = "Новый элемент";
  container.appendChild(newItem);
});

// Изменение содержимого
container.innerHTML = "<strong>Обновлённый текст!</strong>";

// Удаление элемента
setTimeout(() => {
  container.remove();
}, 5000);

Используйте classList.add/remove/toggle для управления классами и стилями.

Минимизируйте количество прямых изменений DOM для повышения производительности.

Для сложных проектов лучше использовать фреймворки (React, Vue, Angular), которые управляют DOM более эффективно.