Fundamentos Javascript - Hoisting

Fundamentos Javascript (II) - Definición Hoisting

Publicado el: 3 de Enero 2018 por Victor de Andrés Archivado en: Fundamentos | Javascript
javascript scope

En este artículo voy a seguir escribiendo sobre los conceptos básicos que todo desarrollador de Javascript deber dominar para ser un auténtico Javascript ninja. En esta ocasión vamos a ver el concepto Hoisting.

Un concepto tal vez menor y bastante sencillo, pero que una correcta compresión del mismo puede evitarte una gran cantidad de tiempo realizando depuraciones de tu código con comportamientos extraños y aparentemente extraños.

Para una mejor compresión del hoisting antes debes saber perfectamente como funciona el scope, a continuación te adjunto el link a un artículo mío anterior “Fundamentos Javascript (I) - Definición y tipos de Scope”, donde explico el concepto scope, ya que ambos están muy interrelacionados.

Definición de Hoisting

Hoisting significa que las declaraciones de las variables y las funciones son procesadas antes de que el código se ejecute, recuerda que Javascript es un lenguaje interpretado y eso significa que a menos que sea compilado se ejecuta en línea. Por ello el hoisting puede generar los siguientes resultados, que tal vez puedan parecer un poco confusos y sin sentido si no sabes que está aplicando este concepto.

  • Cuando estas leyendo el código puede parecer que estas utilizando una variable o una función antes de ser declarada.

  • Declarar cualquier variable o función en el cualquier parte del código es igual a definirlas al inicio del código.

Funcionamiento. Declaración vs definición.

Pero no en todos los casos se aplica el hosting. Dependiendo de la forma en que se inicialice una variable o función el funcionamiento de la misma puede sufrir variaciones. Siendo las reglas las siguientes:

  • Declaraciones => Se aplica hoisting

  • Definiciones => No se aplica hosting

Veámoslo con unos ejemplos, será más sencillo.

        
    // Declaración

    let nombreVariable;
    
    // Ejemplo Declaración

    nombreVariable = 'foo';
    console.log(nombreVariable);		// foo
    let nombreVariable;
        
    
        
    // Definición

    const nombreVariable = ‘foo’;
    
    // Ejemplo Definición

    console.log(nombreVariable);		// undefined
    const nombreVariable = ‘foo’;
        
    

Pero tal vez lo veamos mejor con las funciones.

        
    // Declaración

    muestraTexto();		

    function muestraTexto() {
        console.log('Muestra Texto');   // Muestra Texto
    }
        
    
        
    // Definción

    muestraTexto();   // TypeError: muestraTexto is not a function

    const muestraTexto = function() {
        console.log('Muestra Texto');
    }

        
    

Buenas practicas.

Es por esto por lo cual se recomiendan aplicar las siguientes reglas para escribir un mejor código.

  • Define siempre las variables antes de utilizarlas.

  • Las variables siempre se deben declarar en el inicio del scope al que pertenecen para que tu código se más limpio y fácil de leer.

Hasta aquí este post sobre los fundamentos de Javascript, en próximos post iremos avanzando poco a poco en los fundamentos de Javascript.

Comentarios
Escribe tu comentario