Aportando un poco más a lo ya respondido por @Rubén, trataré de explicarte lo que algunos autores llaman function literal
y que tu has traducido (o copiado) en tu pregunta como función literal
. Además, trataré de aclararte el propósito de un template literal
que tu has traducido (o copiado) en tu pregunta como plantilla literal
.
Template Literal (Template strings) - Plantilla de cadena de texto
Me voy a enfocar primero en el template literal
.
Según la documentación de MDN, las plantillas de cadena de texto, son cadenas de texto (literal) que aceptan expresiones embedidas o incrustadas. Sin entrar mucho en detalle sobre cómo JavaScript procesa una plantilla de texto, lo que sucede internamente es que la plantilla es pasada por una función que evalúa la expresión embedida, y concatena toda la plantilla dando como resultado final una cadena de texto (string
).
Ya hemos visto en la respuesta de @Rubén que lo siguiente es un literal de tipo cadena:
'literal'
o
"literal"
Una plantilla, en cambio comienza y termina con un back-tick
o acento grave (el mismo usado para indicar código
en el MarkDown de StackOverflow). Por ejemplo:
`Plantilla de texto`
Lo que podemos hacer con una plantilla de texto (y que no funciona en un literal de tipo cadena), es incrustarle una expresión. Por ejemplo:
`Plantilla de texto ${true ? 1 : 0}`
Lo cual mostrará:
'Plantilla de texto 1'
Notemos que la expresión usada entre las llaves (${ }
) es código de JavaScript.
Podemos asignar una plantilla de cadena de texto a una variable, tal como lo hacemos con las expresiones literales ya mencionadas, por ejemplo:
const miPlantillaLiteral = `Plantilla de texto ${true ? 1 : 0}`;
Por lo tanto, una plantilla de cadena de texto es una forma de crear cadenas de texto con expresiones embedidas. Algo muy útil, cuando necesitamos usar algún tipo de plantilla
para mostrar mensajes o información sin repetir código, y de una manera un poco más intuitiva. Por ejemplo:
let valor = 0;
//el siguiente bucle imprime en pantalla los valores del 0 al 4
for(let i = 0; i < 5; i++){
let plantilla = `El valor es: ${valor++}`;
console.log(plantilla);
}
El propósito de las mismas, es usarla en expresiones mucho más complejas, donde los saltos de línea sean considerados como tal.
Uno de los usos más extendidos se encuentra en los frameworks para el frontend. Angular, por ejemplo, usa una plantilla de cadena de texto en una variable llamada template
dentro de un componente. Esta forma de generar el código de la vista y ponerlo en una variable dentro del componente es conocida como inline template
.
Función Literal (según algunos autores)
Me he topado con textos, en lo cuales el autor usa la expresión function literals
.
Sin embargo, esta definición no es parte del estándar ECMA.
Por algún motivo el significado que todos los autores que usan la expresión function literal
es el mismo:
Función Literal: Es una expresión que permite asignarle a una variable una función sin que la misma tenga un nombre.
Recordemos que en JavaScript, la declaración de funciones se realiza de la siguiente forma (no se muestran todos los detalles de la documentación):
function miFuncion (<parametros>) { <cuerpo> }
Observamos que la función tiene un identificador (Binding Identifier
), que nos va a permitir utilizar o ejecutar la función en alguna otra parte del código.
Si deseo usar o llamar a la función, sólo debo invocar a la misma por su nombre identificador seguido de paréntesis (en este caso así: miFuncion()
), pasarle los argumentos necesarios (o no) y la misma será ejecutada.
No tiene mucho sentido declarar funciones sin ponerle un nombre, y si lo hiciéramos obtendríamos un error de Sintaxis:
SyntaxError: Function statements require a function name
Sin embargo, existe una forma de asignar una función a una variable (en inglés el término es conocido como name binding
). Con esto decimos que se asocia a un identificador de memoria (variable) el código (en este caso) de una función.
Si la declaración de la función que estamos asignando a nuestra variable contiene un nombre, el mismo será un identificador sólo visible dentro de la variable. Esto significa que el nombre de la función no estará disponible en el ámbito global o al ámbito al que pertenezca la variable.
Por ejemplo:
let miFuncion = function conNombre() {
console.log('Esto es una función.');
}
// imprime una descripcion del objeto miFuncion
// notemos el nombre de la funcion
console.log(miFuncion);
// imprime el mensaje
miFuncion();
// lanza un error de referencia
conNombre();
Ahora, veamos qué sucede si asignamos a una variable el código de declaración de una función sin nombre de identificador. Es a este tipo de declaraciones que se asignan a variables lo que algunos autores llaman function literal
.
let miFuncion = function(){
console.log('Esto es una función');
}
// imprime una descripcion del objeto miFuncion
// notemos que la función no tiene nombre
console.log(miFuncion);
miFuncion();
Con el auge de los procesos asíncronos y las llamadas funciones callback
, y además, con la introducción en el lenguaje de las funciones flecha, el término function literal
fue quedando en desuso y los autores comenzaron a utilizar el término (que tampoco es parte del estándar) anonymous function
que se traduce como función anónima
, un término más adecuado a la declaración de una función sin asignarle un identificador o nombre.
Lo importante de todo esto, es que a diferencia de los literales de tipos de dato que ya se han mencionado:
No existe en la documentación nada parecido a un Literal de función
. Y es que lo que algunos autores llaman así, realmente no es una expresión literal tal como las que hemos visto y que sí forman parte del lenguaje.
Espero que esto aclare un poco más tu duda.