Задачи по JavaScript для начинающих

Запрос обычно возникает в момент, когда теория уже прочитана, но самостоятельный код еще дается тяжело. Поэтому цель здесь практическая: закрепить базовый JavaScript на задачах с массивами, строками, функциями и объектами

Для JavaScript-задач важно связывать код с интерфейсом: массивы, строки и объекты почти всегда обслуживают форму, список, фильтр, карточки или состояние

Нормальный ритм такой: одна задача, один файл, один запуск, одна проверка. Если сразу открыть десять решений, кажется, что материал понятен, но при самостоятельной попытке появляются пробелы

Что повторить перед практикой

Перед решением полезно освежить:

• переменные
• условия
• циклы
• массивы
• объекты
• функции
• DOM

Если какая-то тема пока слабая, не пропускайте ее. Выберите задачу, где она встречается отдельно, и разберите ее на маленьком примере

Задачи с решениями

Задача 1: Сумма массива

Посчитайте сумму чисел в массиве

Один из вариантов решения:

const numbers = [2, 4, 6];
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum);

Проверьте обычный случай, пустые данные и вариант с повторяющимися значениями, если это подходит к условию

Задача 2: Фильтр задач

Оставьте только выполненные задачи

Один из вариантов решения:

const tasks = [
  { title: 'HTML', done: true },
  { title: 'CSS', done: false },
];
const completed = tasks.filter((task) => task.done);
console.log(completed);

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

Задача 3: Проверка email

Сделайте простую проверку строки перед отправкой формы

Один из вариантов решения:

const email = 'name@example.com';
const isValid = email.includes('@') && email.includes('.');
console.log(isValid);

Отдельно проверьте пустую строку, адрес без @, адрес без точки и строку с пробелами по краям

Задача 4: Группировка по статусу

Разложите элементы по статусу

Один из вариантов решения:

const orders = [
  { id: 1, status: 'new' },
  { id: 2, status: 'paid' },
  { id: 3, status: 'new' },
];
const grouped = orders.reduce((acc, order) => {
  if (!acc[order.status]) {
    acc[order.status] = [];
  }
  acc[order.status].push(order);
  return acc;
}, {});
console.log(grouped);

Если решение кажется очевидным, попробуйте объяснить, какая строка выполняет главное действие

Задача 5: Счетчик кликов

Сделайте простой счетчик состояния

Один из вариантов решения:

let count = 0;
function click() {
  count += 1;
  console.log(count);
}
click();
click();

Сравните результат с ожиданием до запуска: это быстро показывает, где была ошибка в рассуждении

Задача 6: Форматирование цены

Выведите цену в человекочитаемом виде

Один из вариантов решения:

const price = 1490;
console.log(new Intl.NumberFormat('ru-RU').format(price) + ' ₽');

Проверьте обычный случай, пустые данные и вариант с повторяющимися значениями, если это подходит к условию

По этой теме полезно отдельно посмотреть Идеи приложений на JavaScript для портфолио, чтобы расширить контекст и сравнить подходы

По этой теме полезно отдельно посмотреть Вопросы JavaScript на собеседовании, чтобы расширить контекст и сравнить подходы

Как разбирать решение

Готовое решение полезно только тогда, когда вы можете объяснить каждую строку. После просмотра ответа закройте его и попробуйте написать заново. Если не получается, значит, вы запомнили форму, но еще не поняли прием

Разбор делайте по схеме:

1. Какие данные есть в начале
2. Что нужно получить в конце
3. Какая операция связывает вход и результат
4. Где может появиться ошибка
5. Какие значения нужно проверить

После решения представьте, из какого элемента интерфейса пришли данные и куда результат должен попасть на странице

Как усложнять

После базового решения добавьте одно изменение: другой размер списка, пустой ввод, повторяющиеся значения, отрицательное число, строку с пробелами, неизвестный ключ, несколько одинаковых максимумов. Это не формальность. На таких проверках становится видно, понимаете ли вы решение или просто повторили пример

Не усложняйте сразу все. Одно изменение — один запуск. Если программа сломалась, вернитесь к предыдущей рабочей версии и найдите конкретную строку, где поведение изменилось

Частые ошибки

Не открывайте ответ слишком рано. Дайте себе хотя бы 10 минут на попытку: написать план, создать переменные, запустить черновой вариант

Не ограничивайтесь одним примером. Один запуск доказывает только то, что программа сработала на одном наборе данных

Не игнорируйте сообщение об ошибке. В нем часто есть тип проблемы и строка

Не смешивайте несколько новых тем в одной задаче. Если не понятны и циклы, и списки, и функции, начните с самого слабого места отдельно

Возвращайтесь к трудным задачам через несколько дней. Повтор без подсказки показывает реальный прогресс лучше, чем первое решение рядом с ответом

План тренировки

1. Решите две простые задачи на базовый синтаксис
2. Решите две задачи на условия
3. Решите две задачи на цикл или перебор
4. Решите две задачи на коллекции
5. Вынесите повторяющуюся часть решения в функцию
6. Проверьте неудобные данные
7. Перепишите одну задачу с нуля на следующий день

Чек-лист

• Условие понятно без подсказок
• Входные данные выписаны
• Решение сначала описано словами
• Код запущен
• Проверен обычный пример
• Проверен неудобный пример
• Ошибка разобрана, а не стерта
• Решение можно объяснить вслух
• Есть похожая задача для закрепления

Еще задачи для закрепления

Задача 7: Удалить пустые строки

const values = ['Анна', '', '  ', 'Илья'];
const clean = values.filter((value) => value.trim() !== '');
console.log(clean);

Проверьте, что строка из пробелов тоже удаляется

Задача 8: Найти товар по id

const products = [
  { id: 1, title: 'Книга' },
  { id: 2, title: 'Клавиатура' },
];

const product = products.find((item) => item.id === 2);
console.log(product);

Проверьте id, которого нет в массиве, и обработайте undefined

Задача 9: Обновить статус задачи

const tasks = [
  { id: 1, title: 'HTML', done: false },
  { id: 2, title: 'CSS', done: false },
];

const updated = tasks.map((task) => {
  if (task.id === 2) {
    return { ...task, done: true };
  }
  return task;
});

console.log(updated);

Эта задача полезна перед переходом к React, потому что учит не менять объект напрямую

Задача 10: Сгруппировать товары по категории

const products = [
  { title: 'Книга', category: 'books' },
  { title: 'Монитор', category: 'tech' },
  { title: 'Клавиатура', category: 'tech' },
];

const grouped = products.reduce((acc, product) => {
  if (!acc[product.category]) {
    acc[product.category] = [];
  }
  acc[product.category].push(product);
  return acc;
}, {});

console.log(grouped);

Проверьте категорию, которая встречается один раз, и пустой массив товаров

Задача 11: Сделать короткую функцию форматирования

function formatUser(user) {
  return `${user.name} (${user.role})`;
}

console.log(formatUser({ name: 'Анна', role: 'admin' }));

Потом добавьте проверку, если роль не передана