What is a Literal and how is it different from a variable or constant?

Contributing a little more to what has already been answered by @Rubén, I will try to explain what some authors call function literaland that you have translated (or copied) in your question as función literal. Also, I will try to clarify the purpose of a template literalthat you have translated (or copied) in your question as plantilla literal.

Template Literal (Template strings) - Text string template

I'm going to focus first on the template literal.

According to the MDN documentation, string templates are text strings (literals) that accept embedded expressions . Without going into too much detail about how JavaScript processes a text template, what happens internally is that the template is passed through a function that evaluates the embedded expression , and concatenates the entire template, resulting in a text string ( string).

We have already seen in @Rubén's answer that the following is a literal of type string:

'literal'

either

"literal"

A template, on the other hand, begins and ends with a backtick back-tickor (the same one used to indicate códigoin the StackOverflow MarkDown). For example:

`Plantilla de texto`

What we can do with a text template (which doesn't work on a string literal), is embed an expression in it . For example:

`Plantilla de texto ${true ? 1 : 0}`

Which will show:

'Plantilla de texto 1'

Note that the expression used between the braces ( ${ }) is JavaScript code.

We can assign a template string to a variable, just like we do with the literal expressions already mentioned, for example:

const miPlantillaLiteral = `Plantilla de texto ${true ? 1 : 0}`;

Therefore, a string template is a way to create strings with embedded expressions. Something very useful, when we need to use some kind of plantillato display messages or information without repeating code, and in a slightly more intuitive way. For example:

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);
}

Their purpose is to use it in much more complex expressions, where line breaks are considered as such.

One of the most widespread uses is in frontend frameworks. Angular , for example, uses a string template in a variable called templatewithin a component. This way of generating the view code and putting it in a variable inside the component is known as inline template.

Literal function (according to some authors)

I have come across texts, in which the author uses the expression function literals.

However, this definition is not part of the ECMA standard .

For some reason the meaning that all the authors who use the expression function literalis the same:

Literal function : It is an expression that allows you to assign a function to a variable without it having a name.

Recall that in JavaScript, the function declaration is done as follows (not all the documentation details are shown ):

function miFuncion (<parametros>) { <cuerpo> }

We note that the function has an identifier ( Binding Identifier), which will allow us to use or execute the function in some other part of the code.

If I want to use or call the function, I just have to call it by its identifier name followed by parentheses (in this case like this: miFuncion()), pass the necessary arguments (or not) and it will be executed.

There is little point in declaring functions without giving them a name, and if we did we would get a Syntax error:

SyntaxError: Function statements require a function name

However, there is a way to assign a function to a variable (in English the term is known as name binding). With this we say that the code (in this case) of a function is associated with a memory identifier (variable).

If the function declaration that we are assigning to our variable contains a name, it will be an identifier only visible within the variable. This means that the function name will not be available in the global scope or the scope to which the variable belongs.

For example:

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();

Now let's see what happens if we assign the declaration code of a function with no identifier name to a variable. It is to this type of declarations that are assigned to variables what some authors call 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();

With the rise of asynchronous processes and so-called functions , and also with the introduction of arrow functionscallback in the language , the term fell into disuse and the authors began to use the term (which is not part of the standard either) which is translates as , a more appropriate term for a function declaration without assigning it an identifier or name.function literalanonymous functionfunción anónima

The important thing about all this is that unlike the literals of data types that have already been mentioned:

• null literal
• Boolean Literal
• Numeric Literal
• String Literal
• Regular Expression Literal
• String Template Literal

There is no such thing in the documentation as a Literal de función. And it is that what some authors call like this, it is not really a literal expression such as the ones we have seen and that are part of the language.

I hope this clarifies your question a little more.

Literal.

A literal is a representation of a concept: for example a number. Imagine the number three. You know exactly what the concept "three" means and you can represent it in several ways:

The concept "three" is going to be the same no matter how you represent it, in any language, in any programming language, in any number base, at any point in the universe, and at any moment in time.

A literal is the representation of that, as in the following code:

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

We have three literals, the first one 0represents the concept zero . The following 3and 3represent the concept three , both literals are interchangeable and indistinguishable from each other because they represent the same thing, you cannot say that a three is different from another three because they are both the same concept: both are the Literal of the concept three and in any part of your code or other people's code will remain exactly the same: we can literally say that any three is exactly the same three.

The numeric literal is the easiest to understand and that is why I have chosen it to illustrate the idea of ​​" Literal ", but the same concept of " literal " is applicable to other things:

• A number list literal: [1, 2, 3, 4].
• A text literal: "En un lugar de La Mancha".
• A boolean literal: false.
• A function literal: function() {}.

Any of these literals literally express a unique concept, so the list literal [1,2,3,4]is exactly the same as the previous one (despite being written differently) because they represent exactly the same concept while the text literal "En un lugar de Ma Lancha"does not represent the same concept or literal as the one of the list of examples above.

Variable.

A variable is a memory space that contains data that can vary (hence the variable name), it is not a conceptual construct like a literal but rather it is a programming language mechanism for processing and exchanging data within the program.

Constant.

A constant is a memory space that contains data that the program's runtime agrees not to modify; that is, it is not a read-only memory space, but conceptually it is read-only. Unless you mean a physical constant :

The value of a physical magnitude whose value, fixed to a system of units, remains invariable in physical processes over time.

Or math :

A fixed value, although sometimes not determined.

In short, in JavaScript a literal is a representation of a value, for example,

Integer type literal

1

string literal

'naranja'

object type literal

null

Literal of type "custom" object (not included in the language specifications)

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

How do you define yourself? It is simply written using the syntax corresponding to each type of literal.

How is it used? In many ways. It is usual to use it in Arrays, objects, variable declarations, constant declarations and conditions.

How is it different from a variable or constant? In JavaScript variables and constants are custom names that are assigned to memory locations which store the values. The initial examples for beginners refer to the declaration of variables and constants, for example, to assign the value naranja, which is a literal, to the variable name fruta, the following declaration is made:

var fruta = 'naranja';

What is a literal function? It's not part of the spec or documentation on the Mozilla Developer Network, so it depends on the author of the stuff you're looking at, though maybe it's a mistranscription/translation of "object literal function _" or "template literal function _" where _ is a missing word or phrase. The entire paragraph would have to be revised, which I suggest you do in a new question.

For a comprehensive explanation see Grammar and Types > Basic Concepts and Grammar and Types > Literals