Gramtica y Tipos

Conceptos bsicos

JavaScript est influenciado sobre todo por la sintaxis de Java, C y C++, pero tambin ha sido influenciado por Awk, Perl y Python.

JavaScript distingue entre maysculas y minsculas (es case-sensitive) y utiliza el conjunto de caracteres Unicode. Por ejemplo, la palabra Frh (que significa "temprano" en Alemn) se podra usar como el nombre de una variable.

let Frh = "foobar";

Pero, la variable frh no es la misma que Frh porque JavaScript distingue entre maysculas y minsculas.

En JavaScript, las instrucciones se denominan declaraciones y estn separadas por punto y coma (;).

No es necesario un punto y coma despus de una declaracin si est escrita en su propia lnea. Pero si se deseas ms de una declaracin en una lnea, entonces debes separarlas con punto y coma.

Sin embargo, se considera una buena prctica escribir siempre un punto y coma despus de una declaracin, incluso cuando no sea estrictamente necesario. Esta prctica reduce las posibilidades de que se introduzcan errores en el cdigo.

El texto fuente del script JavaScript se escanea de izquierda a derecha y se convierte en una secuencia de elementos de entrada que son fragmentos, caracteres de control, terminadores de lnea, comentarios o espacios en blanco. (Los espacios, tabulaciones y caracteres de nueva lnea se consideran espacios en blanco).

Comentarios

La sintaxis de los comentarios es la misma que en C++ y en muchos otros lenguajes:

// un comentario de una lnea

/* este es un comentario
 * ms largo, de varias lneas
 */

/* Sin embargo, no puedes /* anidar comentarios */ SyntaxError */

Los comentarios se comportan como espacios en blanco y se descartan durante la ejecucin del script.

Declaraciones

JavaScript tiene tres tipos de declaraciones de variables.

var

Declara una variable, opcionalmente la inicia a un valor.

let

Declara una variable local con mbito de bloque, opcionalmente la inicia a un valor.

const

Declara un nombre de constante de solo lectura y mbito de bloque.

Variables

Utiliza variables como nombres simblicos para valores en tu aplicacin. Los nombres de las variables, llamados identificadores, se ajustan a ciertas reglas.

Un identificador de JavaScript debe comenzar con una letra, un guin bajo (_) o un signo de dlar ($). Los siguientes caracteres tambin pueden ser dgitos (0-9).

Dado que JavaScript distingue entre maysculas y minsculas, las letras incluyen los caracteres "A" a "Z" (maysculas), as como "a" a "z" (minsculas).

Puedes utilizar la mayora de las letras ISO 8859-1 o Unicode como y en los identificadores. (Para obtener ms detalles, consulta esta publicacin del blog). Tambin puedes usar Secuencias de escape Unicode como caracteres en identificadores.

Algunos ejemplos de nombres legales son Number_hits, temp99, $credit y _name.

Declaracin de variables

Puedes declarar una variable de dos formas:

• Con la palabra clave var. Por ejemplo, var x = 42. Esta sintaxis se puede utilizar para declarar variables locales y globales, dependiendo del contexto de ejecucin.
• Con la palabra clave const o let. Por ejemplo, let y = 13. Esta sintaxis se puede utilizar para declarar una variable local con mbito de bloque. (Ve el mbito de variables abajo.)

Tambin puedes simplemente asignar un valor a una variable. Por ejemplo, x = 42. Este formulario crea una variable global no declarada. Tambin genera una advertencia estricta de JavaScript. Las variables globales no declaradas a menudo pueden provocar un comportamiento inesperado. Por lo tanto, se desaconseja utilizar variables globales no declaradas.

Evaluar variables

Una variable declarada usando la instruccin var o let sin un valor asignado especificado tiene el valor de undefined.

Un intento de acceder a una variable no declarada da como resultado el disparo de una excepcin ReferenceError:

var a;
console.log("El valor de a es " + a); // El valor de a es undefined

console.log("El valor de b es " + b); // El valor de b es undefined
var b;
// Esto puede desconcertarte hasta que leas 'Elevacin de variable' a continuacin

console.log("El valor de c es " + c); // Error de referencia no detectado: c no est definida

