Hoy una curiosidad rápida y simple pero puede que de interés, surgida a partir de la pregunta de un alumno...
Si tienes una fecha en una variable de JavaScript, por ejemplo, la fecha de hoy (recuerda que los meses comienzan a contarse en 0, por eso un 4 como segundo argumento del constructor):
var base = new Date(2019, 4, 2);
y la muestras por pantalla, por ejemplo con un alert(), verás esto:
que es justo lo que cabría esperar ya que estamos en España en horario de verano y por lo tanto, al no especificar la hora, supone las 12 de la noche (00:00) y GMT+2.
Sin embargo, si abrimos Firefox y vamos a su consola y mostramos la misma fecha veremos esto:
Lo que vemos es una fecha anterior, el 1 de mayo a las 10 de la noche... ¿Pero no es la misma fecha?
Para acabar de liar la cosa, si repetimos lo mismo en Chrome, veremos esto:
o sea, lo mismo que en el alert() de antes.
¿A qué se deben estas diferencias?
La explicación es muy sencilla. console.log es una instrucción pensada para el uso de programadores y que además es capaz de mostrar otras muchas cosas aparte de texto. Por ejemplo, si tenemos un elemento en una variable y lo mostramos por consola en Firefox, no solo nos muestra el contenido HTML del elemento, sino que podemos interactuar con él, resaltándose en la página al pasarle por encima, pudiendo seleccionarlo y desplegándolo para ver todo su contenido:
Pero si lo mostramos por pantalla, por ejemplo con un alert(), veremos simplemente esto:
¿Te da ya alguna pista?
Efectivamente: la consola muestra objetos y nos permite interactuar con ellos, mientras que un alert() y cualquier función que se dirija a la interfaz de usuario no tiene esa capacidad. Además, la consola puede funcionar de manera diferente según el navegador, de ahí la diferencia entre Firefox y Chrome.
En el caso concreto de alert() lo que ocurre es que siempre llama implícitamente al método toString() de lo que se pretende mostrar para asegurarse de que es una cadena de texto. Si es una fecha, toString() por defecto siempre la muestra en el formato definido por ECMA-262 2018 (antes de eso era dependiente de cada implementación, aunque era bastante consistente y ahora está ya estandarizado, aquí tienes un resumen más digerible), que resulta en lo que se veía en una de las figuras anteriores y que, sino se indica otra cosa, supone que la fecha está en la zona horaria actual del usuario y no en UTC.
En el caso de Chrome, al mostrar la fecha por consola ésta se muestra también como una cadena y no como un objeto, ya que ningún estándar determina cómo debe hacerse esto y en este caso la gente de Google ha optado por hacerlo de manera diferente a Firefox, usando también el toString() para mostrarlo por consola. Sin embargo si lo que mostramos en la consola de Chrome es un elemento del DOM lo mostrara de la misma manera que lo hacía Firefox, pudiendo también interactuar con él y demás.
El resumen es: lo que se muestra por consola y lo que se muestra por pantalla no tienen por qué coincidir ni tampoco tienen porque qué coincidir lo que se ve por consola en dos navegadores diferentes. En el caso de las fechas, que en JavaScript son bastante complicadas de gestionar en cuanto entran en juego las zonas horarias, la cosa se complica más aún.
En fin, es más una curiosidad que otra cosa, pero puede que te resulte útil en alguna ocasión saberlo...
💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor
