Referencia de ECMAScript 5.1 – Fundamentos

Identificadores

Identificadores válidos que podemos utilizar.

En Javascript un identificador es simplemente un nombre que se puede aplicar a una variable, una función o una etiqueta. Este identificador no puede repetirse dentro de un determinado alcance (ver más adelante el significado de alcance en Javascript).

Los identificadores pueden empezar por cualquier letra, el guión bajo (_) o el signo del dolar ($). No pueden empezar con un número. Los identificadores pueden continuar con cualquier letra, número, guión bajo (_) o signo del dolar ($).

Los identificadores son sensibles a mayúsculas y minúsculas, por lo que una variable con el identificador Atencion es diferente a una función con el identificador atencion.

Los identificadores no pueden coincidir en ningún caso con las palabras reservadas de Javascript.

Palabras reservadas

Palabras reservadas en el lenguaje Javascript.

Las siguientes palabras se consideran reservadas en Javascript:

break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in y try

Estas son también palabras reservadas, aunque no son utilizadas en este momento en Javascript y se reservan para usos futuros:

class, enum, extends, super, const, export e import

En modo estricto ("use strict") también se consideran las siguientes palabras como reservadas:

implements, let, private, public, yield, interface, package, protected y static

Comentarios

Tipos de comentarios en el código.

En Javascript hay dos tipos de comentarios:

Línea simple

instruccion; // comentario

Se pueden poner al principio de una línea o a final de ella, pero solo pueden contener una linea de texto.

Varias líneas

/* 
comentario 
*/

Pueden contener tantas líneas como queramos, incluso otros comentarios dentro de ella.

Lineas de código y punto y coma

Forma de las líneas de código y uso del punto y coma como terminador.

En Javascript las líneas de código se terminan con un punto y coma (;).

var a = 1;

No obstante, Javascript permite omitir este punto y coma, siendo el interprete de Javascript quien realiza su inserción automática siempre que no pueda construir una instrucción válida entre dos líneas de código.

De esta forma se puede dividir una instrucción entres varias líneas siempre y cuando dejemos el interprete de Javascript pueda comprender que las líneas son parte de una misma instrucción.

miFuncion()
.toString();    // Las dos líneas son una única instrucción

La inserción automática del punto y coma puede dar resultados inesperados, por lo que muchos programadores prefieren incluir siempre el punto y coma al final de todas las instrucciones. Por ejemplo:

var x = y + z
(y + z).toString()

El interprete de Javascript no hará una inserción automática del punto y coma entre las dos líneas, llamando a una inexistente función z(y + z) ya que ya que es posible construir una instrucción sintácticamente válida uniendo ambas lineas.

Los operadores ++ y -- utilizados a la derecha de las variables y las instrucciones break, continue, return y throw siempre deben terminar en punto y coma.

Tipos

Tipo de datos disponibles.

En Javascript se manejan diferentes tipos de datos, en concreto: sin definir (undefined), nulo (null), lógico (boolean), cadena (string), número (number), objeto (object).

Las variables no tienen un tipo definido y pueden cambiar de tipo en cualquier momento, aunque sean declaradas con var y se les asigne un tipo de dato inicial.

sin definir (undefined)

Cualquier variable sin definir será del tipo undefined y contendrá un valor undefined. Es posible asignar este valor a una variable definida previamente.

if (typeof x == 'undefined') {
    // sentencias
}

nulo (null)

El valor nulo se suele utilizar para definir que una variable no tiene valor. Si se consulta con typeof el operador devolverá el valor object ya que null es realmente un objeto que tiene como valor null. El valor nulo se asigna por medio del literal null.

var obj = null;
typeof obj;     // object

lógico (boolean)

Los valores lógicos son verdadero (true) o falso (false). Para asignarlos se utilizan los literales true y false.

var verdadero = true;
var falso = false;

No confundir el tipo primitivo boolean con el objeto Boolean que encapsula al primero, pero cuyo comportamiento difiere del tipo primitivo.

