Проблема изменения вложенных объектов при использовании 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

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

Сравнение объектов и Map в JavaScript

📌 Тип ключей:
Объект: Ключи приводятся к строкам. Любой нестроковый ключ, например объект, будет преобразован в строку.

Map: Ключи могут быть любого типа, включая объекты, функции и числа.

const obj = {};
const map = new Map();

const keyObj = {};
obj[keyObj] = 'value'; // Ключ преобразуется в "[object Object]"
map.set(keyObj, 'value'); // Ключ остается объектом

console.log(obj[keyObj]); // 'value'
console.log(map.get(keyObj)); // 'value'

📌 Порядок ключей:
Объект: Порядок ключей не гарантирован.

Map: Порядок ключей сохраняется в том порядке, в котором они были добавлены.

const obj = { b: 2, a: 1 };
const map = new Map([['b', 2], ['a', 1]]);

console.log(Object.keys(obj)); // ['b', 'a'] (порядок не гарантирован)
console.log([...map.keys()]); // ['b', 'a'] (порядок гарантирован)

📌 Итерация:
Объект: Нужно использовать Object.keys(), Object.values(), или Object.entries() для итерации.

Map: Поддерживает методы для итерации по умолчанию, включая map.keys(), map.values(), и map.entries().

const obj = { a: 1, b: 2 };
const map = new Map([['a', 1], ['b', 2]]);

for (const key in obj) {
  console.log(key, obj[key]);
}

for (const [key, value] of map) {
  console.log(key, value);
}

📌 Дополнительные методы:
Объект: Ограниченные возможности, требует использования Object.keys(), Object.values(), и других вспомогательных функций для работы с данными. Для очистки свойств нужно явно удалять каждое свойство.

Map: Обладает множеством удобных методов:
set(key, value): Добавляет элемент.
get(key): Получает значение по ключу.
has(key): Проверяет наличие ключа.
delete(key): Удаляет элемент.
clear(): Удаляет все элементы.

#frontend #javascript #map #object

Event loop: Как запомнить микро- и макротаски

❗️ Микротаски всегда выполняются сразу после текущей операции и всегда до следующей макротаски.

⚡️ Микротаски имеют приоритет. Как только появляется микротаска, она всегда выполняется первой.

⚡️ Макротаски — крупные задачи, такие как setTimeout, setInterval, выполнение основного кода скрипта и обработка событий. Они выполняются по очереди из своей очереди, но только после выполнения всех микротасок.

⚡️ Когда выполняется макротаска, и в процессе возникают микротаски (например, через Promise), все микротаски должны быть выполнены до того, как начнется следующая макротаска.

Микротаски:
- Promise: Все колбеки, добавленные с помощью then, catch, finally.
- process.nextTick: В Node.js используется для выполнения задачи до следующего прохода в цикле событий.
- MutationObserver: Колбеки, которые срабатывают при изменении DOM.

Макротаски:
- setTimeout и setInterval: Асинхронные вызовы с задержкой.
- setImmediate: (в Node.js) Вызовы, которые выполняются на следующей итерации цикла событий, после текущей макротаски.
- I/O задачи: Например, операции ввода/вывода (запросы к сети, чтение файлов).
- UI Rendering: Обновления пользовательского интерфейса (в браузере).
- Основной код скрипта: Тот код, который запускается в начале выполнения программы.

#frontend #javascript #eventloop

Чем отличаются циклы for...in и for...of в JavaScript

for...in
Цикл for...in используется для перебора свойств объекта (ключей), а также всех индексов массива, если он используется с массивом. Это важно: for...in перебирает ключи (индексы массива), а не значения.

Пример с объектом:

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2020
};

for (const key in car) {
  console.log(key, car[key]);
}

// make Toyota
// model Corolla
// year 2020

Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

// 0 apple
// 1 banana
// 2 cherry

for...of
Цикл for...of используется для перебора значений итерируемых объектов, таких как массивы, строки, Map, Set и т.д. Он перебирает значения.

Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
  console.log(fruit);
}
// apple
// banana
// cherry

Пример со строкой:

const name = 'Alice';

for (const char of name) {
  console.log(char);
}
// A
// l
// i
// c
// e

❓ Как запомнить
for...in – для индексов и свойств объекта.
for...of – для объектов итерируемых, значений.

Используйте for...in для обхода ключей объектов или индексов массива. Используйте for...of для обхода значений массивов, строк или других итерируемых объектов.

#frontend #javascript