Si eres nuevo en JavaScript seguramente no has escuchado sobre este concepto, si no llegamos a comprender que es el Hoisting podremos llegar a tener problemas y errores muy extraños.

Para entender el concepto de Hoisting debemos conocer como es que son asignados los identificadores dentro de un scope. En JavaScript se hace de cuatro maneras:

1. Definidos por el lenguaje, por ejemplo el objeto this y el arreglo arguments.
2. Parámetros, cuando definimos una función con parámetros, esos identificadores únicamente pertenecen al scope de la función.
3. Funciones, cuando declaramos una función, por ejemplo: function foo(){...}.
4. Variables,  cualquier variable que declaremos, por ejemplo: var x,y;.

Es muy importante conocer, que cada vez que declaramos una función o variable, estas son movidas automáticamente a la parte superior del scope contenedor, a esto es que se le denomina hoisting. Considera el siguiente ejemplo.

function Invoice(){
    calculateTax();
    var today = new Date();
}

El código anterior declara la variable today al final de la función, ahora bien, el intérprete de JavaScript ejecutará el código anterior de la siguiente manera.

function Invoice(){
    var today;    //<---- Hoisting
    calculateTax();
    today = new Date();
}

Automáticamente la variable today es movida a la parte superior del scope contenedor, esto es así porque en JavaScript las variables pertenecen al scope de la función y no a bloques internos.

Otro aspecto a considerar es que en el ejemplo anterior la asignación no se movió de lugar, únicamente la declaración. El siguiente ejemplo las dos funcionen son exactamente igual.

function Invoice() {
    if (false) {
        var x = 1;
    }
    return;
    var y = 1;
}
function Invoice() {
    var x, y;     //<--- Hoisting
    if (false) {
        x = 1;
    }
    return;
    y = 1;
}

Como se observa, la variable x declarada dentro del bloque if fue movida al scope de la función. Esto es una característica muy importante que debemos conocer de JavaScript.

Sucede lo mismo para las funciones, y en ocaciones esto es el resultado que esperamos, observa el siguiente código.

function Invoice(){
    calculateTax();

    if(false){
        function calculateTax(){
            console.log('Se ejecuta!!');
        }
    }
}

Podríamos pensar que la función calculateTax no se va a crear porque esta dentro de un if donde nunca entrará la ejecución, pues bien, gracias al hoisting, esta función será ejecutada correctamente porque la función no pertenece al bloque sino al scope de la función Invoice y aunque el interprete nunca ejecute las líneas dentro del if esta función puede ser ejecutada sin problemas.

Como regla principal para evitar problemas, siempre declara las variables al inicio de una función, por ejemplo:

function Invoice(subtotal){
    var tax,
        tip,
        total;
 
    total = subtotal * tax + tip;
}

De esta manera podrás leer mejor el código y al mismo tiempo evitarás tener hoisting.

Happy Coding!