cadena (string)

La cadenas de caracteres pueden contener cualquier conjunto de caracteres. Se define por medio de los literales de cadena constituidos por un par de comillas dobles " o un par de comillas simples ' indistintamente.

Las cadenas de caracteres pueden incluir caracteres especiales en forma de secuencias de escape que empiezan con la barra invertida \. Javascript acepta las siguiente secuencias de escape:

Las cadenas de caracteres puedes ser de tamaño 0 ("") y de cualquier otro tamaño. Javascript no tiene un tipo especial de dato para un sólo carácter, utilizando para ese caso una cadena de caracteres de tamaño 1. Las cadenas de caracteres se empiezan con la posición 0, igual que las matrices.

En ECMA-262 edición 5 se admiten literales de cadenas de caracteres formados de en varias lineas de código y terminado por \ antes del salto de línea.

var cadena_vacia = "";                        // Comillas dobles
var cadena = "Hola mundo";
var cadena_con_escape = 'Hola \n y adiós';    // Comillas simples
var caracter = 'x';
var varias_lineas = 'este texto \
está definido \
en varias líneas';

No confundir el tipo primitivo string con el objeto String que encapsula al primero.

número (number)

En Javascript todos los números son representados internamente como números de coma flotante. El numero mayor de coma flotante capaz de representarse en Javascript es el 1.7976931348623157e+308 y el menor 5e-324. Los enteros en Javascript deben estar entre -9007199254740992 (-2⁵³) y 9007199254740992 (2⁵³), ambos inclusive.

Javascript acepta varios tipos de literales para expresar números:

entero_base_10 =                100    // cien (100=
entero_negativo_base_10 =      -100    // menos cien (-100)
entero_hexadecimal =           0x64    // cien (100)
entero_negativo_hexadecimal = -0x64    // menos cien (-100)
coma_flotante =                10.3    // diez coma tres (10,3)
coma_flotante_negativo =      -10.3    // menos diez coma tres (-10,3)
exponencial =                 2.2e4    // dos coma dos por diez elevado a cuatro (2,2 x 10(4))
exponencial_negativo =       2.2e-4    // dos coma dos por diez elevado a menos cuatro (2,2 x 10(-4))

Como números especiales tenemos que considerar Infinity e -Infinity que representan el infinito positivo y negativo respectivamente. Si dividimos un número por cero obtendremos en Javascript el valor infinito.

Si una operación no es capaz de obtener un número se devolverá el valor especial NaN (no es un número). En bastantes ocasiones deberemos comprobar si el resultado de una determinada operación es NaN antes de continuar con las operaciones.

objeto (object)

Un tipo básico en Javascript es object. Todo valor que no sea un string, un number, true,
false, null o undefined es de tipo object en Javascript.

Para crear objectos podemos utilizar tres métodos: crear un literal de tipo objeto, usar la instrucción new con una función constructora o, a partir de ECMA-262 edición 5, llamando al metodo create() de Object.

Los literales de tipo objeto son conjuntos de pares identificador: valor separados por comas y dentro de un par de corchetes {}.

var objeto_vacio = {};
var dos_propiedades = {x: 0, y: 0};
var libro = {
    autor: 'Miguel de Cervantes Saavedra',
    titulo: 'El ingenioso hidalgo don Quijote de la Mancha',
    fecha: '1605'
};

La instrucción new crea un objeto a partir de una constructor, es decir, de una función. Esta función constructora puede ser definida por nosotros o alguna de las definidas en Javascript.

var objeto = new Object();
var fecha = new Date();
function Libro() {
    this.autor = 'Miguel de Cervantes Saavedra';
    this.titulo = 'El ingenioso hidalgo don Quijote de la Mancha';
    this.fecha = '1605';
}
var milibro = new Libro();

Debemos saber que las propiedades de un objeto se pueden cambiar, borrar y añadir dinámicamente en cualquier momento, dotando al lenguaje de una gran flexibilidad en este aspecto.

