Valores literales en JavaScript

Los valores literales se usan para representar valores en JavaScript. Son fijos, no varían y se asignan de forma literal dentro del script.

Valores literales en JavaScript

Los valores literales se usan para representar valores en JavaScript. Son fijos, no varían y se asignan de forma literal dentro del script.

En este artículo describiré cómo se asignan valores literales para los tipos de datos: Arreglos (Array), Booleanos (Boolean), Enteros (Integer), Flotantes (Float), Cadena de caracteres (String) y de Objeto (Object).

Literales de tipo Arreglo (Array)

Cada elemento dentro de los corchetes "[ ]" de un Array representa un valor de tipo literal. La longitud del Array es el número de elementos especificados y va de 0 hasta N. Por ejemplo:

// Array persona que contiene 3 elementos literales

var personas = [“Juanito”, “Esteban”, “Luisa”];

// El elemento 0 = Juanito, el elemento 1 = Esteban y el elemento 2 = Luisa.

Observa que cada coma "," separa los elementos del Array.

También un literal dentro de un Array puede inicializar un objeto. Este concepto es un tanto avanzado.
Pero profundicemos un poco más acerca de la función que desempeña la coma "," dentro de un Array

Algunas veces dependiendo de los objetivos del script se especifican todos los valores literales de un Array. En diferentes ocasiones, es necesario construir un Array con elementos vacíos dentro.

// Array persona que contiene 4 elementos literales con uno vacío.

var personas = [“Juanito”, , “Esteban”, “Luisa”]

// El elemento 0 = Juanito, el elemento 1 = Undefined, el elemento 2 = Esteban y el elemento 3 = Luisa

Entonces…

¿Qué tipo de valor sería personas en la posición [1] del Array?. El valor sería de tipo undefined.

Si incluyes una coma al final del Array esta será ignorada. Sin embargo, no ser recomienda porque puede ocasionar errores en algunas versiones desactualizadas de navegadores web.

Literales de tipo Boleanos (Boolean)

Easy, solo tienen dos tipos de valores permitidos: true y false. Sin embargo, contexto es diferente cuando nos referimos a los valores true o false del objeto booleano.

Literales de tipo Enteros (Integer)

Los literales de números enteros se pueden expresar: En decimales (base 10), Hexadecimales (base 16), Octales (base 8) y Binarios (base 2).

Ejemplo

0, 117 and -345 (decimal, base 10)
015, 0001 and -077 (octal, base 8) 
0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)

Literales de tipo punto flotante (float)

Un literal de tipo float se puede componer de la siguiente forma:

  • Un entero que puede ser precedido del signo “+” o el signo “-”.
  • Un punto decimal ".".
  • Una fracción u otro número decimal.
  • Un exponente.

El exponente se define con una “e o E” que es seguida por un entero y que también puede tener un signo “+” o un signo “-”.

Pero importante, para que el literal sea de tipo float debe tener obligatoriamente un punto "." o un exponente "E"

Ejemplo:

3.1416
2016.0607
.3333333333333333333
-.6831870307179869586
1E-12
Esta sería la sintaxis
[(+|-)][dígitos][.dígitos][(E|e)[(+|-)]dígitos]

Literales de tipo Objeto (Object)

Un valor literal de tipo objeto es una lista de cero o más parejas de nombres de propiedades asociadas con su respectivo valor, encerradas entre corchetes "{}". La comunidad de desarrolladores web le decimos: Clave: valor… Clave: valor...

No se recomienda iniciar un script con un literal de tipo objeto, pues dará lugar a un error porque la apertura de los corchetes será entendido como un inicio de bloque.

Ejemplo:

var persona = { nombrePersona: “Esteban Alvarez”, edadPersona: “35”, contexturaPersona: “Delgado” };

//Cuando se escribe mucho código una bonita y entendible forma de hacerlo es así:

var persona = { 
nombrePersona: “Esteban Alvarez”, 
edadPersona: “35”, 
contexturaPersona: “Delgado” 
};

El nombre de la propiedad también puede ser un literal de tipo entero o puede corresponder a otro objeto.

Ejemplo:

var persona = {
grupoPersonasA: {nombrePersona: ”Francisco”, edadPersona: “40”}, 
1: “Carlos”
};

console.log(persona.grupoPersonasA.edadPersona); // 40
console.log(persona[1]); // Carlos

Para tener en cuenta

Los nombres de las propiedades de un literal de tipo objeto puede ser cualquier string, incluyendo una cadena de caracteres vacía.

Si el nombre de la propiedad no es un identificador JavaScript válido, este deberá ser encerrado en barras cuadradas.

Los nombres de propiedad que no son identificadores válidos no podrán ser accedidos a través de la propiedad punto ".", en cambio podrán ser accedidos y seteados a través de "[]".

Ejemplo:

var foo = {a: "alpha", 2: "two"};
console.log(foo.a);    // alpha
console.log(foo[2]);   // two
//console.log(foo.2);  // Error: missing ) after argument list
//console.log(foo[a]); // Error: a is not defined
console.log(foo["a"]); // alpha
console.log(foo["2"]); // two

Literales de tipo cadena de caracteres (string)

Un literal de tipo string es una cadea de caracteres encerradas dentro de comillas dobles ( “ ” ) o simples ( ‘ ‘ )

Por ejemplo:

“Esteban Alvarez”

‘Edad 40’

Algunas veces se necesita extender la funcionalidad de nuestras cadenas de caracteres, para eso JavaScript nos proporciona un listado de caracteres especiales.

\b  //Retroceso
\f  //Avance de página
\n  //Nueva línea
\r  //Retorno de línea
\t  //Tabulador	
\v  //Tabulador vertical
\’  //Apóstrofe o comilla sencilla
\”  //Comilla doble
\\  //Caracter Backslash
\xxx  //Los caracteres con especificación Latin-1 entre 0 y 377. Por ejemplo:              \251 es la secuencia octal para el símbolo copyright.
\xXX  //Los caracteres con especificación Latin-1 especificada por dos dígitos hexadecimales XX entre 00 y FF. Por ejemplo: \xA9 es la secuencia para símbolo copyright
\uXXXX  //Caracteres Unicode con secuencia de cuatro dígitos hexadecimales. Por ejemplo: \u00A9 es la secuencia para el símbolo copyright.

El conocimiento del manejo de valores literales en JavaScript es un concepto muy importante que muchas veces pasamos por alto. Gran variedad de errores ocurren por el desconocimiento o subestimación de estos conceptos tan básicos y fundamentales para la creación de código JavaScript.

Suscríbete a nuestro boletín mensual

* indicates required

Powered by Mailchimp