javascript – What is a literal and how is it different from a variable or constant?

Question:

Looking to understand about "literal templates" I was curious about the name and came across concepts like:

  • " literal expressions "
  • " literal strings "
  • " literal statements "

I also found that in math and algebra there are concepts with the same names.

The point is that after consulting several definitions and looking for examples, I could not clearly understand what a literal is , on the contrary I had more confusion, so I would like to appease my doubts about

  • What exactly is a literal?
  • How do you define and use a literal?
  • What is a literal function?

Answer:

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

Template Literal (Template strings) – Text string template

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

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

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

'literal'

The

"literal"

A template, on the other hand, begins and ends with a back-tick or grave accent (the same used to indicate código in StackOverflow's MarkDown). For example:

`Plantilla de texto`

What we can do with a text template (and that does not work in a literal of type string), is to 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 curly braces ( ${ } ) is JavaScript code.

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

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

Therefore, a text string template is a way to create text strings with embedded expressions. Something very useful, when we need to use some type of plantilla to 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 the frameworks for the frontend. Angular , for example, uses a text string template in a variable named template within a component. This way of generating the view code and putting it in a variable within the component is known as an 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 authors who use the function literal expression is the same:

Literal Function : It is an expression that allows assigning a variable a function without it having a name.

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

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

We observe 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 invoke it by its identifier name followed by parentheses (in this case like this: miFuncion() ), pass it the necessary arguments (or not) and it will be executed.

It doesn't make much sense to declare functions without giving it 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 declaration of the function that we are assigning to our variable contains a name, it will be an identifier only visible within the variable. This means that the name of the function 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 to a variable the declaration code of a function without an identifier name. It is to these types of declarations that are assigned to variables what some authors call a 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 the so-called callback functions, and also, with the introduction in the language of arrow functions , the term function literal was being deprecated and the authors began to use the term (which is not part of the standard ) anonymous function that translates as función anónima , a term more suitable for declaring a function without assigning it an identifier or name.

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

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

I hope this clears up your question a bit more.

Scroll to Top