Teoría: Empaquetado y Desempaquetado (Boxing)

Cualquier método es una función en una propiedad de un objeto. Cuando llamamos a un método, estamos llamando a una función de esa propiedad:

const obj = {
  sayHello: () => console.log('¡Hola!'),
};

obj.sayHello();

Sin embargo, JavaScript permite llamar a funciones no solo en objetos, sino también en valores primitivos:

'códica'.toUpperCase(); // "CÓDICA"

De este código se puede deducir que una cadena también es un objeto. En realidad, esta conclusión es incorrecta. En JavaScript, las cadenas, los valores lógicos, null y los números se implementan como valores primitivos, es decir, no tienen métodos.

Cuando se llaman métodos en valores primitivos en JavaScript, el valor se envuelve automáticamente en un objeto y se llama al método en ese objeto. Después de eso, el objeto se desempaqueta automáticamente en un valor primitivo.

Para cada tipo primitivo en JavaScript, hay un constructor que crea un objeto a partir de un valor primitivo. Es este constructor el que se llama cuando se realiza el envoltorio.

Para comprender este tema, hagamos un envoltorio manual en el ejemplo anterior. El constructor para cadenas es String:

const name = new String('códica');
console.log(`${name}`); // "códica"

Aquí creamos el objeto name y envolvimos en él el valor primitivo, la cadena 'códica'.

Luego se desempaqueta el valor primitivo del objeto. Para ello, JavaScript llama al método valueOf() en el objeto:

const name = new String('códica');
// También se puede llamar de forma independiente
name.valueOf(); // "códica"

Lo mismo se aplica a otros tipos:

const number = new Number(100);
number.valueOf(); // 100

const bool = new Boolean(true);
bool.valueOf(); // true

El método valueOf() se llama como resultado de diferentes operaciones en el objeto:

const number = new Number(100);

const newName = `${number + 0} es un número grande`; // "¡100 es un número grande!"

En el ejemplo anterior, calculamos el valor de number y lo concatenamos en una cadena. Para hacer esto, sumamos number + 0. Gracias a esto, JavaScript llamó automáticamente al método valueOf() en el objeto number para calcular su valor para la operación de suma.

Podemos sobrescribir el método valueOf():

const number = new Number(100);
number.valueOf = () => 99999;

const newName = `${number + 0} es un número grande`; // "¡99999 es un número grande!"

Conclusión

Cuando llamamos a métodos en valores primitivos, JavaScript envuelve automáticamente esos valores en objetos, llama a los métodos y desempaqueta los valores nuevamente. El desempaquetado ocurre no solo en valores primitivos, sino también en objetos normales cuando participan en cálculos.

En esta lección, nos familiarizamos con el método valueOf(), que se llama automáticamente cada vez que se desempaqueta un objeto.