Veremos más características de lo objetos en Javascript en la sección "orientación a objetos".

matriz

En Javascript, los objetos y matrices son muy parecidos, pero no idénticos. Las matrices son un tipo especial de objeto. Ambas pueden tener propiedades y métodos, si bien las matrices tienen una propiedad de length y los objetos no.

Para crear una matriz podemos usar un literal de matriz con [] o crear un objeto Array. En ambos casos podremos acceder a los elementos de la matriz por medio de los [] y el índice de elemento empezando por 0.

var matriz = ['peras', 'manzanas', 'limones'];
console.log(matriz[1]); // manzanas

Al asignar un valor a un elemento de una matriz cuyo índice es mayor que la longitud, la propiedad length se aumenta automáticamente a la nueva longitud. De igual forma, si hace que la propiedad length sea menor, se elimina cualquier elemento cuyo índice esté fuera de la longitud de la matriz.

Javascript no permite definir como tales matrices multidimensionales, pero en un elemento de la matriz se puede almacenar cualquier tipo de datos, incluido otras matrices.

var tablaMultiplicar = [];
for (var x = 0; x < 11; x++) {
    tablaMultiplicar[x] = [];
    for (var y = 0; y < 11; y++) {
        tablaMultiplicar[x][y] = x * y;
    }
}
console.log(tablaMultiplicar[5][6]);

conversiones

En Javascript se pueden realizar operaciones con valores de diferentes tipos, convirtiéndose implícitamente uno de los tipos de datos en el otro para realizar la operación.

• Si se suman (+) un número y una cadena, el número se convierte en una cadena.
• Si se suman (+) un valor lógico y una cadena, el tipo lógico se convierte en una cadena.
• Si se suman (+) un número y un valor lógico, el tipo lógico se convierte en un número.
• Las cadenas se convierten automáticamente en números para compararlos con los números.

var x = 'Año ';
var y = 2013;
console.log(x + y);

También es posible realizar conversiones explícitas de tipo. Para ello utilizaremos las funciones parseInt() y parseFloat() para convertir cadenas en números y el método toString() para convertir a cadena.

Variables

Definición y uso de las variables.

Las variables pueden contener valores de cualquiera de los tipos definidos en Javascript.

Las variables se definen por medio de la instrucción var y se les asigna valor por medio del operador de asignación =. La definición y la asignación se pueden realizar en la misma línea de código. Si no asigna un valor a la variable en la instrucción var se le asigna automáticamente el valor undefined.

var x = 10;
var y;
y = 20;

Las variables se pueden declarar en cualquier parte del código, pero siempre antes de ser utilizadas. Si se utiliza una variable sin haberla declarado se produce una declaración implícita, lo cual no es recomendable. Una declaración implícita convierte a la variable como variable global de forma automática y no muy probablemente este no sea el efecto deseado.

Funciones

Las funciones en Javascript. Definición y uso.

El código en Javascript se organiza por medio de funciones. Una función puede recibir parámetros, ejecutar una conjunto de sentencias y devolver un resultado.

definición

Para definir las funciones podemos utilizar la instrucción function, el operador function o el objeto Function.

La instrucción function tiene este formato:

function nombre([parametro1] [, parametro2], [..., parametroN]) {
    sentencia
}

El operador function es muy parecido, pero no se indica el nombre de la función. La función que se devuelve puede ser asignada a una variable, ser pasada como parámetro a otra función, etc.

[[var] variable =] function ([parametro1] [, parametro2], [..., parametroN]) {
    // sentencias
}

Las funciones en Javascript son realmente objetos de tipo Function.

function cuadrado(n) {
    return n * n;
}

if (cuadrado instanceof Function) {
    cuadrado(10);
}

Por ello podemos utilizar el constructor Function para crear nuevas funciones.

var cuadrado = new Function('x','return x * x;');

invocación

Para llamar a las funciones podemos utilizar varios formatos: como función, como método, como constructor o por medio de los métodos call y apply del objeto Function.

