Какие типы данных можно передать по ссылке?

Передача типов данных по ссылке в JavaScript

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

По значению (Value Types)

Примитивные типы передаются по значению — создаётся копия:

let a = 5;
let b = a;
b = 10;

console.log(a); // 5 (не изменилось)
console.log(b); // 10

// Каждая переменная имеет свою копию значения

Примитивные типы:

• Number: 42, 3.14, Infinity, NaN
• String: 'hello', "world"
• Boolean: true, false
• Undefined: undefined
• Null: null
• Symbol: Symbol('id')
• BigInt: 123n

По ссылке (Reference Types)

Объекты и массивы передаются по ссылке — разные переменные указывают на один объект:

let obj1 = { name: 'John' };
let obj2 = obj1;  // Обе переменные указывают на один объект

obj2.name = 'Jane';
console.log(obj1.name); // 'Jane' (изменилось!)

Типы, передаваемые по ссылке:

• Object: {}, функции, классы
• Array: [], с методами
• Function: function() {}
• Date: new Date()
• RegExp: /pattern/
• Map: new Map()
• Set: new Set()
• WeakMap, WeakSet
• Promise

Примеры для разных типов

Объекты

const user1 = { name: 'John' };
const user2 = user1;

user2.age = 30;
console.log(user1.age); // 30 (изменилось)

// Обе переменные указывают на один объект в памяти

Массивы

const arr1 = [1, 2, 3];
const arr2 = arr1;

arr2.push(4);
console.log(arr1); // [1, 2, 3, 4] (изменилось)

Функции

function sayHi() { return 'Hi'; }
const func1 = sayHi;
const func2 = sayHi;

// Обе переменные указывают на одну функцию
func1 === func2; // true

Date

const date1 = new Date('2025-01-01');
const date2 = date1;

date2.setDate(15);
console.log(date1.getDate()); // 15 (изменилось)

Map

const map1 = new Map([['key', 'value']]);
const map2 = map1;

map2.set('key2', 'value2');
console.log(map1.size); // 2 (изменилось)

Параметры функций

// Примитив — копируется
function changePrimitive(num) {
  num = 10;
}
let x = 5;
changePrimitive(x);
console.log(x); // 5 (не изменилось)

// Объект — ссылка передаётся
function changeObject(obj) {
  obj.name = 'Changed';
}
const user = { name: 'John' };
changeObject(user);
console.log(user.name); // 'Changed' (изменилось!)

Визуализация памяти

// По значению (примитив)
let a = 5;    // a указывает на значение 5
let b = a;    // b получает копию значения 5

// Память:
// a: 5
// b: 5

// По ссылке (объект)
let obj1 = { x: 5 };     // obj1 указывает на адрес объекта
let obj2 = obj1;         // obj2 получает ту же ссылку

// Память:
// obj1 → [адрес #2048]
// obj2 → [адрес #2048]
// [#2048]: { x: 5 }

Важные моменты при работе со ссылками

1. Сравнение объектов

const obj1 = { x: 5 };
const obj2 = { x: 5 };

obj1 === obj2; // false (разные ссылки, один и тот же объект)
obj1 == obj2;  // false

const obj3 = obj1;
obj1 === obj3; // true (одна и та же ссылка)

2. Копирование объектов (не путай)

// Неправильно — только копирует ссылку
const copy = original;

// Правильно — поверхностная копия
const copy = { ...original };
// или
const copy = Object.assign({}, original);

// Правильно — глубокая копия
const copy = JSON.parse(JSON.stringify(original));
// или
import _ from 'lodash';
const copy = _.cloneDeep(original);

3. Распространённая ошибка в React

// НЕПРАВИЛЬНО — мутирует state
const [user, setUser] = useState({ name: 'John' });

const updateName = () => {
  user.name = 'Jane'; // прямая мутация
  setUser(user);      // React не заметит изменение
};

// ПРАВИЛЬНО — новый объект
const updateName = () => {
  setUser({ ...user, name: 'Jane' });
};

Таблица типов

Итог

• Примитивы (Number, String, Boolean, etc.) — передаются по значению
• Объекты и массивы — передаются по ссылке
• Это вызывает неожиданные мутации если не знаешь о ссылках
• В React всегда создавай новые объекты вместо мутации
• Для сравнения объектов используй глубокое сравнение