¿Qué es una función declarativa y una expresiva?

![](

Cuando se refiere a que el hoisting afecta a una y a la otra no:

1. si intentamos usar primero una función declarativa antes de ser declarada:
   

   

2. si intentamos usar primero una expresión de función antes de ser declarada:
   

   

Y esto básicamente se debe a que:

hoisting detecta primero declaraciones de variables y funciones para poder ser utilizadas, pero no su definición (valor).

Y la expresión de función al ser una función declarada dentro de una variable, detecta solamente var nombre; (sin valor) por lo tanto la función NO es detectada en un principio.

Para los que no saben qué es el hoisting:

La definición de hoisting nos dice que las variables y funciones al ser declaradas se mueven físicamente hacia arriba en el código, es decir, el navegador las lee primero.
Internamente, lo que pasa es lo siguiente: JS pone las variables y funciones declaradas en memoria mientras está en la fase de compilación (eso hace que el navegador las lea primero), pero en realidad siempre van a estar en el mismo sitio de tu código, nunca se mueven hacia arriba.

Fuente:
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

El profesor Sacha Lifzyc, del Curso de Fundamentos de JavaScript tiene un video en Youtube explicando que es el Hoisting. Un recurso imperdible: ¿QUÉ ES EL HOISTING en JAVASCRIPT? | JS en ESPAÑOL

Para los que no sabíamos que es hoisting 🙈 https://www.itdo.com/blog/javascript-conceptos-fundamentales-hoisting/

DIFERENCIA ENTRE FUNCIONES DECLARATIVAS Y DE EXPRESIÓN
Ambas son declaraciones válidas de una función en JavaScript pero con un formato diferente y por ende con un comportamiento diferente, la función declarativa se ve afectada por el hoisting, mientras que la expresiva no.
Pero, qué es el hoisting. El hoisting es utilizado para referirse a cómo funcionan los contextos de ejecución en JavaScript (específicamente las fases de creación y ejecución).
.
.

■Con las funciones declaradas, tenemos la seguridad de que siempre estarán disponibles en tiempo de ejecución. Con las funciones expresadas, tendremos que éstas no son evaluadas hasta que el intérprete no alcance su posición en el código, lo cual puede generar errores en arquitecturas muy anidadas.

Fuente

Hoisting | VideoSuperExplicación👩🏻‍💻

la verdad es que debo aplicarme mas, me a costado entender JavaScript hasta este momento, pero se que lo lograre, saludos y que la fuerza los acompañe a todos… programadores jedi, aun soy un padawan 😦

Segun MDN:
El hoisting se refiere a que las declaraciones de variables y funciones es movido al principio del código, pero lo que ocurre en realidad es dichas declaraciones son almacenadas en memoria.

Funciones declarativas = son asignadas a la memoria por lo que la podemos llamar antes sin problemas.
Funciones de expresión = NO son asignadas en memoria por lo que no pueden ser llamadas antes.

por lo que si haces esto
var x = 1;
o
var x = function (a+b) { return a+b }

no aplicara el ‘hoisting’ , ya que se aplica solamente a la declaración es decir a : var x;

Una explicación con ejemplos de hoisting aquí

Y ¿Qué diantres es Hoisting? También conocido como "Elevamiento"
Explicación de Leonidas Esteban
Explicación de Sacha Lifszyc

Aquí estoy llamando la función antes de que sea declarada;

mostrarMensaje();

function mostrarMensaje() {
  console.log('Hello world!');
}

El código si lo ejecuta.

En cambio si usamos:

mostrarMensaje();
var mostrarMensaje() = function (){
console.log('Hello World!');
};

Mostrara un error de que no es una función, pues no ha surtido efecto el hoisting.

En este video que encontre explican que es el hoisting video

Para los que aun no conocen el termino de HOISTING o para que sirve, les dejo este video de Sacha Lifszyc profe de Platzi

¿QUÉ ES EL HOISTING en JAVASCRIPT?

saludos 😃

También existe las funciones de flecha, que son una forma diferente de escribir funciones de forma tradicional pero que llevan mucho menos código, conocerlas te ayuda a la legibilidad de un código de forma rápida, aquí tengo un pequeño ejemplo obtenido de esta página en donde puedes encontrar más información al respecto.

// Función tradicional
function (a){
  return a + 100;
}

// Desglose de la función flecha

// 1. Elimina la palabra "function" y coloca la flecha entre el argumento y el corchete de apertura.
(a) => {
  return a + 100;
}

// 2. Quita los corchetes del cuerpo y la palabra "return" — el return está implícito.
(a) => a + 100;

// 3. Suprime los paréntesis de los argumentos
a => a + 100;

Como se puede ver es mucho más compacto, y ahorra varias líneas de código

• En programación tenemos algo llamado ámbitos, o en inglés scopes. Imagina esto como una caja, cáda ámbito es una caja que puede tener otras cajas dentro. En cada caja puedes trabajar con lo que tengas (declares) dentro de esa caja, pero también podrás sacar la mano de esa caja para tomar cosas que tengas (que estén declaradas) en la caja más externa (aquella que contiene la caja dónde estás, si estuvieses en la caja de más externo nivel entonces no podrás usar nada de afuera porque no habrá nada afuera).

• En Javascript no importa dónde definas tus cosas (variables) siempre que estén en la caja o en una caja superior. Eso es lo que hoisting sería. Sin embargo, lo que se recomienda siempre es declarar las variables en lo más alto de la caja. Esto para evitar errores, porque las variables declaradas con let y const tendrán problemas con ser declaradas posteriormente a ser utilizadas. Lo mejor es estándarizar la práctica y siempre declarar las variables al inicio de cada ámbito (caja). Tendremos el mismo problema con las funciones expresivas, por eso usar las funciones declarativas representa una ventaja, más teniendo en cuenta que cuándo organizamos el código podríamos llegar a mover nuestras funciones para agruparlas por algún criterio.

(https://www.youtube.com/watch?v=uI6o97A4IrI&ab_channel=LaCocinadelCódigo) Este vídeo me ayudó a entender mejor este tema, espero les ayude

Comparto la documentación oficial de la MDN de Hoisting

https://developer.mozilla.org/es/docs/Glossary/Hoisting

para aquellos que no conocían el termino hoisting (izamiento) en palabras sencillas, es cuando el entorno de ejecución (el motor del navegador) toma todas las palabras reservadas var y function, y la coloca (auto-mágicamente) al principio de nuestro código para hacer los recursos accesibles cuando lineas mas abajo sean invocados, es un poco burdo mi ejemplo, pero la siguiente clase lo explica a detalle.

Buena explicación, solo que puede ser un poco confuso al final tan solo por la palabra “Hoisting”, pero acá puedes aprender más sobre ella.

Hoisting: Es aquel que declara las variables y las funciones antes de que inicie cualquier otro código. En cortas palabras el Inicializador de variables y funciones nativas de JS. _ (Las palabras var y function)_

Hositing
Hoisting es un término que no encontrará utilizado en ninguna especificación previa a ECMAScript® 2015 Language Specification. El concepto de Hoisting fue pensado como una manera general de referirse a cómo funcionan los contextos de ejecución en JavaScript (específicamente las fases de creación y ejecución). Sin embargo, el concepto puede ser un poco confuso al principio.
Conceptualmente, por ejemplo, una estricta definición de hoisting sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código, pero esto no es lo que ocurre en realidad. Lo que sucede es que las declaraciones de variables y funciones son asignadas en memoria durante la fase de compilación, pero quedan exactamente en dónde las has escrito en el código.

Fuente: https://developer.mozilla.org/es/docs/Glossary/Hoisting

Qué es el hoisting?
En Javascript, cuando se define una variable en el interior de una función, el intérprete interno pasa a ubicarla al comienzo de su contexto (la eleva). Podemos imaginarnos así a nuestras funciones como recipientes de agua hirviendo donde las partículas más pequeñas (las variables) buyen hacia la superficie; el resto de elementos, incluidos los valores de esas variables, son más pesados y se quedan donde están.

Posiblemente haya alguien que aquí esté pensando que esto está muy dificil.
No se rindan y recuerden que todo gran esfuerzo tiene una gran recompensa!🏆

Recomiendo que tomen el curso de programción básica. Si no lo han tomado, claro.😄

Por si a alguien como a mi se me pudo haber hecho algo confuso si no tenemos experiencia en JS y en esta terminología dejo unos ejemplos visuales que lo explican muy bien! Los tome de MDN!!! busquenlo allá si quieren saber mas tienen una excelente Documentacion! https://developer.mozilla.org/es/
llamamos la funcion Despues

function nombreDelGato(nombre) {
  console.log("El nombre de mi gato es " + nombre);
}

nombreDelGato("Maurizzio");
/*
El resultado del código es: "El nombre de mi gato es Maurizzio"
*/

llamamos la funcion antes

nombreDelGato("Dumas");

function nombreDelGato(nombre) { 
  console.log("El nombre de mi gato es " + nombre);
}
/*
El resultado del código es: "El nombre de mi gato es Dumas"
*/

var x = 5;

(function () {
    console.log("x:", x); // no obtenemos '5' sino 'undefined'
    var x = 10;
    console.log("x:", x); // 10
}());

Traducción, según yo: La función expresiva es una variable que contiene adentro una función. Luego, siendo variable, la función podría alterarse, sustituirse, cambiar dentro de la memoria.

Mismo contenido, pero mejor formato y te lo puedes llevar fácilmente para tus apuntes.

Con aprecio para la comunidad, y los nuevos.

6 de 16.

Saludos,

Quedé con la duda sobre el Hoisting y encontré esta información que me ayudó a aclararlo perfectamente: Medium: ¿Qué es el hoisting?.

Espero les sea de utilidad ✌

por si alguno ha tenido problemas para sacar las comillas invertidas en un portátil(como yo😭😭) con la tecla alt gr y la tecla de cerrar llaves 2 veces sale.

Las Function Expressions son comúnmente utilizadas cuando una función recibe como parámetro otra función:

function map(f, a) {
  let result = []; // Create a new Array
  let i; // Declare variable
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
}
const f = function(x) {
   return x * x * x; 
}
let numbers = [0, 1, 2, 5, 10];
let cube = map(f,numbers);
console.log(cube);

Ya me quedo claro la diferencia entre los dos.

https://www.desarrollolibre.net/blog/javascript/funciones-declarativas-vs-funciones-de-expresiones-en-javascript#.X2QvxGhKjDe

Acá comparto mas información sobre el tema.

en el siguiente link pueden ver que significa hoisting mas detalladamente

https://www.w3schools.com/js/js_hoisting.asp

Algo a tener en cuenta es que el hoisting solo funciona con la forma antigua de definir variables a través de var. Pero no funciona con las nuevas palabras reservadas let y const.
Es decir que esto

console.log(one);
var one = "one";

equivale a esto

var one;
console.log(one);
one = "one";

Y por tanto no fallará en su ejecución, aunque devuelva undefined.
Pero esto

console.log(two);
let two = "two";

equivale a esto

console.log(two);
let two = "two";

Y por tanto se comportará como es de esperar y sacara el error: ReferenceError: Cannot access ‘two’ before initialization

Sé que todo esto aún es muy básico, pero me siento muy orgulloso de entender bien todos estos conceptos. No se desanimen, todo es práctica y esfuerzo, con el tiempo verán que es pan comido. 😉

¿Cuál es la diferencia entre utiliza este signo `` y las comillas “”?

claro una forma más moderna de expresar una función anónima, sería algo como:
var resultado = (a,b) =>{ return a +b };

Me podría alguien explicar qué es el hoisting?
Gracias!

si no entendieron bien hasta ahora, les recomiendo tomar el curso de fundamentos de JavaScript, en mi opinion deberia ir antes que este en la escuela de js

Diferencia:
Las declarativas pueden ser llamadas
  => antes de ser declaradas.
Las de expresion no, se deben declarar
  => y luego se pueden llamar.

Hoisting hace referencia a que no importa donde declares tus funciones, el navegador siempre lee las funciones antes del ejecutar el resto del código. Si quieren saber más les comparto esta info que habla al respecto: https://developer.mozilla.org/es/docs/Glossary/Hoisting

Lo que pude buscar en internet es esto:
Se llama hoisting al proceso de “elevar” las declaraciones de variables al inicio , es decir, que si declaramos un var y nos ponemos a llamar a esa variable por encima de su declaración podríamos ya tenerla en memoria , pero con valor UNDEFINED

Esto sucede con los siguientes:
HOISTING
var se afecta solo a la declaración
function se afecta por completo ( todo dentro de la función)
import se afecta por completo
class no es afectada por el hoisting

En pocas palabras la función declarativa, javascript la lee y la guarda en memoria y no importa donde se halla escrito (si se llama la función declarativa antes de ser creada no hay problema puesta que js las lee y las almacena pero con una función de expresión primero se crea y luego se llama)

Entiendo la diferencia entre una y otra, pero creo que no explica lo que el título del artículo dice “Cuándo utilizar una u otra”, me refiero a que, ¿en qué casos me conviene mandar llamar la función antes de que sea declarada o viceversa?

Les comparto un video con el que entendí el tema del hoisting, que al principio no lo tenía muy claro.
https://www.youtube.com/watch?v=7F9fCQiU30w&ab_channel=JuanJoseOrtiz

En el siguiente articulo hay una explicación más extensa.

Osea, Hoisting es: mandar llamar una función antes de que ésta sea declarada.

Hoisting hace referencia a que podemos llamar a una función y definirla más abajo.

Aquí se explica con código un poco más sobre las diferencias
Enlace

Ok queda claro las diferencias.
S alguno quiere ir más allá, les recomiendo este link
https://developer.mozilla.org/es/docs/Glossary/Hoisting

Pequeña Objeción, creo que primero se debería de explicar un poco el significado de hoisting. El primer parrafo de Direfencias es muy confuso porque dice que el hoisting sólo se puede aplicar a las palabras var y function en las funciones declarativas y cuando haces una función expresiva lleva var y function. Ya no quedó claro ahí.

se aclarea un poco más en como se diferencia una de otra pero no dice en que situacionese usa una delcarativa o una empresiva???

Este fue mi error en los examenes asi que chequenlo bien

las funciones declarativas si o si tienen que llevar nombre de la identifique como ejemplo: function hola, estamos diciendo que declaro una function con el nombre hola y después van los parámetros que va a evaluar como ejemplo: function hola(jesus) y despues lo que quiera guardar, mientras las funciones anónimas llevan el nombre es en la variable como var hola = function(jesus){} y esta se puede llamar despues de que sea declarada mientras la descriptiva no.

En el Hoisting las declaraciones de variables se mueven al inicio, al principio de tu código. Sin embargo, lo que ocurre realmente es que las declaraciones se asignan en memoria durante la compilación, pero se quedan donde las hayas escrito

¿Por qué no se les aplica el “hoisting” a las expresiones de funciones?

Por definición a las funciones declarativas se les aplica “hoisting”, y a la expresión de función, no. Ya que el “hoisting” solo se aplica en las palabras reservadas “var” y “function”.

Pero veo que las expresiones de funciones tambien usan la palabra “function” y “var”

Ejemplo:
var nombre = function(nombre){
console.log(Hola ${nombre})
}

Para que al igual que yo quedaba con la duda de que es Hoisting, comparto un buen ejemplo claro para complementar:
https://developer.mozilla.org/es/docs/Glossary/Hoisting

Es importante tener en cuenta que las Functions solo admiten hasta 255 argumentos y/o parametros (Fuente Mozila). Y la principal diferencia entre las Declarativas y las de Expresión: Es que las declarativas son definidias para usarse de forma posterior en cualquier momento de su llamado. Las de Expresión solo pueden ser invocadas hasta el momento posterior a su definición.

Fuente:https://medium.com/@mandeep1012/function-declarations-vs-function-expressions-b43646042052

Pero, si la explicación dice que el hoisting solo se aplica en palabras reservadas var y function, ¿por qué no se aplica a la expresión función si está compuesta claramente por una variable?

En caso de las funciones declarativas, podemos hacerlas al final de todo el codigo de manera que al final del mismo tengamos todas las funciones, para de esta forma tener el codigo mas ordenado, miesntras que las funciones de expresión las asignamos a la variable al momento de usar, es posible que estas ultimas se usen para un momento especifico o una sola vez. Las declarativas estaran en el programa disponibles en cualquier momento

I went to the browser dev tools to see it with my own eyes:

  withHoisting('sirve')

  function withHoisting(x) {
    console.log("Sí " + x)
  } // Sí sirve

  withoutHoisting('sirve')

  var withoutHoisting = function(x) {
    console.log("No " + x)
  } // Uncaught TypeError: withoutHoisting  is not a function

Mis puntes de estas clases! 👀✌

💚 Este apartado permite, aclarar dudas con respecto a las funciones.

En JavaScript, las declaraciones (por ejemplo, de variables o funciones) se mueven al principio de su scope o ámbito. Este comportamiento se conoce como** hoisting** y es muy importante tenerlo en cuenta a la hora de programar para prevenir posibles errores.
Teniendo en cuenta cómo funciona el hoisting, podemos llamar a una función y definirla más abajo, porque automáticamente JS la “subirá”. Así, este código funciona correctamente:

add();function add() { 
var myNumber = 4; 
console.log(myNumber + myNumber); 
} 

ya en tendi, pero me surge una duda? cuando voy a declarar una función anonima y cuando la voy a declarar con var? en mis proyectos cuando se que la voy a declarar de una manera o de otra?

Ya hize mi primer hola mundo, sera que ya puedo trabajar en google ?

Hola!!! Pero entonces cuando hago una o la otra, en que cirscunstancias puede utilizarlas???

Muchas gracias…

Más info a cerca de hoisting:

https://www.w3schools.com/js/js_hoisting.asp

Llevo ya un tiempo desarrollando en javascript y esta explicacion de funciones declarativas y expresivas no me lo sabia, muy buen aporte

Nota: La manera más fácil de distinguir entre declaración y expresión es la posición de la palabra «function» en la declaración (no sólo una línea, sino una declaración distinta). Si «function» es lo primero en la sentencia, entonces es una declaración de función. De lo contrario, es una expresión de función.

Realmente las diferencias no fueron muy claras, ojalá alguien las pueda explicar mejor

Aquí explican el termino hoisting en uno de los tantos cursos de nunca pares de aprender; https://platzi.com/clases/1807-scope/25867-que-es-el-hoisting/

Si no saben que es ‘Hoisting’, el profesor mas adelante lo explica, dejo el enlace: https://platzi.com/clases/1814-basico-javascript/26297-hoisting/

Aquí un artículo que lo explica bien

Interesante, pero me queda la duda de cuándo será necesario utilizar una u otra.

Un ejemplo visual de lo anterior.

// llamar funcion antes de declararla

miFuncion("Daniel");

function miFuncion(nombre){
	console.log(nombre);
}

// output: Daniel 

Cuando se compila el codigo en el navegador, lo que hace Javascript es leer y guardar funciones, para posteriormente llamarlas, por eso no afecta si se invocan antes.

Ahora sí se puso interesante

/* -------------------------------------------------------------------------- */
/*                                  Funciones                                 */
/* -------------------------------------------------------------------------- */


/* ------------------------- Funciones declarativas ------------------------- */
/*Estas funciones estan denotadas por la palabra reservada function seguido de
el nombre de la función*/

function numero() {
    return 3;
}

/* -------------------------- Funciones Expresivas -------------------------- */

/**Esta funciones esta definida en una variable */

var usuario = function usuario(nombre, edad) {
    return `Nombre: ${nombre} Edad: ${edad}`
}
    console.log(usuario("Luis",28));

Alguien que por favor explique con ejemplos, que demonios es Hositing?

Aquí les comparto otro tipo de función, se llama “arrow function”

const suma = (a, b) => {
  return a + b;
}

Este tipo de función es una forma más moderna de definir funciones en JavaScript. A diferencia de la declaración de función tradicional, las funciones de flecha no son elevadas y deben declararse antes de ser utilizadas en el código. Además, las funciones de flecha no tienen su propio ámbito (scope), lo que significa que heredan el ámbito del contexto en el que se encuentran.|

si has tenido un mal dia o no entiendes este gato cree en ti

Hola, a mí no me ha quedado claro, porqué en este caso no se muestra el 5?

var x = 5;

(function () {
    console.log("x:", x); // no obtenemos '5' sino 'undefined'
    var x = 10;
    console.log("x:", x); // 10
}());

Hoisting es la posibilidad de llamar una función antes de que esta sea declarada y esto se logra ya que en JS las funciones son de las primeras cosas en ser cargadas antes de correr el código linea por linea.

El hoisting no es algo que solo ocurra con las funciones sino que también puede ocurrir con las variables para saber mas les dejo el siguiente enlace

El hoisting para una variable solo eleva su declaración, de modo que en una expresión de función al llamar a la funcion nos retornara un error:

var suma; //hoisting aplicado[ lo hace V8 engine internamente ]

console.log(suma(4,5)) // ERROR: suma es una variable undefined y  no se reconoce como funcion

suma = function(a,b){
	return a + b;
}

¿Cuándo es correcto utilizar cada función mencionada?

Wow ya entendi el hoisting, Pero en la vida real cuando voy a declarar una función en seco y cuando la voy a declarar con var? ose en mis proyectos cuando se que la voy a declarar de una manera o de otra?

Nice

Buen aporte!!

Importante conocer este dato de hoisting, lo que me da a entender que es mucho mejor usar funciones declarativas, ya que si queremos tener todas las funciones en un solo lugar del código ya sea al inicio o al final no abra ningún problema al momento de su ejecución 😎

Por fin aclare esta duda!

Gracias, hoy entiendo porque me daba error cuando intentaba hacer el ejemplo😅.

Este explicación termino con las dudas que me habían quedado de la clase anterior. Excelente explicación

Genial!

Por lo que se entendió es que todo lo que se ejecute en las Funciones Declarativas se estaría corriendo cada vez que se esté ejecutando el archivo, y con las funciones Expresivas se declararían, pero estas están a la espera de ser llamadas.

Gracias por la aclaracion

Muy buena explicacion

//Tipos de Funciones

//Declarativas 

function miFuncion(){

  return 3;



}


//Expresión o funciones anonimas 

//dentro de las funciones trabajamos con parametros.

/*ponemos los parametros para recibir los datos atraves de ellos y calcular 
la operacion que tengamos de nuestra funcion
*/
var expresiva = function (a,b){

 return a + b;



}


//invocamos nuestra funcion y le pasamos los parametros que queremos evaluar 

//invocacion funcion declarativa

miFuncion();

//invocacion expresiva se llama la funcion como si utilizaramos una funcion 
//normal pero esta tendra el nombre de la variable
expresiva(2, 3);



//ejemplo de saludar estudiantes utilizando parametros
function saludarEstudiantes(nombre){

console.log(`Hola como estas ${nombre}`);
 
}


saludarEstudiantes("pedro");


/*el valor del parametro en la funcion es vacio, hasta que no invoquemos una funcion
y le pasemos a este un valor  para que lo ejecute con respecto a lo que calcule esa
funcion*/


/* Variables dentro de un string  ${nombreVariable}*/


function sumar(a, b){

    var resultado = a +b;
    return resultado;

}

/* return palabra reservada para regresar información

este solo funcionara cuando invoquemos la funcion
*/

Excelente explicación! Ahora me queda más claro la diferencia.