let x;
console.log("El valor de x es " + x); // El valor de x es undefined

console.log("El valor de y es " + y); // Error de referencia no detectada: y no est definida
let y;

Puedes usar undefined para determinar si una variable tiene un valor. En el siguiente cdigo, a la variable input no se le asigna un valor y la declaracin if evala a true.

var input;
if (input === undefined) {
  doThis();
} else {
  doThat();
}

El valor undefined se comporta como false cuando se usa en un contexto booleano. Por ejemplo, el siguiente cdigo ejecuta la funcin myFunction porque el elemento myArray es undefined:

var myArray = [];
if (!myArray[0]) myFunction();

El valor undefined se convierte en NaN cuando se usa en contexto numrico.

var a;
a + 2; // Evala a NaN

Cuando evalas una variable null, el valor nulo se comporta como 0 en contextos numricos y como false en contextos booleanos. Por ejemplo:

var n = null;
console.log(n * 32); // Registrar 0 en la consola

mbito de variables

Cuando declaras una variable fuera de cualquier funcin, se denomina variable global, porque est disponible para cualquier otro cdigo en el documento actual. Cuando declaras una variable dentro de una funcin, se llama variable local, porque solo est disponible dentro de esa funcin.

JavaScript anterior a ECMAScript 2015 no tiene el mbito de la declaracin de bloque. Ms bien, una variable declarada dentro de un bloque es local a la funcin (o mbito global) en el que reside el bloque.

Por ejemplo, el siguiente cdigo registrar 5, porque el mbito de x es el contexto global (o el contexto de la funcin si el cdigo es parte de una funcin). El mbito de x no se limita al bloque de instrucciones if inmediato.

if (true) {
  var x = 5;
}
console.log(x); // x es 5

Este comportamiento cambia cuando se usa la declaracin let (introducida en ECMAScript 2015).

if (true) {
  let y = 5;
}
console.log(y); // ReferenceError: y no est definida

Elevacin de variables (hoisting)

Otra cosa inusual acerca de las variables en JavaScript es que puedes hacer referencia a una variable declarada ms tarde, sin obtener una excepcin.

Este concepto se conoce como elevacin. Las variables en JavaScript son, en cierto sentido, "elevadas" (o "izadas") a la parte superior de la funcin o declaracin. Sin embargo, las variables que se elevan devuelven un valor de undefined. Entonces, incluso si la declaras e inicias despus de usarla o hacer referencia a esta variable, todava devuelve undefined.

/**
 * Ejemplo 1
 */
console.log(x === undefined); // true
var x = 3;

/**
 * Ejemplo 2
 */
// devolver un valor de undefined
var myVar = "my value";

(function () {
  console.log(myVar); // undefined
  var myVar = "valor local";
})();

Los ejemplos anteriores se interpretarn de la misma manera que:

/**
 * Ejemplo 1
 */
var x;
console.log(x === undefined); // true
x = 3;

/**
 * Ejemplo 2
 */
var myVar = "my value";

(function () {
  var myVar;
  console.log(myVar); // undefined
  myVar = "valor local";
})();

Debido a la elevacin, todas las declaraciones var en una funcin se deben colocar lo ms cerca posible de la parte superior de la funcin. Esta buena prctica aumenta la claridad del cdigo.

En ECMAScript 2015, let y const se elevan pero no se inician. Hacer referencia a la variable en el bloque antes de la declaracin de la variable da como resultado un ReferenceError, porque la variable est en una "zona muerta temporal" desde el inicio del bloque hasta que se procesa la declaracin.

console.log(x); // ReferenceError
let x = 3;

Elevacin de funcin

En el caso de las funciones, solo se incluyen declaraciones de funcin, pero no las expresiones de la funcin.

/* Declaracin de funcin */

foo(); // "bar"

function foo() {
  console.log("bar");
}

/* Expresin de funcin */

baz(); // TypeError: baz no es una funcin

var baz = function () {
  console.log("bar2");
};

Variables globales

Las variables globales, de hecho, son propiedades del objeto global.

En las pginas web, el objeto global es window, por lo que puedes establecer y acceder a variables globales utilizando la sintaxis window.variable.

