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.