Вложенные структуры

Вложенные структуры — это когда один тип данных содержит другой: массив внутри объекта, объект внутри массива, или даже объект внутри массива внутри другого объекта. Это основа для представления реальных данных в приложениях: список задач, профили пользователей с контактами, ответы API.

Массивы внутри объектов

Часто используется для хранения списков, связанных с сущностью.

Пример: профиль пользователя с его задачами:

const user = {
  name: 'Иван',
  email: 'ivan@example.com',
  tasks: [
    'Починить свет',
    'Записаться к врачу',
    'Написать отчёт'
  ]
};

Доступ к элементам:

console.log(user.tasks[0]); // "Починить свет"

// Добавить новую задачу
user.tasks.push('Позвонить маме');

Объекты внутри массивов

Когда каждый элемент массива — это сложная сущность с несколькими полями.

Пример: список задач с метаданными:

const tasks = [
  {
    id: 1,
    title: 'Починить свет',
    completed: false,
    priority: 'high'
  },
  {
    id: 2,
    title: 'Записаться к врачу',
    completed: true,
    priority: 'medium'
  },
  {
    id: 3,
    title: 'Написать отчёт',
    completed: false,
    priority: 'low'
  }
];

Такой формат — стандарт для API, баз данных, локального хранилища.

Доступ к данным:

console.log(tasks[0].title); // "Починить свет"
console.log(tasks[1].completed); // true

Перебор:

for (const task of tasks) {
  if (!task.completed) {
    console.log(`Невыполнено: ${task.title}`);
  }
}

Пример: список задач с полями title, completed

Это базовый шаблон, который вы будете встречать повсеместно — в Todo-приложениях, CRM, админках.

const todoList = [
  { title: 'Сделать уроки', completed: false },
  { title: 'Купить хлеб', completed: true },
  { title: 'Позвонить коллеге', completed: false }
];

Как обновить статус задачи:

const index = 0;
todoList[index].completed = true;

Как отфильтровать невыполненные:

const incomplete = todoList.filter(task => !task.completed);

Как добавить новую:

todoList.push({ title: 'Убраться в комнате', completed: false });

Почему это важно

Вложенные структуры позволяют:

  • Описывать реальные сущности (пользователь → задачи → подзадачи)
  • Структурировать данные для хранения в JSON
  • Легко передавать их через API (REST, GraphQL)
  • Удобно отображать в интерфейсе (например, список задач в списке React)

Всегда структурируйте данные так, чтобы их было легко читать, изменять и передавать. Вложенные объекты и массивы — основа этого подхода.