En consecuencia, puedes acceder a las variables globales declaradas en una ventana o marco desde otra ventana o marco especificando el nombre de la window o el frame. Por ejemplo, si declaras una variable llamada phoneNumber en un documento, puedes hacer referencia a esta variable desde un iframe como parent.phoneNumber.

Constantes

Puedes crear una constante de solo lectura con nombre con la palabra clave const.

La sintaxis de un identificador de constante es la misma que la de cualquier identificador de variable: debe comenzar con una letra, un subrayado o un signo de dlar ($) y puede contener caracteres alfabticos, numricos o de subrayado.

const PI = 3.14;

Una constante no puede cambiar el valor a travs de la asignacin o volver a declararla mientras se ejecuta el script. Se debe iniciar a un valor.

Las reglas de mbito para las constantes son las mismas que las de mbito de bloque de las variables let. Si se omite la palabra clave const, se asume que el identificador representa una variable.

No puedes declarar una constante con el mismo nombre que una funcin o una variable en el mismo mbito. Por ejemplo:

// ESTO CAUSAR UN ERROR
function f() {}
const f = 5;

// ESTO TAMBIN CAUSAR UN ERROR
function f() {
  const g = 5;
  var g;

  // expresiones
}

Sin embargo, las propiedades de los objetos asignados a constantes no son protegidas, es por esto que la siguiente declaracin se ejecuta sin problemas.

const MY_OBJECT = { key: "value" };
MY_OBJECT.key = "otherValue";

Adems, el contenido de los arreglos tampoco est protegido cuando es asignado a una constante, es por esto que la siguiente declaracin se ejecuta sin problemas.

const MY_ARRAY = ["HTML", "CSS"];
MY_ARRAY.push("JAVASCRIPT");
console.log(MY_ARRAY); // registra ['HTML','CSS','JAVASCRIPT'];

Estructuras y tipos de datos

Tipos de datos

El ltimo estndar ECMAScript define ocho tipos de datos:

• Siete tipos de datos que son primitivos:

  1. Booleano. true y false.
  2. null. Una palabra clave especial que denota un valor nulo. (Dado que JavaScript distingue entre maysculas y minsculas, null no es lo mismo que Null, NULL o cualquier otra variante).
  3. undefined. Una propiedad de alto nivel cuyo valor no est definido.
  4. Number. Un nmero entero o un nmero con coma flotante. Por ejemplo: 42 o 3.14159.
  5. BigInt. Un nmero entero con precisin arbitraria. Por ejemplo: 9007199254740992n.
  6. String. Una secuencia de caracteres que representan un valor de texto. Por ejemplo: "Hola"
  7. Symbol (nuevo en ECMAScript 2015). Un tipo de dato cuyas instancias son nicas e inmutables

• y Object

Aunque estos tipos de datos son una cantidad relativamente pequea, permiten realizar funciones tiles con tus aplicaciones. Los otros elementos fundamentales en el lenguaje son los Objetos y las funciones. Puedes pensar en objetos como contenedores con nombre para los valores, y las funciones como procedimientos que puedes programar en tu aplicacin.

Conversin de tipos de datos

JavaScript es un lenguaje tipado dinmicamente. Esto significa que no tienes que especificar el tipo de dato de una variable cuando la declaras. Tambin significa que los tipos de datos se convierten automticamente segn sea necesario durante la ejecucin del script.

As, por ejemplo, puedes definir una variable de la siguiente manera:

var answer = 42;

Y luego, puedes asignarle una cadena a esa misma variable, por ejemplo:

answer = "Gracias por todo el pescado...";

Debido a que JavaScript se tipifica dinmicamente, esta asignacin no genera un mensaje de error.

Nmeros y el operador '+'

En expresiones que involucran valores numricos y de cadena con el operador +, JavaScript convierte los valores numricos en cadenas. Por ejemplo, considera las siguientes declaraciones:

x = "La respuesta es " + 42; // "La respuesta es 42"
y = 42 + " es la respuesta"; // "42 es la respuesta"

Con todos los dems operadores, JavaScript no convierte valores numricos en cadenas. Por ejemplo:

