Teoría: toString()

En el prototipo de objetos JavaScript, hay un "método mágico" llamado Object.prototype.toString(). Es mágico porque se llama automáticamente en los lugares donde se utiliza el objeto como una cadena. Esto ocurre regularmente durante el desarrollo, todos hemos visto mensajes como este: '[object Object]'.

const company = { name: 'Códica' };
company.toString(); // "[object Object]"
// El uso del objeto en una cadena provoca la llamada automática
console.log(`¡Amo a ${company}!`); // "¡Amo a [object Object]!"

¿Para qué se utiliza? En el desarrollo web, los objetos a menudo se convierten en cadenas, por ejemplo, al mostrarlos al usuario o al transmitir datos entre diferentes aplicaciones. Imagina una lista de algo, como una lista de cursos en Códica. La salida del nombre de cada curso se puede hacer así:

// Sintaxis del framework React
<h2>{course.name}</h2>
// salida
// <h2>Códica</h2>

Pero si definimos toString(), el código se simplifica:

// Sintaxis del framework React
<h2>{course}</h2>
// salida
// <h2>Códica</h2>

La ventaja aquí no solo radica en una escritura más corta, sino también en que generalmente hay muchas formas diferentes de salida. Incluso cuando estamos depurando, necesitamos la salida en el registro. En todas estas situaciones, tener toString() facilita el trabajo, ya que no es necesario convertir explícitamente los objetos en cadenas. Además, en el futuro, solo es necesario cambiar un lugar para que la salida cambie en todos los lugares.

El toString() en sí no es algo especial, es simplemente un método normal en el prototipo. Y dado que es así, podemos sobrescribirlo:

const company = {
  name: 'Códica',
  toString() {
    return this.name;
  },
};

company.toString(); // "Códica"
console.log(`¡Amo a ${company}!`); // "¡Amo a Códica!"

Lo mismo se puede hacer en el prototipo de cualquier constructor:

function Company(name) {
  this.name = name;
};

Company.prototype.toString = function toString() {
  return this.name;
}

const company = new Company('Códica');
console.log(`¡Amo a ${company}!`); // "¡Amo a Códica!"

Pero, ¿qué hacer si queremos mostrar el objeto "tal cual"? Esto puede ser necesario para analizar la estructura interna. Si este objeto no tiene toString() definido, obtendremos una salida muy poco informativa [object Object]. En ese caso, podemos convertir el objeto a JSON:

const company = new Company('Códica');
// ¡JSON es una cadena!
console.log(JSON.stringify(company)); // => '{"name":"Códica"}'