Aquí vemos las diferencias en el uso de foo entre function foo() {} y var foo = function() {}.
function foo() {} es una función normal o declaración de función y var foo = function() {} es una función anónima o función de expresión o, en palabras simples, también se puede ilustrar que es una variable dentro de la cual se envuelve una función y así esa variable ya no permanecerá en un estado de variable eventualmente se convirtió en una función accesible en sí misma. Ahora veamos las diferencias:
1. Por nombre:
cuando usamos la palabra clave de función antes del nombre de la función, esto se denomina función normal o declaración de función.
Cuando usamos la palabra clave function sin el nombre de la función, esto se denomina Función anónima o Función de expresión.
Función normal o declaración de función: aquí foo es el nombre de la función.
function foo() {
// Function Body
}
Función Anónima o Función de Expresión: Aquí la función se almacena en la variable foo usando var.
var foo = function() {
// Function Body
}
A menudo escribimos la función anónima como la función de flecha, que se introdujo en ES6 (recomendado).
var foo = () => {
// Function Body
}
2. Implementación: Aquí vemos cómo llamar a la función en Función normal y Función anónima. Cuando se llama a cualquier función normal o función anónima (que está envuelta dentro de cualquier variable), se llama de manera similar a como se llama a la función normal.
Función Normal o Declaración de Función: Aquí usamos el nombre de la función “foo” para llamar a la función completa.
Javascript
<script>
function foo() {
console.log("hello");
};
foo();
</script>
Producción:
hello
Aquí podemos llamar a la función «foo» antes o después de declarar la función. Eso significa que podemos declarar la función donde queramos en nuestro código.
Javascript
<script>
foo();
function foo() {
console.log("hello");
};
</script>
Producción:
hello
Función anónima o función de expresión: aquí usamos la variable foo para llamar a la función completa.
Javascript
<script>
var foo = function() {
console.log("hello");
};
foo();
</script>
Producción:
hello
Aquí obtendremos un error si llamamos a la función antes de declarar la función.
Javascript
<script>
foo();
var foo = function() {
console.log("hello");
};
</script>
Producción:
TypeError: foo is not a function
Ahora veamos la siguiente implementación que se implementa usando la sintaxis de la función de flecha (en ES6).
Javascript
let foo = () => {
console.log("Hello World...!!");
}
foo();
// This code is contributed by Aman Singla....
Producción:
Hello World...!!
3. Pasar Argumentos: Aquí veremos cómo pasar un argumento dentro de una función.
Función normal o declaración de función: aquí pasaremos el argumento solo cuando llamamos a la función completa por el nombre de la función.
Javascript
<script>
function foo(x,y) {
console.log(x+y);
};
foo(1,3);
</script>
Producción:
4
Función Anónima o Función de Expresión: Aquí pasaremos el argumento solo cuando llamemos a toda la función por el nombre de la variable.
Javascript
<script>
var foo = function(x,y) {
console.log(x+y);
};
foo(1,3);
</script>
Producción:
4
A continuación se muestra la implementación del fragmento de código anterior utilizando la sintaxis de la función de flecha:
Javascript
let foo = (x , y) => {
console.log(x + y);
}
foo( 7 , 8);
// This code is contributed by Aman Singla....
Producción:
15
4. Función autoejecutable: aquí, cuando se crea la función, se llama inmediatamente a la función. Aquí usamos la función anónima.
Javascript
<script>
(function(x,y){
console.log(x+y);
})
(2,3);
</script>
Producción:
5