What is boxing in the context of JavaScript?

In JavaScript, "boxing" is the process of automatically converting a primitive value (such as a string, number, or boolean) into a temporary wrapper object of the corresponding built-in constructor (String, Number, Boolean) when attempting to access its properties or methods.

This occurs when you access a property or method of a primitive as if it were an object. JavaScript temporarily creates a wrapper object, performs the operation with this object, and then destroys it.

Examples:

// String primitive
let s = "Hello";

// Accessing the length property: boxing to a String object
console.log(s.length); // 5

// Accessing the toUpperCase() method: boxing to a String object
console.log(s.toUpperCase()); // HELLO

// Number primitive
let n = 123;

// Accessing the toString() method: boxing to a Number object
console.log(n.toString()); // "123"

// Boolean primitive
let b = true;

// Accessing the valueOf() method: boxing to a Boolean object
console.log(b.valueOf()); // true

It is important to understand that primitives themselves do not have properties or methods. Boxing makes working with primitives more convenient by allowing the use of object access syntax to perform operations.

Boxing occurs implicitly. You do not create a wrapper object explicitly (although it is possible using new String(), new Number(), new Boolean(), but this is not recommended).

Differences between primitives and wrapper objects:

	Primitive	Wrapper Object
Type	String, Number, Boolean, Symbol, Null, Undefined, BigInt	Reference to an object
Mutability	Immutable	Mutable
Comparison	Value comparison	Reference comparison
Creation	Literal, typeof returns primitive type	new, typeof returns 'object'