"37" - 7; // 30
"37" + 7; // "377"

Convertir texto a nmeros

En el caso que un valor representando un nmero est en memoria como texto, hay mtodos para la conversin.

• parseInt()
• parseFloat()

parseInt solo devuelve nmeros enteros, por lo que su uso se reduce para decimales.

parseInt("101", 2); // 5

Un mtodo alternativo para recuperar un nmero de una cadena es con el operador + (ms unario):

"1.1" + "1.1"; // '1.11.1'
(+"1.1") + (+"1.1"); // 2.2
// Nota: los parntesis se agregan para mayor claridad, no son necesarios.

Literales

Los literales representan valores en JavaScript. Estos son valores fijos, no variables, que literalmente proporcionas en tu script. Esta seccin describe los siguientes tipos de literales:

• Arreglos literales
• Booleanos literales
• Literales de coma flotante
• Literales numricos
• Objetos literales
• RegExp literales
• Cadenas literales

Arreglos literales

Un arreglo literal es una lista de cero o ms expresiones, cada una de las cuales representa un elemento del arreglo, encerrada entre corchetes ([]). Cuando creas un arreglo utilizando un arreglo literal, se inicia con los valores especificados como sus elementos, y su length se establece en el nmero de argumentos especificado.

El siguiente ejemplo crea el arreglo coffees con tres elementos y length de tres:

let coffees = ["French Roast", "Colombian", "Kona"];

Si creas un arreglo utilizando un literal en un script de nivel superior, JavaScript interpreta el arreglo cada vez que evala la expresin que contiene el arreglo literal. Adems, cada vez que llamas a una funcin se crea un literal usado en ella.

Comas adicionales en arreglos literales

No tienes que especificar todos los elementos en un arreglo literal. Si colocas dos comas en una fila, el arreglo completa el valor undefined para los elementos no especificados. El siguiente ejemplo crea el arreglo fish:

let fish = ["Lion", , "Angel"];

Este arreglo tiene dos elementos con valores y un elemento vaco:

• fish[0] es "Lion"
• fish[1] es undefined
• fish[2] es "Angel"

Si incluyes una coma al final de la lista de los elementos, la coma es ignorada.

En el siguiente ejemplo, el length del arreglo es tres. No hay myList[3]. Todas las dems comas de la lista indican un nuevo elemento.

let myList = ["home", , "school", ];

En el siguiente ejemplo, el length del arreglo es cuatro, y faltan myList[0] y myList[2].

let myList = [, "home", , "school"];

En el siguiente ejemplo, el length del arreglo es cuatro, y faltan myList[1] y myList[3]. Solo se ignora la ltima coma.

let myList = ["home", , "school", ,];

Entender el comportamiento de las comas adicionales es importante para comprender JavaScript como lenguaje.

Sin embargo, al escribir tu propio cdigo, debes declarar explcitamente los elementos que faltan como undefined. Hacerlo as aumenta la claridad y la facilidad de mantenimiento de tu cdigo.

Booleanos literales

El tipo booleano tiene dos valores literales: true y false.

Literales numricos

Los tipos Number y BigInt se pueden escribir en decimal (base 10), hexadecimal (base 16), octal (base 8) y binario (base 2).

• Un literal numrico decimal es una secuencia de dgitos sin un 0 (cero) inicial.
• Un 0 (cero) inicial en un literal numrico, o un 0o inicial (o 0O) indica que est en octal. Los nmeros octales pueden incluir solo los dgitos 0-7.
• Un 0x inicial (o 0X) indica un tipo numrico hexadecimal. Los nmeros hexadecimales pueden incluir los dgitos (0-9) y las letras a-f y A-F. (Si un caracter est en mayscula o minscula no cambia su valor. Por lo tanto: 0xa = 0xA = 10 y 0xf = 0xF = 15).
• Un 0b inicial (o 0B) indica un literal numrico binario. Los nmeros binarios solo pueden incluir los dgitos 0 y 1.

Aqu tienes algunos ejemplos de literales numricos:

