Проблема изменения вложенных объектов при использовании map

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

const persons = [{
  name: 'Ivan',
  address: {
    ul: 1
  }
}]

const newPersons = persons.map(person => {
  person.address.ul = 2
  return {...person}
})

console.log(persons)
console.log(newPersons)

⚠️ Что происходит:
- В исходном массиве persons есть объект с вложенным объектом address.
- Метод map создает новый массив newPersons, в котором каждый элемент копируется с использованием оператора расширения {...person}.
- Однако, несмотря на создание нового объекта верхнего уровня, вложенный объект address в обоих массивах (persons и newPersons) ссылается на один и тот же объект.

📌 Результат
Изменения, внесенные в newPersons, также повлияют на оригинальный массив persons, так как вложенные объекты не были скопированы глубоко.

✔️ Решение
Чтобы избежать этого, нужно использовать глубокое копирование вложенных объектов, например, с использованием JSON.parse(JSON.stringify(person)) или библиотек, которые поддерживают глубокое копирование.

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

const newPersons = persons.map(person => {
  return {
    ...person,
    address: { ...person.address, ul: 2 }
  }
})

#frontend #javascript

Типы и структуры данных

Типы данных и структуры данных часто путают, но это две разные концепции, которые играют важную роль в программировании.

📌 Типы данных — это категории, в которые классифицируются данные. Они определяют, какие операции можно выполнять с этими данными и как они хранятся в памяти. В JavaScript есть примитивные и ссылочные типы данных:

Примитивные типы данных: Number, String, Boolean, Null, Undefined, Symbol, BigInt.

Ссылочные типы данных: Object (включая массивы, функции и даты).

📌 Структуры данных — это способы организации и хранения данных в памяти таким образом, чтобы к ним было удобно обращаться и эффективно работать. В JavaScript структуры данных включают:

Массивы (Array): Упорядоченные списки элементов, доступ к которым осуществляется по индексу.

Объекты (Object): Коллекции пар "ключ-значение", где ключи — это строки (или символы), а значения могут быть любыми типами данных.

Наборы (Set): Коллекции уникальных значений, где каждое значение может появляться только один раз.

Карты (Map): Коллекции пар "ключ-значение", где ключи могут быть любого типа, не только строками.

❓ В чем разница?
Типы данных — это отдельные значения (например, число или строка), тогда как структуры данных — это контейнеры, организующие и хранящие эти значения для более сложных операций (например, массив или объект).
Тип данных определяет, что это за значение, а структура данных — как эти значения организованы.

#frontend #javascript

👍 Менторство | 🔝 Сообщество