Objetos predefinidos, arrays y funciones

El tipo de datos fundamental de JavaScript es el objeto. Un objeto es un dato complejo, una colección no ordenada de propiedades cada una formada por un nombre y un valor. Este valor es un tipo de dato primitivo o un objeto.

En JavaScript todo lo que no es un string, un numero, true, false, null o undefined es un objeto. Incluso los strings, números y booleanos se comportan como objetos inmutuables (no podemos modificar sus propiedades).

Nota: JavaScript distingue entre valores primitivos (string, numero, booleano, null y undefined) que son inmutables y el resto de objetos que son mutables tratando a los primeros por valor y a los segundos por referencia.

Podemos distinguir tres categorías o clases de objetos:

• Objetos nativos definidos por la propia especificación JavaScript (ECMAScript). En este tema nos centraremos en ellos
  
• Objetos de plataforma, son aquellos que pone a nuestra disposición el entorno de ejecución (runtime environment) JavaScript, como el navegador o Node.js. Los estudiaremos en el tema JavaScript en el navegador
  
• Objetos de usuario, que son aquellos que se crean por programa durante la ejecución de código JavaScript. Veremos cómo crearlos en el próximo tema
  

A continuación estudiaremos los principales objetos nativos que define JavaScript.

Propiedades y funciones del objeto global

Principales propiedades (valores) y funciones del ámbito global:

String

Ademas del tipo de dato string JavaScript define el objeto String que ofrece un conjunto de propiedades muy útiles a la hora de trabajar con cadenas de texto.

Mediante la conversión de tipos se transforma un tipo primitivo en objeto String al intentar utilizar una de sus propiedades.

var a= 'Hola', // Tipo primitivo
    b= new String('Hola'); // Objeto String

console.log('Tipo dato a:', typeof a);
console.log('Tipo dato b:', typeof b);
console.log('a == b', a == b);
console.log('a === b', a === b);
console.log('Longitud a:', a.length);

repl.it

Nota1: el operador new crea e inicializa un nuevo objeto

Nota2: a las propiedades de un objeto se accede mediante el operador punto . o los corchetes [] y nombre de la propiedad entre comillas (simples o dobles)

Principales propiedades y métodos del objeto String:

Ampliar información...

Nota: el punto de partida para conocer la sintaxis y semántica de todos los componentes de un lenguaje de programación debería ser la especificación del lenguaje, en nuestro caso ECMAScript 5.1 pero, como toda especificación, es muy poco didáctica. Un buen manual de referencia de tecnologías web HTML, CSS, y por supuesto JavaScript es Mozilla Developer Network (MDN)

var a= 'La lluvía en Sevilla es una auténtica maravilla';
console.log('Longitud:', a.length);
console.log('Buscar Sevilla:', a.indexOf('Sevilla'));
console.log('Buscar Palma:', a.indexOf('Palma'));
console.log('Reemplaza maravilla:', a.replace('maravilla', 'pesadilla'));
console.log('Devuelve Sevilla:', a.substr(13, 7));
console.log('Mayúsculas:', a.toUpperCase());
console.log('Rompe con espacios:', a.split(' '));

repl-it

Ejercicio: dada la cadena de texto 0123456789, recuperar los tres primeros caracteres, los 3 últimos, y del índice 2 al 7 (incluido)
Respuesta

Date

El objeto Date representa un instante en el tiempo (fecha y hora).

Para crear un nuevo objeto Date JavaScript proporcioina cuatro constructores:

new Date(); // Fecha y hora actual
new Date(numero); // Número de milisegundos desde 1 de enero de 1970 UTC
new Date(texto); // Fecha y hora en texto según YYYY-MM-DDTHH:mm:ss.sssZ (ISO 8601)
new Date(anyo, mes[, dia[, hora[, minutos[, segundos[, milisegundos]]]]]);

Principales métodos del objeto Date (hora local):

Ampliar información...

var d=new Date(); // Fecha y hora actual
console.log('Día de la semana', d.getDay());
console.log('Día del mes', d.getDate());
console.log('Mes', d.getMonth());
console.log('Año', d.getFullYear());
console.log('Hora', d.getHours());
console.log('Minutos', d.getMinutes());
console.log('Fecha', d.toLocaleDateString());
console.log('ISO 8601', d.toISOString());

repl-it

Ejercicio: dada la fecha actual, en qué día de la semana nos encontramos (lunes, martes...)?
Respuesta1, Respuesta2

Ejercicio: dada cualquier fecha, devolverla formateada como dd-mm-yyyy
Respuesta

Math

Objeto que proporciona constantes y funciones matemáticas. Al contrario que los anteriores no podemos crear nuevos objetos Math, existe un único objeto que podemos utilizar para realizar las operaciones matemáticas.