0, 117, -345, 123456789123456789n             (decimal, base 10)
015, 0001, -0o77, 0o777777777777n             (octal, base 8)
0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn  (hexadecimal, "hex" o base 16)
0b11, 0b0011, -0b11, 0b11101001010101010101n  (binario, base 2)

Para obtener ms informacin, consulta Literales numricos en la referencia gramatical lxica.

Literales de coma flotante

Un literal de coma flotante puede tener las siguientes partes:

• Un entero decimal que puede tener un signo (precedido por "+" o "-"),
• Un punto decimal ("."),
• Una fraccin (otro nmero decimal),
• Un exponente.

La parte del exponente es una "e" o "E" seguida de un nmero entero, que puede tener signo (precedido por "+" o "-"). Un literal de coma flotante debe tener al menos un dgito y un punto decimal o "e" (o "E").

Especficamente, la sintaxis es:

[(+|-)][dgitos].[dgitos][(E|e)[(+|-)]dgitos]

Por ejemplo:

3.1415926
-.123456789
-3.1E+12
.1e-23

Objetos literales

Un objeto literal es una lista de cero o ms pares de nombres de propiedad y valores asociados de un objeto, entre llaves ({}).

El siguiente es un ejemplo de un objeto literal. El primer elemento del objeto car define una propiedad, myCar, y le asigna una nueva cadena, "Saturn"; al segundo elemento, la propiedad getCar, se le asigna inmediatamente el resultado de invocar a la funcin (carTypes("Honda")); el tercer elemento, la propiedad special, utiliza una variable (sales) existente.

var sales = "Toyota";

function carTypes(name) {
  if (name === "Honda") {
    return name;
  } else {
    return "Lo sentimos, no vendemos " + name + ".";
  }
}

var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales };

console.log(car.myCar); // Saturn
console.log(car.getCar); // Honda
console.log(car.special); // Toyota

Adems, puedes utilizar un literal numrico o de cadena para el nombre de una propiedad o anidar un objeto dentro de otro. El siguiente ejemplo usa estas opciones.

var car = { manyCars: { a: "Saab", b: "Jeep" }, 7: "Mazda" };

console.log(car.manyCars.b); // Jeep
console.log(car[7]); // Mazda

Los nombres de propiedad de los objetos pueden ser cualquier cadena, incluida la cadena vaca. Si el nombre de la propiedad no fuera un identificador o un nmero JavaScript vlido, debe ir entre comillas.

No se puede acceder a los nombres de propiedad que no sean identificadores vlidos como un punto (.), propiedad, pero se pueden acceder y configurar con la notacin tipo arreglo ("[]").

var unusualPropertyNames = {
  '': 'Una cadena vaca',
  '!': 'Bang!'
}
console.log(inusualPropertyNames.'');   // SyntaxError: Cadena inesperada
console.log(inusualPropertyNames['']);  // Una cadena vaca
console.log(unusualPropertyNames.!);    // SyntaxError: smbolo inesperado !
console.log(unusualPropertyNames['!']); // Bang!

Objetos literales mejorados

En ES2015, los objeto literales se amplan para admitir la configuracin del prototipo en la construccin, la abreviatura para asignaciones foo: foo, la definicin de mtodos, la realizacin de llamadas a super y el clculo de nombres de propiedades con expresiones.

Juntos, estos tambin acercan los objetos literales y las declaraciones de clase, y permiten que el diseo basado en objetos se beneficie de algunas de las mismas conveniencias.

var obj = {
  // __proto__
  __proto__: theProtoObj,
  // Abreviatura de "handler: handler"
  handler,
  // Mtodos
  toString() {
    // Llamadas a super
    return "d " + super.toString();
  },
  // Nombres de propiedad calculados (dinmicos)
  ["prop_" + (() => 42)()]: 42,
};

Expresiones regulares (RegExp) literales

Un expresin regular literal (que se define en detalle ms adelante) es un patrn incluido entre barras. El siguiente es un ejemplo de una expresin regular literal.

var re = /ab+c/;

Cadenas literales

