8

Buscando entender sobre las "plantillas literales" tuve curiosidad del nombre y me encontre con conceptos como:

  • "expresiones literales"
  • "cadenas literales"
  • "declaraciones literales"

También di con que en ámbitos de matemáticas y álgebra hay conceptos con nombre iguales.

La cuestión es que luego de consultar varias definiciones y buscar ejemplos no logre entender con claridad que es un literal, por el contrario tuve mas confusión, así que quisiera aplacar mis dudas de

  • ¿Que es exactamente un literal?
  • ¿como se define y usa un literal?
  • ¿que es una funcion literal?
BetaM
  • 30,571
  • 7
  • 32
  • 50
Tux9000
  • 669
  • 6
  • 12

3 Answers3

9

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.

Mauricio Contreras
  • 13,660
  • 3
  • 18
  • 40
8

Literal.

Un literal es una representación de un concepto: por ejemplo un número. Imagina el número tres. Sabes exactamente qué significa el concepto "tres" y lo puedes representar de varias maneras:

El concepto "tres" va a ser el mismo lo representes como lo representes, en cualquier idioma, en cualquier lenguaje de programación, en cualquier base numérica, en cualquier punto del universo y en cualquier momento del tiempo.

Un literal, es la representación de eso, así en el código siguiente:

for (i = 0; i < 3; ++i)
    x += 3;

Tenemos tres literales, el primero 0 representa el concepto cero. Los siguientes 3 y 3 representan el concepto tres, ambos literales son intercambiables e indistinguibles el uno del otro porque representan lo mismo, no puedes decir que un tres es diferente de otro tres porque ambos son el mismo concepto: ambos son el Literal del concepto tres y en cualquier parte de tu código o del código de otras personas seguirá siendo exactamente lo mismo: podemos decir literalmente que cualquier tres es exactamente el mismo tres.

El literal numérico es el más fácil de comprender y por eso lo he escogido para ilustrar la idea de "Literal", pero el mismo concepto de "literalidad" es aplicable a otras cosas:

  • Un literal de lista de números: [1, 2, 3, 4].
  • Un literal de texto: "En un lugar de La Mancha".
  • Un literal booleano: false.
  • Un literal de función: function() {}.

Cualquiera de esos literales expresan literalmente un concepto único, así pues el literal de lista [1,2,3,4] es exactamente igual al anterior (pese a estar escrito diferente) porque representan exactamente el mismo concepto mientras que el literal de texto "En un lugar de Ma Lancha" no representa el mismo concepto ni literal que el de la lista de ejemplos anterior.

Variable.

Una variable es un espacio de memoria que contiene datos que pueden variar (de ahí el nombre de variable), no es un constructo conceptual como un literal si no que es un mecanismo del lenguaje de programación para procesar e intercambiar datos dentro del programa.

Constante.

Una constante es un espacio de memoria que contiene datos que el runtime del programa se compromete a no modificar; es decir, no es que sea un espacio de memoria de sólo lectura si no que conceptualmente es de sólo lectura. A no ser que te refieras a una constante física:

El valor de una magnitud física cuyo valor, fijado un sistema de unidades, permanece invariable en los procesos físicos a lo largo del tiempo.

O matemática:

Un valor fijo, aunque a veces no determinado.

PaperBirdMaster
  • 44,474
  • 6
  • 44
  • 82
7

En breve, en JavaScript un literal es una representación de un valor, por ejemplo,

Literal de tipo número entero

1

Literal de tipo cadena

'naranja'

Literal de tipo objeto

null

Literal de tipo objeto "personalizado" (no incluido en la especificaciones del lenguaje)

{nombre:'José', apellido:'Pérez'}

¿Cómo se define? Simplemente se escribe usando la sintaxis correspondiente a cada tipo de literal.

¿Cómo se usa? De muchas formas. Es usual usarlo en Arrays, objetos, declaración de variables, declaración de constantes y condiciones.

¿Cómo se diferencia de una variable o constante? En JavaScript las variables y las constantes son nombres personalizados que se asignan a posiciones de memoria las cuales guardan los valores. Los ejemplos iniciales para principiantes se refieren a la declaración de variables y constantes, por ejemplo, para asignar el valor naranja, el cual es un literal, a la variable de nombre fruta, se realiza la siguiente declaración:

var fruta = 'naranja';

¿Qué es una función literal? No forma parte de la especificación ni la documentación en Mozilla Developer Network, así que depende del autor del material que estés consultando, aunque quizás sea una mala transcripción / traducción de "object literal function _" o "template literal function _" donde _ es una palabra o frase omitidas. Habría que revisar el párrafo completo, lo cual te sugiero hacer en una nueva pregunta.

Para una explicación amplia consulta Gramática y Tipos > Conceptos Básicos y Gramática y Tipos > Literales

Rubén
  • 10,857
  • 6
  • 35
  • 79