Algunas propiedades y métodos del objeto Math:

Ampliar información...

console.log('Máximo de 100, 25, 38, 200, 150:', Math.max(100, 25, 38, 200, 150));
console.log('Redondear 1.7523:', Math.round(1.7523));
console.log('PI', Math.PI);
console.log('Número aleatorio', Math.random());
console.log('Raiz cuadrada de 100:', Math.sqrt(100));

repl-it

Ejercicio: simular la tirada de una moneda, cara o cruz?
Respuesta

El objeto Array

Un array es una colección ordenada de elementos (valores). Cada elemento tiene una posición denominada índice. El primer elemento tienen índice 0. Los elementos del array pueden ser de cualquier tipo (datos primitivos, objetos, arrays...), y dentro del array puede haber elementos de diferentes tipos. Se accede a los elementos por su índice mediante corchetes [].

Formas de crear arrays:

var a= new Array(), // Array vacío
    b= [], // Array vacio
    c= new Array(20), // Array vacío de 20 elementos
    d= [20], // Array de un elemento
    e= new Array(10, 20, 30, 40), // Array de 4 elementos
    f= [10, 20, 30, 40]; // Array de 4 elementos

Acceso a los elementos del array:

var a= [10, 'texto', new Date()];
console.log('2º elemento:', a[1]);
console.log('Acceso a objeto Date:', a[2].getFullYear());
console.log(a);
a[0]= 1000;
console.log(a);

repl-it

Ejercicio: ahora que sabemos más cosas, dada la fecha actual en qué día de la semana nos encontramos (lunes, martes...)?
Respuesta

La propiedad length devuelve el número de elementos del array. Pero si le asignamos un valor aumenta o disminuye su tamaño.

var a= [];
console.log('Tamaño', a.length);
a= [10, 20, 30];
console.log('Tamaño', a.length);
a[10]= 1000;
console.log('Tamaño', a.length);
console.log('Índice 5:', a[5]);
a.length= 2;
console.log(a);

repl-it

Algunos métodos del objeto Array:

Ampliar información...

var a= ['azul', 'rojo', 'verde', 'amarillo'];
console.log('verde?', a.indexOf('verde'));
console.log('negro?', a.indexOf('negro'));
a.unshift('blanco');
console.log(a.join('-'));

repl-it

Recorrer los elementos del array:

var a= ['azul', 'rojo', 'verde', 'amarillo'];
for (var i= 0; i < a.length; i++) console.log(a[i]);
for (i in a) console.log(a[i]);

repl-it

Ejercicio: dada una cadena de texto y un carácter (o secuencia de caracteres), eliminar estos últimos de la cadena de texto
Respuesta

Pregunta: dado el siguiente código, cuál es el valor de b?
Respuesta

var a= [100, 200, ['a', 'b']],
    b= a[2];

b[1]= 'X';
a[2][2]= 'Y';

Funciones

Cuando los programas crecen es frecuente utilizar múltiples veces las mismas instrucciones (validar fecha, ordenar elementos, calcular totales...). Si repetimos estos conjuntos de instrucciones se complica el programa ya que, por un lado, es más largo; y por otro cuando se han de modificar las instrucciones repetidas se ha de hacer en todas ellas.

La solución es agrupar bloques de código con una funcionalidad bien definida en funciones. Se definen una vez, se modifican en un único lugar y se ejecutan tantas veces como sea necesario.

En JavaScript las funciones son objetos.

Las funciones son parametrizables, su definición puede incluir una lista de identificadores llamados parámetros que actúan como variables locales en el bloque de código de la función. Al llamar a una función (invocar o ejecutar la función) proporcionamos valores (argumentos) a los parámetros de la función.

Las funciones pueden devolver un valor, si lo hacen emplean la palabra reservada return.

Se pueden asignar funciones a variables y a propiedades de objetos.

Definir funciones

Las funciones se definen con la palabra reservada function:

function nombreFunc([param1[, ...[, paramN]]]) { // Parámetros opcionales
  ...
  codigo de la funcion
  ...
  return valor; // Opcional
}

Buenas prácticas: el nombre de las funciones puede ser cualquier identificador válido en JavaScript (mismas reglas que las variables). Las funciones realizan una acción por ello su nombre debería ser un verbo o una frase que comience por un verbo y, por convención, en minúscula. Cuando hay más de una palabra se separan por _ o se escriben en CamelCase: imprimir_todos o imprimirTodos (mejor)

Ejemplos:

// console.log de los elementos de un array
function logArray(a) {
  for (var i= 0; i < a.length; i++) console.log(a[i]);
}

// x al cubo x*x*x
function cubo(x) {
  return x*x*x;
}

var laborables= ['lunes', 'martes', 'miércoles', 'jueves', 'viernes'];

