1

Cuando ejecuto la función antes de ser declarada es normal que me de el error. Cannot access 'saludar' before initialization pero mi duda surge cuando ejecuto la misma función antes de ser declarada pero dentro de otra función.

saludar('Juan',24) //Ejecuto la función saludar antes de ser declarada

const saludar = (nombre, edad) => {
    console.log(`Hola ${nombre} tienes ${edad} años`)
}

Resultado = Cannot access 'saludar' before initialization

Pero cuando ejecuto la función justo antes de ser declarada dentro de otra función ya no me devuelve el error de antes.

const Ejecutar = () => {
    saludar('Juan', 24) //Ejecuto la función saludar antes de ser declarada pero dentro de 
    otra función.
}

const saludar = (nombre, edad) => {
    console.log(`Hola ${nombre} tienes ${edad} años`)
}
Ejecutar()

Resultado: Hola Juan tienes 24 años

Recién empiezo aprender a programar con JS y me surgió esta duda, Saludos!.

1
  • Cuando tu declaras una función su código no se ejecuta. No es hasta que llamas a la función que su código es ejecutado, y para cuando llamas a Ejecutar() ya el intérprete de javascript sabe cuál es la función saludar, porque justo llamas a la función después de declarar a saludar.
    – Jaime
    Commented el 16 feb. 2022 a las 2:34

2 respuestas 2

2

Existen básicamente 2 tipos de funciones: Function declaration y function expression.

En el caso de las function declaration se pueden declarar en cualquier parte dentro de un mismo bloque padre, en este caso es el script completo. Estas son las que utilizan la siguiente sintaxis.

function nombre(){.....}

En el caso de las function expression para poder utilizarlas es necesario declararlas antes, esto es sencillamente porque se ponen dentro de una variable y las variables deben estar declaradas previamente para poder ser utilizadas posteriormente. Estas son las que utilizan las siguientes sintaxis:

const funcion1 = ()=>{.....}

o

const funcion2 = function(){.....}

Dicho esto, lo que está sucediendo con tu código es lo siguiente:

En este caso saludar es del tipo expression por lo que al no estar definida antes te devuelve el error que mencionas.

saludar('Juan',24) //Ejecuto la función saludar antes de ser declarada

const saludar = (nombre, edad) => {
    console.log(`Hola ${nombre} tienes ${edad} años`)
}

// Resultado = Cannot access 'saludar' before initialization

En este otro caso lo que sucede es que declaras ejecutar del tipo expression que utiliza saludar, luego declaras saludar y finalmente invocas a la función Ejecutar. Como saludar está declarada en el código antes de llamar a Ejecutar esto funciona correctamente. Para probar esto podrías poner Ejecutar antes de la declaración de saludar y obtendrás nuevamente el error.

const Ejecutar = () => {
    saludar('Juan', 24) //Ejecuto la función saludar antes de ser declarada pero dentro de 
    otra función.
}

const saludar = (nombre, edad) => {
    console.log(`Hola ${nombre} tienes ${edad} años`)
}
Ejecutar()

//Resultado: Hola Juan tienes 24 años

Dejo documentación con información útil sobre hoisting, te ayudará a comprender mejor. https://developer.mozilla.org/es/docs/Glossary/Hoisting


Por último para resolver el primer caso sencillamente podrías reemplazar saludar por una función del tipo declaration.

Quedaría algo así:

saludar('Juan',24) //Ejecuto la función saludar antes de ser declarada

function saludar(nombre, edad) {
    console.log(`Hola ${nombre} tienes ${edad} años`)
}

// Resultado = Hola Juan tienes 24 años

0

El intérprete de Ecmascript usa una técnica conocida como hoisting, mediante la cual el código ejecutado es una copia del código interpretado pero con las declaraciones de variables, clases y funciones desplazadas al inicio del scope que las contiene.

La declaración de una función constituye en sí misma el cuerpo de la función, por lo que el hoisting la deja disponible en el acto. En otras palabras esto:

(()=>{
    console.log(saludar) // imprime "f saludar() {...}"

    function saludar()  {
        // lo que sea
    }
})()

Funciona porque el intérprete lo modifica a

(()=>{
    function saludar()  {
        // ...
    }
    console.log(saludar)
})()

Una expresión de función en cambio provoca que el nombre de la variable sea objeto de hosting, pero su cuerpo es indefinido hasta que se declara. En otras palabras esto:

(()=>{
    console.log(saludar) // imprime "undefined"

    var saludar = function()  {
        // lo que sea
    }
})()

No te tira un error, sino que imprime undefined. ¿Por qué no te dice Uncaught ReferenceError: saludar is not defined? Es porque lo anterior es ejecutado como:

(()=>{
    var saludar
    console.log(saludar) // imprime "undefined"

    saludar = function()  {
        // lo que sea
    }
})()

Saludar no es desconocido. Está hoisteado (pero es indefinido). De paso, si tratases de invocar saludar() el error sería saludar is not a function

Finalmente, a diferencia de lo que ocurre con var, al usar let o const el intérprete no lo va a hoistear, pero de todos modos recorre su contenido (porque podría haber declaraciones de función y necesita conocerlas de antemano) así que -de nuevo- el error no es saluda is not defined sino el que has visto. Él sí conoce el símbolo, es sólo que tú no puedes referenciarlo en ese punto.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.