Оператор spread. Часть 1

Часть раздела Логика и поток путешествия по JavaScript на Coddy — урок 18 из 65.

Оператор расширения (...) имеет множество вариантов использования для JSON. Например, при выполнении следующей операции:

const obj1 = {key1: "123"}
const obj2 = obj1
obj1.key1 = "456
console.log(obj2.key1)

Что будет выведено?

console.log(obj2.key1)
// Вывод: "456"

Это может вас удивить! Хотя мы изменили только obj1, obj2 тоже изменился.

Это происходит потому, что когда мы присваиваем объекты напрямую (obj2 = obj1), мы создаем ссылку, а не копию. Обе переменные указывают на один и тот же объект в памяти.

Вот где оператор spread становится полезным. Давайте посмотрим, как создать настоящую копию:

const obj1 = {key1: "123"};
const obj2 = {...obj1};
obj1.key1 = "456";
console.log(obj2.key1);
// Вывод: "123"

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

Проверьте себя

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

Проверьте себя

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

Шпаргалка

Оператор расширения (...) создает копию объекта вместо ссылки:

// Ссылка (обе переменные указывают на один и тот же объект)
const obj1 = {key1: "123"}
const obj2 = obj1
obj1.key1 = "456"
console.log(obj2.key1) // Вывод: "456"

// Копирование с использованием оператора расширения
const obj1 = {key1: "123"}
const obj2 = {...obj1}
obj1.key1 = "456"
console.log(obj2.key1) // Вывод: "123"

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

Попробуйте сами

В этом уроке нет задания по программированию.

Проверьте себя

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