// invoca logArray, laborables es el argumento
logArray(laborables);

// invoca cubo en una expresión
console.log(1000000 + cubo(6));

repl-it

Nota: para que la función devuelva más de un valor hay que devolver un objeto, por ejemplo un array (lista de valores)

// Crea array de n elementos de números aleatorios entre min y max
function creaArray(n, min, max) {
  var a= []; 

  for (var i= 0; i < n; i++) a.push(Math.round(min + Math.random()*(max-min)));

  return a;
}

var numeros= creaArray(10, 0, 1000);

console.log('numeros:', numeros);

console.log(creaArray(5, 10, 20));
console.log(creaArray(20, 1, 50));

repl-it

Pregunta: qué devuelve una función que no devuelve ningún valor (no tiene return o éste no devuelve un valor)?

Ejercicio: modificar la función para que devuelva un array ordenado (ver método sort())
Respuesta

Argumentos y parámetros

JavaScript no verifica ni el número ni el tipo de los argumentos con que se invoca una función. Nos podemos encontrar con funciones que se invocan con menos argumentos que parámetros se han definido (parámetros opcionales), y funciones que se invocan con más (lista variable de argumentos).

Parámetros opcionales

Cuando se invoca una función con menos argumentos que los parámetros declarados, los parámetros adicionales tienen valor undefined. Es tarea de la función comprobarlo y proporcionar valores por defecto.

Supongamos que si proporcionamos un sólo argumento (número de elementos) a la función crearArray crea números aleatorios entre 0 y 100.

// Crea array de n elementos de números aleatorios entre min y max (0-100)
function creaArray(n, min, max) {
  var a= [];

  if (min === undefined || max === undefined) {
    min= 0;
    max= 100;
  }

  for (var i= 0; i < n; i++) a.push(Math.round(min + Math.random()*(max-min)));

  return a;
}

console.log(creaArray(10));

repl-it

Nota1: los parámetros opcionales deben ser los últimos

Nota2: en lugar de utilizar condicionales se suele emplear la fórmula min= min || 0 y max= max || 100, el operador || devuelve el primer operando si éste es verdadero o el segundo si es falso

Ejercicio: modificar la función, añadir el caso de proporcionar dos argumentos (número de elementos y valor mínimo). Si no se proporciona el tercer parámetro éste debe ser el valor mínimo más 100.
Respuesta

Lista variable de argumentos

Las funciones cuentan con una propiedad denominada arguments que es un objeto con la lista de argumentos pasados a la función. Mediante su propiedad length obtenemos el número de argumentos y accedemos a ellos mediante su índice (como un array).

// Función que sólo lista argumentos
function listaArgumentos() {
  console.log('Argumentos:', arguments.length);

  for (var i= 0; i < arguments.length; i++) console.log(arguments[i]);
}

listaArgumentos();
listaArgumentos(1, 2, 'texto');
listaArgumentos([10, 20]);

repl-it

Ejercicio: escribir una función que devuelva el número mayor de todos los pasados como argumentos.
Respuesta

Alcance

Scope o alcance hace referencia a la visibilidad de las variables. Es un concepto importantísimo en la programación con JavaScript. Variables globales tienen alcance global (todo el programa), variables locales tienen alcance local (función en la que han sido definidas). Los parámetros de las funciones tienen alcance local al cuerpo de la función.

JavaScript es un lenguaje donde las funciones definen la visibilidad de las variables. Todas las variables declaradas fuera de una función son variables globales.

En el cuerpo de una función las variables locales (y los parámetros) tienen preferencia sobre las variables globales. Cuando declaramos una variable dentro de una función es obligatorio utilizar var para crear una variable local a la función, si no creamos una variable global.

var a= 'global1',
    b= 'global2';

function ambito() {
  var a= 'local1',
      c= 'local2';

  console.log(a);
  console.log(b);
  console.log(c);
  a= 'otro valor local';
  console.log(a);
  b= 'otro valor global';
}

ambito();
console.log(a);
console.log(b);
console.log(c);

repl-it

Los parámetros son variables locales:

var a= 10;

function asignar100(x) {
  console.log(x);
  x= 100;
}

asignar100(a);
console.log(a);

repl-it

Ejercicio: escribir la función contarPalabras a la que se le pasa un string y devuelve el número de palabras
Respuesta

Ejercicio: escribir la función factorial a la que se le pasa un número y devuelve su factorial
Respuesta1, Respuesta2

Se pueden definir funciones dentro de funciones. Las funciones internas ven las variables declaradas en las externas.

function externa() {
  var a= 'variable local externa';

  // Definición de una función interna
  function interna() {
    console.log(a);
  }

  interna(); // Invocar función interna
}

externa();

repl-it