Як працює boxing / unboxing у JavaScript?

Повне пояснення

Що це і навіщо Boxing (обгортка) дозволяє примітивам, таким як number, string або boolean, поводитися як об’єкти, що дає доступ до методів (toString(), valueOf() тощо). Unboxing (розгортка) повертає первісне значення, коли потрібна арифметика або логічні порівняння.

Ключові принципи/терміни

• ToObject – внутрішня операція, що створює об’єкт‑обгортку.
• ToPrimitive – внутрішня операція, що повертає примітив.
• Об’єкти‑обгортки: Number, String, Boolean.
• Примітиви: number, string, boolean, symbol, bigint.

Як це працює (логіка)

1. При доступі до властивості примітива (x.length) викликається ToObject(x) → створюється об’єкт‑обгортка.
2. Методи або властивості викликаються на цьому об’єкті.
3. Після завершення операції обгортка знищується (garbage‑collected).
4. При арифметичних операціях або порівняннях (+, ==) викликається ToPrimitive → отримується первісне значення.

Практика і реалізація (JS/TS)

const num = 42;          // примітив
console.log(num.toString()); // boxing → Number object, then toString()
const str = 'hello';
console.log(str.length); // boxing → String object

let flag = true;
if (flag) console.log('ok'); // unboxing → boolean primitive

Тестування

import { expect } from 'chai';
describe('boxing/unboxing', () => {
  it('should call toString on number', () => {
    const spy = sinon.spy(Number.prototype, 'toString');
    5.toString();
    expect(spy.calledOnce).to.be.true;
    spy.restore();
  });
});

Альтернативи/порівняння

• У JavaScript обгортки створюються автоматично; в інших мовах (наприклад, Java) обгортки часто створюються явно (Integer, String).
• У TypeScript типи примітивів і об’єктних не розділяються в синтаксисі, але типи Number, String існують як інтерфейси.

Оптимізація та edge‑cases

• Часте використання обгорток може впливати на продуктивність через зайві алокації.
• Необхідно уникати порівнянь типу == між примітивом і об’єктом‑обгорткою, бо це викликає ToPrimitive і може призвести до неочікуваних результатів.

Часті помилки

1. new Number(5) == 5 → true, але об’єкт не еквівалентний примітиву.
2. new String('a') === 'a' → false, бо різні типи.
3. Використання Object.is(new Number(5), 5) → false.
4. Неочікуване NaN при Number(undefined).
5. Порівняння 0 == false → true, через ToPrimitive.
6. Перетворення Symbol('a') + '' → TypeError.
7. BigInt(10) == 10n → true, але типи різні.
8. new Boolean(false) в умовному операторі → true, бо об’єкт.

Дизайн‑рішення

• Якщо потрібна строгість типів, використовуйте === і явно перетворюйте примітиви.
• Для числових обчислень використовуйте Number(value) або шаблонні літерали.
• У бібліотеках, що працюють з великими даними, обмежуйте створення обгорток.

Cheatsheet

• ToObject(prim) → об’єкт‑обгортка.
• ToPrimitive(obj, hint?) → примітив.
• Методи: valueOf(), toString().
• Порівняння: == → викликає ToPrimitive; === → без перетворень.

Follow‑up питання

1. Які ще внутрішні операції пов’язані з конвертацією типів?
2. Як Symbol поводиться під час boxing/unboxing?
3. Чому new Boolean(false) в умовному операторі повертає true?