En el caso de ser invocado como una función siempre debemos utilizar los paréntesis tras el nombre de la función. Si no lo hacemos obtenemos una referencia a la función, pero no la ejecutaremos.

En el caso de ser invocado como un método, simplemente estamos llamando a una función que ha sido almacenada como valor de la propiedad de un objeto. Cuando la llamemos debemos utilizar el nombre del objeto, un punto y el nombre de la propiedad seguido de paréntesis.

var misFunciones = {
    cuadrado: function (x) { return x * x; }
};
misFunciones.cuadrado(16);

El objeto Function expone dos métodos que también se pueden utilizar para ejecutar una función: call y apply. En ambos casos podemos indicar un objeto que será utilizado como this durante la ejecución de la función.

```js
function cuadrado (x) { 
    return x * x; 
}
cuadrado.call(null, 16);

parámetros

Los parámetros serán declarados en la definición de la función y cuando sea invocada será pasados dentro del paréntesis y separados por comas si hubiera más de uno.

function multiplicacion(x, y) {
    return x * y;
}
multiplicacion(10, 20);

En ocasiones vamos a querer definir algunos parámetros como opcionales. En Javascript no es posible definir esta característica en la definición de la función y debemos comprobar en el código si el parámetro tiene un valor o por el contrario es undefined y por lo tanto no ha sido pasado al invocar a la función.

function multiplicacion(x, y) {
    if (y === undefined) {
        y = 1;
    }
    return x * y;
}
multiplicacion(10);

El objeto Function define un objeto arguments cuando se invoca a una función. Este objeto arguments nos permite obtener una referencia completa de los parámetros con los que la función ha sido invocada, por lo que podemos utilizarlo para manejar funciones con un número no prefijado de parámetros.

function mayor() {
    var mayor = null;
    for(var i = 0, num = arguments.length; i < num; i++) {
        if (arguments[i] > mayor) {
            mayor = arguments[i];
        }
    }
    return mayor;
}
mayor(10, 4 , 30, 1 , 12);

retorno

Las funciones pueden devolver cualquier tipo de valor por medio de la instrucción return que termina la ejecución de la función y envía el valor que se le ha indicado al programa que ha invocado a la función.

Si no se indica ningún valor en la instrucción return, esta termina la ejecución y se devuelve el valor undefined.

Si una función no tiene una instrucción return, al terminar el programa se devolverá un valor undefined.

function esOk(nombre) {
    if (nombre !== 'Cervantes') {
        return 'Error';
    } else {
        return 'El Quijote';
    }
}
esOk('Quevedo');

Alcance

Alcance de las variables y funciones en Javascript

En Javascript hay dos niveles de alcance, el nivel global y el local a una función.

var variable_global = 10;

function test() {
    var variable_local = 20;
    console.log(variable_global * variable_local); // 200
}
test();
console.log(variable_global * variable_local);     // Error, variable_local no está disponible

Cuando existe una variable global con un determinado nombre y creamos una variable local con el mismo nombre, la variable global deja de ser visible en el alcance local.

var variable = 10;

function test() {
    var variable = 20;
    console.log(variable); // 20
}
test();
console.log(variable);     // 10

Cuando se utiliza una variable que no ha sido declarada por medio de var se crea de forma implícita una variable global. Esto puede llegar a ser problemático, ya que, seguramente, queríamos utilizar una variable local.

Las variables se evalúan como si se declararan al principio del ámbito en el que existen. Por este motivo si declaramos la variable a mitad del código de una función, está es definida al inicio de la misma y en ocasiones se pueden producir comportamientos inesperados.

Las funciones pueden ser también globales o locales. Si son locales son definidas dentro de otra función. En ese caso sólo podrán ser invocadas dentro de las funciones creadas en el mismo alcance o inferiores, así como en el cuerpo de la función donde ha sido declarada.

(function general() {

    function cuadrado(x) {       // función local
        return x * x;
    }

    console.log(cuadrado(200));

})();                           // esta función es llamada al momento de haber sido definida

console.log(cuadrado(200));     // Error, cuadrado() no está definido

Esta característica del alcance de las funciones hace que en ocasiones se utilicen las funciones como espacio de nombres (namespace) ya que todo lo definido dentro de una función se mantiene local a esa función y por lo tanto no habrá posibilidad de conflicto de nombres con otras funciones creadas en otros alcances.

Orientación a objetos

Fundamentos de la orientación a objetos en Javascript.

Creación de objetos

Literales

Los objetos en Javascript son un tipo de dato y como tal disponen de un literal para crearlos, en este caso utilizaremos los cochetes {}.

var objectovacio = {};
var libro = {
    autor: 'Miguel de Cervantes Saavedra',
    titulo: 'El ingenioso hidalgo don Quijote de la Mancha',
    fecha: '1605'
};

Por medio de la definición de literales de tipo objeto podemos crear cualquier tipo de datos como miembros del objeto, como funciones, otros objetos, etc.

var mat = {
    sum: function (x, y) { return x + y; },
    res: function (x, y) { return x - y; },
    div: function (x, y) { return x / y; },
    mul: function (x, y) { return x * y; }
};
console.log(mat.sum(10, 20));

var biblioteca = {
    libros: [       // Matriz con los libros
        {     autor: 'Miguel de Cervantes Saavedra',
               titulo: 'El ingenioso hidalgo don Quijote de la Mancha',
            fecha: '1605'
        },
        {     autor: 'William Shakespeare',
               titulo: 'The Tragedy of Hamlet, Prince of Denmark',
            fecha: '1605'
        }
    ]
};
console.log(biblioteca.libros[1].titulo);

new

Los objetos en Javascript se pueden crear por medio de la palabra reservada new. Con este operador podemos crear objetos basados en los objetos predefinidos en Javascript como String, Number o Date. También lo podemos utilizar para crear objetos desde funciones constructoras que hayamos definido nosotros.

var hoy = new Date();
console.log(hoy.toISOString())

function MiClase() {
    this.sum = function (x, y) { return x + y; };
}
var obj = new MiClase();
console.log(obj.sum(10, 20));

Object.create

Desde la edición 5 de ECMA-262 existe otra forma adicional de crear un objeto, el método Object.create(). La ventaja de este método es que permite pasar, además del prototipo del objeto que queremos crear, un segundo parámetro donde indicar uno o varios descriptores de propiedad que configurarán el .

var resolution = Object.create(Object.prototype, {
    height: {
        value: 1080, 
        writable: false, 
        configurable: false, 
        enumerable: true
    },
    width: {
        value: 1920, 
        writable: false, 
        configurable: false, 
        enumerable: true
    }
});
console.log(JSON.stringify(resolution));

Métodos y propiedades

Nombres de las propiedades y métodos

A las propiedades y métodos se les puede asignar cualquier nombre, incluidos identificadores no válidos. Si el nombre de la propiedad o método es válido, puede escribirse después del nombre del objeto con un punto. Si el nombre de la propiedad o método no es un identificador válido se puede usar una expresión entre corchetes para acceder a la misma.

var a = {
  'x': 10,
  'y y': 20
};
console.log(a.x);
console.log(a["y y"]);

Agregar y eliminar propiedades y métodos

Los objetos en Javascript permiten agregar y eliminar dinámicamente propiedades y métodos en tiempo de ejecución.

var miObjeto = new Object();
myObj.Nombre = "Jesús";
myObj.Edad = 22;

Objetos predefinidos

Funciones constructoras

prototype

function M() {                      // Función constructora
    this.color = 'blue';
}
var m = new M();                    // Creamos el objeto

M.prototype.size = {x: 10, y: 10};    // Modificamos el prototipo de la función constructora

console.log(m.size.x);              // Los objetos ya creados tiene ahora esta nueva propiedad

Alcance

Modo estricto

Características del modo estricto al utiliar "use strict"

"use strict"