Obtener el valor default de una propiedad CSS con Javascript

Un día me dio curiosidad saber qué display tiene un elemento HTML por default.

¿Cuál es el display de un <button>, <p>, <img>, <input>, <span>? 

Si bien hay sitios que ya tienen esa documentación, yo quería saber cómo obtener dicha información con JavaScript y pues...  googleando, uno también llega a aprender cosas interesantes.

Vamos a suponer que creo un <input> y quiero saber no sólo su display, sino también qué width tiene por defecto, el border  que se le da al <input>, etc.

La solución con la que llegue fue simple:

El hoisting con javascript

Este termino es un tema que me ha costado trabajo asimilar. De acuerdo con el curso básico de javascript que tomé en platzi:  

Hoisting es un término para describir que las declaraciones de variables y funciones son desplazadas a la parte superior del scope más cercano, scope global o de función. Esto sucede solamente con var y function .

Además de que esto ya no sucede con Ecmascript 6 sino con las versiones anteriores.

¿Qué me da a entender esto?

Pues que al declarar una variable o una función declarativa después de ser usadas (invocadas) en el código, el motor de javascript lo que hace es declararlas antes de ejecutar el código linea por linea. O en otras palabras desplazarlas a la parte superior del scope más cercano. 

Así, el valor de una variable usada antes de su declaración sería: undefined.

En el caso de una función  declarativa,  esta sí sería reconocida y podría ser usada como si se declarara antes de su invocación. 

A continuación muestro algunos ejemplos de mis apuntes del curso. Estos ejemplos se pueden replicar desde la consola del navegador presionando F12.

Usando var

Usando let

Usando const

Sin usar var, const y let

Con una función declarativa sí hay hoisting

Con una función expresiva no hay hoisting.