В чем разница между типами данных простыми и сложными?

В чем разница между типами данных простыми и сложными?

Простые типы данных (primitive types) и сложные типы данных (complex/reference types) — это фундаментальное разделение в JavaScript. Различие в том, как они хранятся в памяти и как с ними работает интерпретатор.

Простые типы данных (Primitive Types)

Простые типы хранятся в стеке памяти и содержат само значение, а не ссылку на него. При присваивании копируется само значение.

Список простых типов:

// 1. number — числа
const count = 42;
const price = 19.99;
const infinity = Infinity;

// 2. string — текст
const name = 'John';
const message = "Hello";
const template = `Value: ${count}`;

// 3. boolean — истина/ложь
const isActive = true;
const hasErrors = false;

// 4. null — намеренное отсутствие значения
const empty = null;

// 5. undefined — переменная не инициализирована
let notDefined;
console.log(notDefined);  // undefined

// 6. symbol — уникальный идентификатор
const id = Symbol('user-id');
const id2 = Symbol('user-id');
console.log(id === id2);  // false (каждый symbol уникален)

// 7. bigint — большие целые числа
const huge = BigInt("123456789012345678901234567890");
const alsoBig = 100n;

Ключевой момент: копирование значения

// Простые типы копируют ЗНАЧЕНИЕ
let a = 10;
let b = a;  // Копировали значение 10
b = 20;

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

// В памяти два отдельных значения:
// Stack: a -> 10, b -> 20

Сложные типы данных (Complex/Reference Types)

Сложные типы хранятся в куче памяти (heap), а переменная содержит ссылку на этот объект. При присваивании копируется ссылка, а не сам объект.

Список сложных типов:

// 1. Object — базовый объект
const user = {
  name: 'John',
  age: 30
};

// 2. Array — массив
const items = [1, 2, 3, 4, 5];
const mixed = [1, 'text', true, null];

// 3. Function — функции
const greet = function(name) {
  return `Hello, ${name}`;
};

const arrow = (x) => x * 2;

// 4. Date — дата и время
const today = new Date();

// 5. RegExp — регулярные выражения
const pattern = /hello/i;

// 6. Map и Set — специальные коллекции
const map = new Map();
const set = new Set([1, 2, 3]);

// 7. WeakMap и WeakSet
const weakMap = new WeakMap();

Ключевой момент: копирование ссылки

// Сложные типы копируют ССЫЛКУ на объект
const obj1 = { name: 'John' };
const obj2 = obj1;  // Копировали ссылку, не объект!

obj2.name = 'Jane';

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

// В памяти одна копия объекта, две ссылки на неё:
// Heap:  { name: 'Jane' }
// Stack: obj1 -> (ссылка на Heap), obj2 -> (ссылка на Heap)

Сравнение

Сравнение значений

// ПРОСТЫЕ ТИПЫ — сравнение по значению
const a = 10;
const b = 10;
console.log(a === b);  // true (одинаковые значения)

const str1 = 'hello';
const str2 = 'hello';
console.log(str1 === str2);  // true

// СЛОЖНЫЕ ТИПЫ — сравнение по ссылке
const obj1 = { name: 'John' };
const obj2 = { name: 'John' };
console.log(obj1 === obj2);  // false (разные объекты в памяти)

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

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(arr1 === arr2);  // false (разные массивы)
console.log(arr1 === arr1);  // true (одна ссылка)

Проблемы с ссылками

// Проблема 1: случайная модификация
const original = { value: 100 };
const copy = original;  // Только копировали ссылку

copy.value = 200;
console.log(original.value);  // 200 (исходный изменился!)

// Решение: создать новый объект
const copy = { ...original };  // Shallow copy
copy.value = 200;
console.log(original.value);  // 100 (исходный не тронут)

// Проблема 2: вложенные объекты
const original = { user: { name: 'John' } };
const copy = { ...original };
copy.user.name = 'Jane';
console.log(original.user.name);  // 'Jane' (вложенный изменился!)

// Решение: глубокое копирование
const copy = JSON.parse(JSON.stringify(original));
copy.user.name = 'Jane';
console.log(original.user.name);  // 'John' (безопасно)

Функции и параметры

// С простыми типами передается ЗНАЧЕНИЕ
function modify(num) {
  num = 100;
}

let value = 10;
modify(value);
console.log(value);  // 10 (не изменилось)

// Со сложными типами передается ССЫЛКА
function modify(obj) {
  obj.value = 100;  // Меняем через ссылку
}

const obj = { value: 10 };
modify(obj);
console.log(obj.value);  // 100 (изменилось!)

typeof vs instanceof

// typeof для простых типов
console.log(typeof 42);         // "number"
console.log(typeof 'hello');    // "string"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"

// typeof для сложных типов (менее полезно)
console.log(typeof {});         // "object"
console.log(typeof []);         // "object" (массив — это объект!)
console.log(typeof null);       // "object" (баг JavaScript)

// instanceof для сложных типов
const arr = [1, 2, 3];
console.log(arr instanceof Array);    // true
console.log(arr instanceof Object);   // true

const date = new Date();
console.log(date instanceof Date);    // true
console.log(date instanceof Object);  // true

Практический пример: React State

// ПРОСТОЙ ТИП — можно переприсвоить
function Counter() {
  const [count, setCount] = useState(0);
  
  const increment = () => {
    setCount(count + 1);  // Новое простое значение
  };
  
  return <button onClick={increment}>{count}</button>;
}

// СЛОЖНЫЙ ТИП — нужно создать новый объект
function UserForm() {
  const [user, setUser] = useState({ name: '', email: '' });
  
  const updateName = (newName) => {
    // ❌ Неправильно
    // user.name = newName;  // Модификация!
    // setUser(user);        // React не заметит
    
    // ✅ Правильно
    setUser({ ...user, name: newName });  // Новый объект
  };
  
  return <input onChange={e => updateName(e.target.value)} />;
}

Таблица операций

Ключевые выводы

• Простые типы (number, string, boolean, etc.) хранят само значение в стеке
• Сложные типы (object, array, function) хранят ссылку на объект в куче
• При присваивании простых типов копируется значение, сложных — ссылка
• Сравнение простых типов по значению, сложных по ссылке
• Изменение сложного типа влияет на все переменные, ссылающиеся на него
• В React нужно создавать новые объекты, а не модифицировать существующие
• Для копирования используй spread оператор или JSON методы