Una cadena literal consta de cero o ms caracteres encerrados entre comillas dobles (") o simples ('). Una cadena debe estar delimitada por comillas del mismo tipo (es decir, ambas comillas simples o, ambas comillas dobles).

Los siguientes son ejemplos de cadenas literales:

'foo';
"bar";
'1234';
"una linea \n otra linea";
"John's cat";

Puedes llamar a cualquiera de los mtodos del objeto String en un valor de cadena literal. JavaScript automticamente convierte la cadena literal en un objeto String temporal, llama al mtodo y luego descarta el objeto String temporal. Tambin puedes usar la propiedad String.length con una cadena literal:

// Imprimir el nmero de smbolos en la cadena, incluidos los espacios en blanco.
console.log("John's cat".length); // En este caso, 10.

En ES2015, tambin estn disponibles las plantillas literales. Las plantillas literales estn encerradas por la comilla invertida (`) (Acento_grave) en lugar de comillas simples o dobles.

Las cadenas de las plantillas literales proporcionan azcar sintctica para construir cadenas. (Esto es similar a las funciones de interpolacin de cadenas en Perl, Python y ms).

Opcionalmente, puedes agregar una etiqueta para permitirte personalizar la construccin de la cadena, evitando ataques de inyeccin o construyendo estructuras de datos de nivel superior a partir del contenido de la cadena.

// Creacin de cadenas literales bsicas
`en JavaScript '\n' es un avance de lnea.`;

// Cadenas multilnea
`En JavaScript, las cadenas de plantilla pueden ocupar
 varias lneas, pero las cadenas entrecomillas dobles o
 simples no pueden.`;

// Interpolacin de cadenas
var name = "Bob",
  time = "hoy";
`Hola ${name}, cmo ests ${time}?`;

// Construye un prefijo de peticin HTTP utilizado para interpretar los reemplazos y la construccin
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);

Debes usar cadenas literales a menos que especficamente necesites usar un objeto String. Consulta String para obtener detalles sobre los objetos String.

Uso de caracteres especiales en cadenas

Adicionalmente a los caracteres normales, tambin puedes incluir caracteres especiales en las cadenas, como muestra el siguiente ejemplo:

"una linea \n otra linea";

La siguiente tabla enumera los caracteres especiales que se pueden usar en una cadena JavaScript.

Escapar caracteres

Para caracteres no enumerados en la tabla, la precedencia de la barra inversa es ignorada, pero su uso esta desaconsejado y se debe evitar.

Puedes insertar comillas dobles dentro de una cadena anteponiendo un caracter de barra inversa. Esto se conoce como escapar las comillas. Por ejemplo:

var quote = "l ley \"La cremacin de Sam McGee\" de R.W. Service.";
console.log(quote);

El resultado de esto sera:

El ley "La cremacin de Sam McGee" de R.W. Service.

Para incluir una barra invertida literal dentro de una cadena, debes escapar el caracter de barra invertida. Por ejemplo, para asignar la ruta del archivo c:\temp a una cadena, usa lo siguiente:

var home = "c:\\temp";

Tambin puedes escapar los saltos de lnea precedindolos con una barra invertida. La barra invertida y el salto de lnea se eliminan del valor de la cadena.

var str =
  "esta cadena \
se divide \
en mltiples \
lneas.";
console.log(str); // esta cadena se divide en mltiples lneas.

Aunque JavaScript no tiene sintaxis "heredoc" se puede acercar insertando una barra inversa y un salto de linea al final de cada linea:

var poem =
  "Las rosas son rojas,\n\
Las violetas son azules.\n\
El azcar es dulce,\n\
y foo tambin.";

ECMAScript 2015 introduce un nuevo tipo de literal, a saber, plantillas literales. Esto permite muchas nuevas funciones, incluidas cadenas multilnea!

var poem = `Las rosas son rojas,
Las violetas son azules.
El azcar es dulce,
y foo tambin.`;

Mas informacin

Este captulo se enfoca en la sintaxis bsica para los tipos y las declaraciones. Para aprender mas acerca de las construcciones en el lenguaje JavaScript, ve tambin los siguientes captulos en esta gua:

• Control de flujo y manejo de errores
• Bucles e iteracin
• Funciones
• Expresiones y operadores

En el prximo captulo, veremos las construcciones de control de flujo y el manejo de errores.

• Anterior
• Siguiente