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

Я постараюсь не быть скучным во время предоставления информации.
однако это чертовски сложно (поэтому не ждите многого от ленивого разработчика фронтенда).

Да начнется игра!
Начну с кучи.
куча и стек — это просто структуры данных, движок JS использует их для хранения данных (или для управления памятью, если хотите).

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

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

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

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

вернуться к нашему скучному объекту, всякий раз, когда вы создаете объект, куча и стек выделяют память для этого объекта.
выделенное пространство в куче будет содержать фактические данные, в то время как выделенное пространство стека будет содержать ссылку на созданное пространство в куче.
этот механизм происходит потому, что стек может хранить только статическую информацию, в то время как куча может содержать динамическую информацию.
(динамические, то есть данные, которые могут увеличиваться и уменьшаться в размере. Статические, противоположные динамическим.)

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

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

в памяти переменная x содержит значение 10.
и x имеет место в стеке, поэтому движок JS знает, где его найти, если мы будем использовать его в будущем.

когда мы назначаем y равным x, JS-движок создает новое пространство в стеке для этой новой переменной и копирует содержимое x в новую переменную (y).
таким образом, делая их отличными друг от друга и уникальными .
вся эта чепуха создает то, что разработчики называют «по значению».
как вы можете видеть в фрагменте кода ниже, изменения, которые мы применили к переменной y, повлияли только на y по причине, которую мы только что объяснили. .

let x = 10;
let y = x; // A new memory space is created to hold a copy of the value 10
y = 20;    // Changes made to y do not affect the original value of x

console.log(x); // Output: 10
console.log(y); // Output: 20

теперь, когда мы рассмотрели «по значению», «по ссылке» будет легче понять.

Как я объяснял ранее, когда вы создаете объект (массив — это объект в JS), значение этого нового объекта будет сохранено внутри кучи.
однако ссылка на этот адрес будет храниться внутри стека.
используя ту же логику, что и в предыдущем примере.
мы создадим копию переменной arr1 в новую переменную arr2.
однако на этот раз обе переменные будут указывать на одно и то же место и не будут различаться.

мы уже знаем, что произойдет, когда мы создадим переменную arr1 (если вы не дойдете до середины статьи, где я объясняю, как объекты сохраняются в стеке и куче).
когда мы присваиваем от arr1 до arr2 стек также выделяет память для новой переменной. однако, поскольку arr1 содержит не фактический объект, а адрес памяти, указывающий на адрес памяти объекта внутри кучи, механизм JS скопирует тот же адрес в новое пространство памяти, созданное в стеке.

в результате обе переменные теперь указывают на один и тот же адрес в куче, и если мы изменим одну из переменных (как мы можем видеть во фрагменте кода ниже), мы повлияем на обе переменные.

let arr1 = [1, 2, 3];
let arr2 = arr1; // arr2 holds a reference to the same array as arr1
arr2.push(4);    // Changes made to arr2 affect the original array arr1

console.log(arr1); // Output: [1, 2, 3, 4]
console.log(arr2); // Output: [1, 2, 3, 4]

Я надеюсь, что вы найдете эту статью полезной и легкой для восприятия.
Спасибо за чтение и хорошего дня.
не стесняйтесь делиться своими отзывами через LinkedIn.