Как работает передача примитивного типа данных?

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

В JavaScript существует 7 примитивных типов данных, и они передаются по значению (by value), а не по ссылке. Это ключевое различие между примитивами и объектами.

Что такое примитивные типы?

// 7 примитивных типов в JavaScript:
1. string      - "hello", 'world', `template`
2. number      - 42, 3.14, Infinity, NaN
3. boolean     - true, false
4. undefined   - переменная не инициализирована
5. null        - явное отсутствие значения
6. symbol      - уникальные идентификаторы (ES6+)
7. bigint      - большие целые числа (ES2020+)

// Все остальное - объекты:
8. object      - {}, [], function() {}, Date, RegExp и т.д.

Передача по значению (By Value)

// Пример 1: Копирование строки
let a = 'hello';
let b = a;  // b получает копию значения 'hello'
b = 'world'; // изменяем b

console.log(a); // 'hello' - не изменилась!
console.log(b); // 'world'

// Пример 2: Копирование числа
let x = 10;
let y = x;  // y получает копию значения 10
y = 20;

console.log(x); // 10 - не изменилось!
console.log(y); // 20

// Пример 3: Копирование boolean
let isActive = true;
let isCopy = isActive;  // isCopy получает копию true
isCopy = false;

console.log(isActive); // true
console.log(isCopy);   // false

Передача примитивов в функции

// Пример: передача примитива в функцию
function increment(num) {
  num = num + 1;  // изменяем локальную копию
  console.log('Inside function:', num); // 11
}

let value = 10;
increment(value);
console.log('After function:', value); // 10 - не изменилась!

// Почему? Потому что функция получает копию значения, не саму переменную

Сравнение примитивов

// Примитивы сравниваются по значению
console.log(5 === 5);       // true
console.log('hello' === 'hello'); // true
console.log(true === true);  // true

// Но с типом важно учитывать:
console.log(5 === '5');     // false - разные типы
console.log(0 === false);   // false - разные типы

// Нестрогое сравнение (с приведением типов):
console.log(5 == '5');      // true - приводятся к одному типу
console.log(0 == false);    // true

Отличие от объектов (передача по ссылке)

// Объекты передаются по ссылке!
let obj1 = { name: 'John' };
let obj2 = obj1;  // obj2 получает ссылку на ТОТ ЖЕ объект

obj2.name = 'Jane';
console.log(obj1.name); // 'Jane' - ИЗМЕНИЛАСЬ!
console.log(obj2.name); // 'Jane'

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

// Для копирования объекта нужен shallow copy:
let obj3 = { ...obj1 };  // Создаем копию объекта
obj3.name = 'Bob';
console.log(obj1.name); // 'Jane' - не изменилась
console.log(obj3.name); // 'Bob'

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

// Пример: функция не может изменить примитив извне
function changePrimitive(value) {
  value = 999;
}

let num = 42;
changePrimitive(num);
console.log(num); // 42 - не изменилась!

// Пример: но можно вернуть новое значение
function addTen(value) {
  return value + 10;
}

let result = addTen(5);
console.log(result); // 15

Тип coercion (приведение типов)

// JavaScript автоматически приводит типы в некоторых ситуациях
console.log('5' + 3);        // '53' - число приводится к строке
console.log('5' - 3);        // 2 - строка приводится к числу
console.log(true + 1);       // 2 - boolean приводится к числу
console.log(false + 1);      // 1

// Явное приведение типов:
console.log(String(5));      // '5'
console.log(Number('5'));    // 5
console.log(Boolean(0));     // false
console.log(Boolean(1));     // true

Immutability примитивов

// Примитивы неизменяемы (immutable)
let str = 'hello';
str[0] = 'H';  // попытка изменить первый символ
console.log(str); // 'hello' - не изменилась!

// Правильный способ - создать новую строку:
str = 'H' + str.slice(1);  // 'Hello'

// То же с числами:
let num = 5;
num = num + 10;  // создается новое значение, не изменяется старое

React и примитивы

// Пример: React и примитивные типы
export function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);  // count - примитив, передается по значению
  };

  return <button onClick={handleClick}>{count}</button>;
}

// Пример: передача примитива в компонент
export function Display({ value, label }) {
  // value - примитив, если родитель изменит свой value,
  // это не повлияет на локальный value компонента
  
  return <div>{label}: {value}</div>;
}

// Использование:
<Display value={42} label="Count" />

Сравнение в React (зависимости)

// Пример: зависимости в useEffect с примитивом
export function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Count changed');
  }, [count]); // count - примитив, сравнивается по значению

  // Если count был 5, и снова стал 5, эффект НЕ сработает
}

// Пример: с объектом (проблема!)
export function ProblemComponent() {
  const [count, setCount] = useState(0);
  const config = { limit: 100 };  // Каждый рендер - новый объект!

  useEffect(() => {
    console.log('Config changed');
  }, [config]); // config - объект, сравнивается по ссылке
  // Эффект будет срабатывать каждый рендер!
}

Итого:

1. Примитивы передаются по значению — копируется само значение
2. Примитивы неизменяемы — можно создать новое значение, но не изменить старое
3. Сравнение — примитивы сравниваются по значению
4. В функциях — изменение примитива в функции не влияет на оригинальную переменную
5. В React — примитивы в зависимостях сравниваются правильно

Понимание разницы между примитивами и объектами критично для написания надежного JavaScript кода.