Estructuras definidas por el usuario en JavaScript.

Caso práctico

Uno de nuestros alumnos de los casos prácticos.

Elaboración propia. (CC BY-NC)

Antonio ha avanzado mucho en su estudio de JavaScript, viendo los principales objetos con los que puede trabajar, sus métodos y propiedades.

Ha llegado el momento, de ver cómo puede organizar los datos que genera en su aplicación de JavaScript, de forma que le permita gestionarlos más eficientemente.

También verá cómo crear funciones, el alcance de las variables y cómo utilizarlas en su código. Y para terminar Juan, le va a explicar un poco más en detalle, cómo podrá crear nuevos objetos y asignarles propiedades y métodos en JavaScript.

Antonio ha comenzado a analizar más a fondo parte del trabajo que tiene que realizar, y comenta con su directora Ada, la posibilidad de hacer algunos bocetos de las innovaciones y mejoras que quiere aportar al proyecto. Ada está muy contenta con los progresos de Antonio y está deseando ver los bocetos.

1.- Creación de funciones.

Caso práctico

Ocultar

Elaboración propia. (CC BY-NC)

Juan está siguiendo los progresos de Antonio, y le recomienda empezar a ver funciones. Las funciones son una herramienta muy potente en los lenguajes de programación, ya que le van a permitir realizar tareas de una manera mucho más organizada, y además le permitirán reutilizar un montón de código en sus aplicaciones.

Antonio verá como crear funciones, cómo pasar parámetros, el ámbito de las variables dentro de las funciones, cómo anidar funciones y las funciones predefinidas en JavaScript. Antonio está muy ilusionado con este tema, ya que a lo largo de las unidades anteriores ha estado utilizando funciones y es ahora el momento en el que realmente verá toda la potencia que le pueden aportar a sus aplicaciones.

Ocultar

NMC Virtual Worlds . Math Art on NMC Campus (CC BY)

En unidades anteriores ya has visto y utilizado alguna vez funciones. Una función es la definición de un conjunto de acciones pre-programadas. Las funciones se llaman a través de eventos o bien mediante comandos desde nuestro script.

Siempre que sea posible, tienes que diseñar funciones que puedas reutilizar en otras aplicaciones, de esta forma, tus funciones se convertirán en pequeños bloques constructivos que te permitirán ir más rápido en el desarrollo de nuevos programas.

Si conoces otros lenguajes de programación, quizás te suene el término de subrutina o procedimiento. En JavaScript no vamos a distinguir entre procedimientos (que ejecutan acciones), o funciones (que ejecutan acciones y devuelven valores). En JavaScript siempre se llamarán funciones.

Una función es capaz de devolver un valor a la instrucción que la invocó, pero esto no es un requisito obligatorio en JavaScript. Cuando una función devuelve un valor, la instrucción que llamó a esa función, la tratará como si fuera una expresión.

Te mostraré algunos ejemplos en un momento, pero antes de nada, vamos a ver la sintaxis formal de una función:

function nombreFunción ( [parámetro1]....[parámetroN] )
{
     // instrucciones
}

Si nuestra función va a devolver algún valor emplearemos la palabra reservada return, para hacerlo. Ejemplo:

function nombreFunción ( [parámetro1]....[parámetroN] )
{
     // instrucciones
     return valor;
}

Los nombres que puedes asignar a una función, tendrán las mismas restricciones que tienen los elementos HTML y las variables en JavaScript. Deberías asignarle un nombre que realmente la identifique, o que indique qué tipo de acción realiza. Puedes usar palabras compuestas como chequearMail o calcularFecha, y fíjate que las funciones suelen llevar un verbo, puesto que las funciones son elementos que realizan acciones.

Una recomendación que te hacemos, es la de que las funciones sean muy específicas, es decir que no realicen tareas adicionales a las inicialmente propuestas en esa función.

Para realizar una llamada a una función lo podemos hacer con:

nombreFuncion( );  // Esta llamada ejecutaría las instrucciones programadas dentro de la función.

Otro ejemplo de uso de una función en una asignación:

let variable; // La declaramos. <br />
variable = nombreFuncion( );  // En este caso la función devolvería un valor que se asigna a la variable.

Las funciones en JavaScript también son objetos, y como tal tienen métodos y propiedades. Un método, aplicable a cualquier función puede ser toString(), el cuál nos devolverá el código fuente de esa función.

1.1.- Parámetros.

Ocultar

Calculadora que ilustra los parámetros. — Matteo Piotto. *Calculadora.* (CC BY-SA)

Cuando se realiza una llamada a una función, muchas veces es necesario pasar parámetros (también conocidos como argumentos). Este mecanismo nos va a permitir enviar datos entre instrucciones.

Para pasar parámetros a una función, tendremos que escribir dichos parámetros entre paréntesis y separados por comas.

A la hora de definir una función que recibe parámetros, lo que haremos es, escribir los nombres de las variables que recibirán esos parámetros entre los paréntesis de la función.

Veamos el siguiente ejemplo:

function saludar(a,b)
{
     alert("Hola " + a + " y "+ b +".");
    // recuerda que alert no es buena práctica 
    // pero si que sirve al principio para depurar
}

Si llamamos a esa función desde el código:

saludar("Martin","Silvia");      //Mostraría una alerta con el texto: Hola Martin y Silvia.

Los parámetros que usamos en la definición de la función a y b, no usan la palabra reservada var para inicializar dichas variables. Esos parámetros a y b serán variables locales a la función, y se inicializarán automáticamente en el momento de llamar a la función, con los valores que le pasemos en la llamada. En el siguiente apartado entraremos más en profundidad en lo que son las variables locales y globales.

Otro ejemplo de función que devuelve un valor:

function devolverMayor(a,b)
{
     let devolver;
     if (a > b) 
          devolver=a;
     else
          devolver=b;

     return (devolver);

}

El código anterior es muy típico resolverlo con dos returns (mal resuelto), pero aunque es mejor en este caso se puede mejorar y resolver en una línea.

function devolverMayor(a,b)
{
     
     return (a > b) ;

}

Ejemplo de utilización de la función anterior:

document.write ("El número mayor entre 35 y 21 es el: " + devolverMayor(35,21) + ".");

Ejercicio Resuelto

Ocultar

Vamos a realizar nuestra primera función propia.

Vamos a realizar la multiplicación de tres números que se pasan como argumentos.

Citas para pensar

Ocultar

La inteligencia es la función que adapta los medios a los fines.
HARTMANN, N.

Para saber más

Ocultar

Más información sobre funciones.

Ejemplo de funciones con parámetros.

1.2.- Ámbito de las variables.

Ocultar

Pizarra con fórmulas. — Leonardo Parada. *Fórmulas.* (CC BY)

Ha llegado la hora de distinguir entre las variables que se definen fuera de una función, y las que se definen dentro de las funciones.

Las variables que se definen fuera de las funciones se llaman variables globales. Las variables que se definen dentro de las funciones, con las palabras reservada var, y con let se llaman variables locales. const lo veremos al final del punto.

Una variable global en JavaScript tiene una connotación un poco diferente, comparando con otros lenguajes de programación. Para un script de JavaScript, el alcance de una variable global, se limita al documento actual que está cargado en la ventana del navegador o en un frame. Sin embargo cuando inicializas una variable como variable global, quiere decir que todas las instrucciones de tu script (incluidas las instrucciones que están dentro de las funciones), tendrán acceso directo al valor de esa variable. Todas las instrucciones podrán leer y modificar el valor de esa variable global.

En el momento que una página se cierra, todas las variables definidas en esa página se eliminarán de la memoria para siempre. Si necesitas que el valor de una variable persista de una página a otra, tendrás que utilizar técnicas que te permitan almacenar esa variable (como las cookies, localStorage, etc.).

Debes declarar las variables con la palabra reservada ya sea var o let. En teoría no haría falta declarar la variable pero eso nos lleva a usar una variable var, que es global en el ámbito de la función, pero que lo mismo no queremos que sea así. Te recomiendo que uses let ya que así te protegerás de futuros cambios en las próximas versiones de JavaScript.

Aunque no muy usado el modo estricto de JavaScript,en este es es obligatorio declararlas. Siempre es una buena práctica: declarar las variables con let.

En contraste a las variables globales, una variable local será definida dentro de una función. Antes viste que podemos definir variables en los parámetros de una función (sin usar var), pero también podrás definir nuevas variables dentro del código de la función. En este caso, si que se requiere el uso de la palabra reservada var cuando definimos una variable local, ya que de otro modo, esta variable será reconocida como una variable global.

El alcance de una variable local está solamente dentro del ámbito de la función. Ninguna otra función o instrucciones fuera de la función podrán acceder al valor de esa variable.

Reutilizar el nombre de una variable global como local es uno de los bugsBugEs un típico fallo en programación. Generalmente se refiere a fallos o errores de tipo lógico, que suelen ser más difíciles de detectar que los errores sintácticos, los cuáles si que son mostrados por el analizador sintáctico del lenguaje. más sutiles y por consiguiente más difíciles de encontrar en el código de JavaScript. La variable local en momentos puntuales ocultará el valor de la variable global, sin avisarnos de ello. Como recomendación, no reutilices un nombre de variable global como local en una función, y tampoco declares una variable global dentro de una función, ya que podrás crear fallos que te resultarán difíciles de solucionar.

Ejemplo de variables locales y globales:

/// Uso de variables locales y globales no muy recomendable, ya que estamos empleando el mismo nombre de variable en global y en local.
var  chica  =  "Aurora";           // variable global
var  perros  =  "Lacky, Samba y Ronda";       // variable global
function  demo()
{
     //  Definimos una variable local (fíjate que es obligatorio para las variables locales usar var) 
     //  Esta variable local tendrá el mismo nombre que otra variable global pero con distinto contenido.
     // Si no usáramos var estaríamos modificando la variable global chica.
     var  chica  =  "Raquel";     // variable local
     document.write( "<br/>"+ perros +"  no pertenecen a "+ chica +".");
}
// Llamamos a la función para que use las variables locales.
demo();
//  Utilizamos las variables globales definidas al comienzo.
document.write( "<br/>"+ perros +"  pertenecen a "+ chica +".");

Como resultado obtenemos:

  Lacky, Samba y Ronda no pertenecen a Raquel.
  Lacky, Samba y Ronda pertenecen a Aurora.

Ocultar

Ya hemos visto que let y var son dos tipos de declaraciones de variables, y que si no declaramos nada y usamos directamente una variable vamos a tener un problema.

En los últimos años se puso de moda la declaración de falsas variables con const. A ver, const no es exactamente una constante, pero se ha llegado a un abuso del mismo. La idea del uso de const es evitar la reasignación de las mismas, en teoría al menos. Ya sabemos que en educación a distancia hay mucho alumando que entra en segundo en este módulo para aprender a programar y no en primero, les va a causar muchos problemas de buenas prácticas futuras ya que no sabrá distinguir entre una variable y una constante y ahora es muy importante que el alumnado sepa arreglar los fallos de las IAs y como pasa con los while true y otras malas prácticas.

Así que en principio no vamos a usar const con las siguientes excepciones:

Entrada de datos. Ningún tipo de entrada debe modificarse en la misma. Esta buena práctica se les enseña en programación de primero y nosotros vamos a mantenerlo.
Constantes auténticas, como por ejemplo un número PI. Si calculamos algo, lo asignamos a un let y después a un const. A muchos programadores que siguen buenas metodologías les duele la vista de ver así una asignación.
Las expresiones regulares no se modifican y deberían ir con const.
Resultados de una consulta que no vayan a ser modificados como veremos en la unidad 6.
Elementos del DOM.
Funciones flecha.

Como hemos dicho antes const no permite la reasignación, pero si permite la modificación de objetos y arrays mutables, como veremos en los siguientes puntos.

Para terminar debemos recordar que el ámbito de const es el mismo que let.

Para saber más

Ocultar

En unos años el modo estricto será el más utilizado. Pero de momento no lo vamos a usar. De cualquier forma es interesante que lo busquéis.

Modo estricto.

1.3.- Funciones anidadas.

Ocultar

Platos uno encima de otro. — timlewisnm. *nested bowls* (CC BY-SA)

Los navegadores más modernos nos proporcionan la opción de anidar unas funciones dentro de otras. Es decir podemos programar una función dentro de otra función.

Cuando no tenemos funciones anidadas, cada función que definamos será accesible por todo el código, es decir serán funciones globales. Con las funciones anidadas, podemos encapsular la accesibilidad de una función dentro de otra y hacer que esa función sea privada o local a la función principal. Tampoco te recomiendo el reutilizar nombres de funciones con esta técnica, para evitar problemas o confusiones posteriores.

La estructura de las funciones anidadas será algo así:

function  principalA()
{
// instrucciones
     function  internaA1()
     {
          // instrucciones     
     }
// instrucciones
}
function  principalB()
{
     // instrucciones
     function  internaB1()
     {
          // instrucciones
     }
     function  internaB2()
     {
          // instrucciones
     }
     // instrucciones
}

Una buena opción para aplicar las funciones anidadas, es cuando tenemos una secuencia de instrucciones que necesitan ser llamadas desde múltiples sitios dentro de una función, y esas instrucciones sólo tienen significado dentro del contexto de esa función principal. En otras palabras, en lugar de romper la secuencia de una función muy larga en varias funciones globales, haremos lo mismo pero utilizando funciones locales.

Ejemplo de una función anidada:

function hipotenusa(a, b) 
{
   function cuadrado(x) 
     { 
          return x*x; 
     }
   return Math.sqrt(cuadrado(a) + cuadrado(b));
}
document.write("<br/>La hipotenusa de 1 y 2 es: "+hipotenusa(1,2));
// Imprimirá: La hipotenusa de 1 y 2 es: 2.23606797749979

Citas para pensar

Ocultar

La función última de la crítica es que satisfaga la función natural de desdeñar, lo que conviene a la buena higiene del espíritu.
de PESSOA, Fernando.

1.4.- Funciones flecha.

Ocultar

Världskulturmuseet. Punta de flecha (CC BY)

Una de las novedades de ES6/ES2015 son las funciones flecha (arrow también conocidas como lambdas en Java y otros lenguajes).

Pero antes de meternos hablaremos de funciones anónimas. Estas funciones anónimas son funciones que pueden asignarse a una variable, constante o gestor de eventos por ejemplo: Veamos un código:

const cuadrado = function (x) { return x*x; };
document.write("El cuadrado de 2 es:" + cuadrado(2));

Si os fijáis esta función no tiene nombre pero puede ser asignada. Algo muy similar a lo siguiente.

Sin meternos en complicaciones, las funciones flecha, son funciones declaradas de esta forma curiosa: argumentos => { sentencias } Veamos un ejemplo sencillo para realizar el cuadrado de un número.

const cuadrado = (x) => { return x*x; };
document.write("El cuadrado de 2 es:" + cuadrado(2));

Atentos que ese const, es un const obligatorio que es una buena práctica. No let ni var lo son en este caso.

La idea de usar funciones flecha es ahorrar un poco de código a cambio de tener problemas con this en el código antiguo. Tenlo en cuenta porque cuando trabajes con eventos puedes tener comportamiento ligeramente diferente si estás actualizando código antiguo.

Las funciones flecha se derivan de los lenguajes funcionales. Pero últimamente se están añadiendo a todos los lenguajes orientados a objetos (incluso C++). En Java te puedes ahorrar decenas de líneas y clases anónimas. En JavaScript puede llegar a realizar hasta funciones más largas que las normales como veremos en los ejemplos posteriores. Pero fuera de bromas aportan más brevedad en cuestiones, pero pierden versatilidad con this y aunque tienes múltiples formas para gestionar eventos (que veremos en la unidad 4 y 5), perdemos opciones por modas que en JavaScript pasan muy a menudo .

Seguro que las habéis visto alguna vez en Internet y aunque son útiles, no es necesario conocerlas para programar en JavaScript siendo realmente útiles en el lenguaje derivado TypeScript (pero eso es otra cuestión).

En este código podemos ver como se puede comparar la creación de funciones flecha con nombre no tienen tanto sentido como cuando realizas una asignación directa.

function matesCero (a,b) { // Clásica
    return (a*a+b*b*b);
}
const matesUno = function  (a, b) {  // Forma anónima.
        return (a*a+b*b*b);
        };
const matesDos = (a, b) => { // Función flecha.
        return (a*a+b*b*b);
        }

El tamaño la clásica es la más pequeña en tamaño. Así que la utilización dependerá del contexto en el que lo necesites la elección que realices.

Una última cosa es que puedes crear funciones flecha sin usar {} siempre que sea una línea. Por ejemplo parámetro => instrucción , pero recuerda que es muy fácil, pero que te puede pasar como con el if sin llaves {} y que te provoques errores.

const cuadrado = x => x*x;
document.write("El cuadrado de 10 es:" + cuadrado(10));

Además no se ha puesto ni el return . Si haces una sola línea estas haciendo un return implicito.

Ejercicio Resuelto

Ocultar

En este ejercicio vamos a realizar una función flecha con return implícito.

Vamos a realizar una función flecha que se asignará a un const de nombre sumaTres. Tendrá tres parámetros de entrada.

Reflexiona

Ocultar

¿Es necesario realizar todas las funciones con función flecha?

¿Te ahorras mucho tiempo tecleando?

¿Tiene ventajas en rendimiento?

¿Tienes acceso a más propiedades del lenguaje?

Para saber más

Ocultar

Funciones Flecha.

1.5.- Funciones predefinidas del lenguaje.

Ocultar

Has visto en unidades anteriores un montón de objetos con sus propiedades y métodos. Si te das cuenta todos los métodos en realidad son funciones (llevan siempre paréntesis con o sin parámetros). Pues bien en JavaScript, disponemos de algunos elementos que necesitan ser tratados a escala global y que no pertenecen a ningún objeto en particular (o que se pueden aplicar a cualquier objeto).

Tira cómica. — Austin King. *Meme* (CC BY-SA)

Propiedades globales en JavaScript:

Propiedades globales en JavaScript
Propiedad	Descripción
Infinity	Un valor numérico que representa el infinito positivo/negativo.
NaN	Valor que no es numérico "Not a Number".
undefined()	Indica que a esa variable no le ha sido asignado un valor.

Te mostraremos aquí una lista de funciones predefinidas, que se pueden utilizar a nivel global en cualquier parte de tu código de JavaScript. Estas funciones no están asociadas a ningún objeto en particular. Típicamente, estas funciones te permiten convertir datos de un tipo a otro tipo.

Ocultar

Funciones globales o predefinidas en JavaScript:

Funciones globales en JavaScript.
Función	Descripción
decodeURI()	Decodifica los caracteres especiales de una URL excepto: , / ? : @ & = + $ #
decodeURIComponent()	Decodifica todos los caracteres especiales de una URL.
encodeURI()	Codifica los caracteres especiales de una URL excepto: , / ? : @ & = + $ #
encodeURIComponent()	Codifica todos los caracteres especiales de una URL.
escape()	Codifica caracteres especiales en una cadena, excepto: * @ - _ + . /
eval()	Evalúa una cadena y la ejecuta si contiene código u operaciones.
isFinite()	Determina si un valor es un número finito válido.
isNaN()	Determina cuando un valor no es un número.
Number()	Convierte el valor de un objeto a un número.
parseFloat()	Convierte una cadena a un número real.
parseInt()	Convierte una cadena a un entero.
unescape()	Decodifica caracteres especiales en una cadena, excepto: * @ - _ + . /

Ejemplo de la función eval():

     eval("x=50;y=30;document.write(x*y)");     // Imprime 1500
     document.write("<br />" + eval("8+6"));      // Imprime 14
     document.write("<br />" + eval(x+30));       // Imprime 80

Ejercicio Resuelto

Ocultar

Vamos a realizar una función que convierta una cadena a número.

Cree la función convertir(texto) que devuelve el número flotante. No uses Number.

Debes conocer

Ocultar

El siguiente enlace amplía información sobre las funciones predefinidas en JavaScript.

Más información y ejemplos sobre propiedades y funciones predefinidas en JavaScript.

2.- Estructuras de datos. Colecciones.

Caso práctico

Ocultar

Barras metálicas entrelazadas. — Ricardo Luque.. *El caminante imaginario.* (CC BY-SA)

Antonio comienza a estudiar las estructuras de datos que le permitirán almacenar la información que gestionará en sus scripts, de una forma mucho más organizada. Existen muchos tipos de estructuras de datos, pero en este caso Antonio profundizará en una de ellas "los arrays, mapas y colecciones".

Verá cómo crearlos, recorrerlos para consultar su información, borrar elementos del array, y las propiedades y métodos disponibles para su gestión.

Terminará estudiando lo que son arrays paralelos y arrays multidimensionales, los cuales le permitirán ampliar la capacidad y ventajas que aporta un array estándar. Y como solucionar los problemas de repetición fácilmente con conjuntos.

Ocultar

En los lenguajes de programación existen estructuras de datos especiales, que nos sirven para guardar información más compleja que una variable simple. En la segunda unidad vimos como crear variables y cómo almacenar valores (simples), dentro de esas variables.

Las colecciones son estructura de datos, que representan un grupo de objetos, permitiendo su almacenaje y organización.

Hay un montón de tipos de colecciones (listas, pilas, colas, árboles, conjuntos,…), que se pueden utilizar para almacenar datos, pero una estructura de las más utilizadas en todos los lenguajes es el array. El array, es como una variable o zona de almacenamiento continuo, donde podemos introducir varios valores en lugar de solamente uno, como ocurre con las variables normales.

Los arrays también se suelen denominar matrices o vectores. Desde el punto de vista lógico, una matriz se puede ver como un conjunto de elementos ordenados en fila (o filas y columnas si tuviera dos o más dimensiones).

Se puede considerar que todos los arrays son de una dimensión: la dimensión principal, pero los elementos de dicha fila pueden a su vez contener otros arrays o matrices, lo que nos permitiría hablar de arrays multidimensionales (los más fáciles de imaginar son los de una, dos y tres dimensiones).

Los arrays son una estructura de datos, adecuada para situaciones en las que el acceso a los datos se realiza de forma aleatoria e impredecible. Por el contrario, si los elementos pueden estar ordenados y se va a utilizar acceso secuencial sería más adecuado usar una lista, ya que esta estructura puede cambiar de tamaño fácilmente durante la ejecución de un programa.

Los arrays nos permiten guardar un montón de elementos y acceder a ellos de manera independiente. Cada elemento es referenciado por la posición que ocupa dentro del array. Dichas posiciones se llaman índices y siempre son correlativos. Existen tres formas de indexar los elementos de un array:

indexaciónIndexación.Es el proceso que consiste en registrar ordenadamente la información para elaborar un índice, con la finalidad de obtener resultados de forma más rápida y relevante a la hora de realizar búsquedas. base-cero(0): en este modo, el primer elemento del array será la componente 0, es decir tendrá el índice 0.
indexación base-uno(1): en este modo, el primer elemento tiene el índice 1.
indexación base-n(n): este modo, es un modo versátil de indexación, en el que el índice del primer elemento puede ser elegido libremente.

En JavaScript cuando trabajamos con índices numéricos utilizaremos la indexación base-cero(0).

Los arrays se introdujeron en JavaScript a partir de la versión 1.1, es decir que en cualquier navegador moderno disponible actualmente no tendrás ningún tipo de problema para poder usar arrays.

Ocultar

Haremos colas y pilas con la funcionalidad que proporcionan los arrays en JavaScript.

Además de los arrays veremos conjuntos y mapas en los siguientes subpuntos como un gran añadido al lenguaje JavaScript ya que originalmente, a diferencia del array, no estaban contemplados.

Para saber más

Ocultar

Más información y tipos de estructuras de datos.

Ocultar

Citas para pensar

Ocultar

Lo que el estilo es a la persona, la estructura es a la obra.
Goytisolo, Luis.

2.1.- Objeto Array.

Ocultar

Productor de energia solar — Aaron Gustafson.. *Down the array.* (CC BY-SA)

Un array es una de las mayores estructuras de datos proporcionadas para almacenar y manipular colecciones de datos. A diferencia de otros lenguajes de programación, los arrays en JavaScript son muy versátiles, en el sentido de los diferentes tipos de datos que podemos almacenar en cada posición del array. Esto nos permite por ejemplo, tener un array de arrays, proporcionando la equivalencia de arrays multidimensionales, pero adaptado a los tipos de datos que necesite nuestra aplicación.

En programación, un array se define como una colección ordenada de datos. Lo mejor es que pienses en un array como si fuera una tabla que contiene datos, o también como si fuera una hoja de cálculo.

JavaScript emplea un montón de arrays internamente para gestionar los objetos HTML en el documento, propiedades del navegador, etc. Por ejemplo, si tu documento contiene 10 enlaces, el navegador mantiene una tabla con todos esos enlaces. Tú podrás acceder a esos enlaces por su número de enlace (comenzando en el 0 como primer enlace). Si empleamos la sentencia de array para acceder a esos enlaces, el nombre del array estará seguido del número índice (número del enlace) entre corchetes, como por ejemplo: document.links[0] , representará el primer enlace en el documento.

En la unidad anterior si recuerdas, teníamos colecciones dentro del objeto document. Pues bien, cada una de esas colecciones (anchors[], forms[], links[], e images[]) será un array que contendrá las referencias de todas las anclas, formularios, enlaces e imágenes del documento.

A medida que vayas diseñando tu aplicación, tendrás que identificar las pistas que te permitan utilizar arrays para almacenar datos. Por ejemplo, imagínate que tienes que almacenar un montón de coordenadas geográficas de una ruta a caballo: ésto si que sería un buen candidato a emplear una estructura de datos de tipo array, ya que podríamos asignar nombres a cada posición del array, realizar cálculos, ordenar los puntos, etc. Siempre que veas similitudes con un formato de tabla, será una buena opción para usar un array.

Por ejemplo si tenemos las siguientes variables:

let coche1="Seat";
let coche2="BMW"; 
let coche3="Audi"; 
let coche4="Toyota";

Este ejemplo sería un buen candidato a convertirlo en un array, ya que te permitiría introducir más marcas de coche, sin que tengas que crear nuevas variables para ello. Lo haríamos del siguiente modo:

let misCoches=new Array();
misCoches[0]="Seat";
misCoches[1]="BMW"; 
misCoches[2]="Audi"; 
misCoches[3]="Toyota";

Te explicaremos más en detalle las formas de creación de un array en el siguiente apartado.

Autoevaluación

Ocultar

Solución

2.1.1.- Creación de un array.

Ocultar

Para crear un objeto array, usaremos el constructor new Array( ). Por ejemplo:

let miarray= new Array();

Un objeto array dispone de una propiedad que nos indica su longitud. Esta propiedad es length (longitud, que será 0 para un array vacío). Si queremos precisar el tamaño del array durante la inicialización (por ejemplo para que se cargue con valores <null), podríamos hacerlo pasándole un parámetro al constructor. Por ejemplo, aquí puedes ver como crear un nuevo array que almacene la información de 40 personas:

let personas = new Array(40);

A diferencia de otros lenguajes de programación, en los que hacer el dimensionamiento previo del array tiene ventajas, en JavaScript no nos dará ningún tipo de ventaja especial, ya que podremos asignar un valor a cualquier posición del array en cualquier momento, esté o no definida previamente. La propiedad length se ajustará automáticamente al nuevo tamaño del array. Por ejemplo podríamos hacer una asignación tal como personas[53] y eso que nuestro array es de 40 posiciones. En este caso no ocurrirá ningún problema, ya que la propiedad length del array se ajustará automáticamente para poder almacenar la posición 53, con lo que la nueva longitud del array será 54, ya que la primera posición del array es la [0] y la última es la [53], tendremos por lo tanto 54 elementos en el array.

personas[53] =  "Irene Sáinz Veiga";
longitud = personas.length;      // asignará a la variable longitud el valor 54

Introducir datos en un array

Introducir datos en un array, es tan simple como crear una serie de sentencias de asignación, una por cada elemento del array. Ejemplo de un array que contiene el nombre de los planetas del sistema solar:

let sistemaSolar = new  Array( );
sistemaSolar[0] = "Mercurio"; sistemaSolar[1] = "Venus"; sistemaSolar[2] = "Tierra";
sistemaSolar[3] = "Marte"; sistemaSolar[4] = "Jupiter"; sistemaSolar[5] = "Saturno";
sistemaSolar[6] = "Urano"; sistemaSolar[7] = "Neptuno";

Esta forma es un poco tediosa a la hora de escribir el código, pero una vez que las posiciones del array están cubiertas con los datos, acceder a esa información nos resultará muy fácil:

let unPlaneta = sistemaSolar[2];     // almacenará en unPlaneta la cadena "Tierra".

Otra forma de crear el array puede ser mediante el constructor. En lugar de escribir cada sentencia de asignación para cada elemento, lo podemos hacer creando lo que se denomina un "array denso", aportando al constructor array( ), los datos a cubrir separados por comas:

let sistemaSolar = new array ("Mercurio","Venus","Tierra","Marte","Jupiter","Saturno","Urano","Neptuno");

El término de "array denso" quiere decir que los datos están empaquetados dentro del array, sin espacios y comenzando en la posición 0. Otra forma permitida a partir de la versión de JavaScript 1.2+, sería aquella en la que no se emplea el constructor y se definen los arrays de forma literal:

let sistemaSolar = ["Mercurio","Venus","Tierra","Marte","Jupiter","Saturno","Urano","Neptuno"];

Los corchetes sustituyen a la llamada al constructor new Array(). Hay que tener cuidado con esta forma de creación que quizás no funcione en navegadores antiguos.

Y para terminar vamos a ver otra forma de creación de un array mixto (o también denominado objeto literal), en el que las posiciones son referenciadas con índices de tipo texto o números, mezclándolos de forma aleatoria. Si las posiciones índice están definidas por un texto, para acceder a ellas lo haremos utilizando su nombre y no su número (en este caso si usamos el número nos daría una posición undefined). El formato de creación sería: nombrearray = { "indice1" : valor , indice2 : "valor" , …}

(fíjate que en este caso para definir el array de tipo mixto tendremos que hacerlo comenzando y terminando con llaves { } ). Por ejemplo:

let datos = { "numero": 42, "mes"  : "Junio", "hola" : "mundo", 69 : "96" };
document.write("<br/>"+datos["numero"]+ " -- " + datos["mes"]+ " -- " + datos["hola"]+ " -- " + datos[69]+ "<br/>");

También podemos hacer combinaciones aún más extrañas.

let datos=[]; // Se crea una matriz vacía de otra forma distinta.
datos[-124]="valor"; // Es una posición asociativa.
datos[1.000]="Contenido"; //No es asociativo ya que redondea a la posición 1.  No es asociativo o disperso el índice. 
datos["tres"]=""; // Es asociativo 
console.log(datos);

Por supuesto no es recomendable mezclarlas, pero se pueden utilizar.

Ejercicio Resuelto

Ocultar

JavaScript tiene muchas formas de realizar lo mismo.

Vamos a crear un array con los personajes de The Big Bang Theory de las dos formas principales que hemos visto aquí.

Estas son los componentes.

Sheldon

Leonard

Penny

Howard

Raj

Bernadette

Amy

Stuart

2.1.2.- Recorrido de un array.

Ocultar

Array de planetas. — Kabsik Park. *solar_system* (CC BY)

Existen múltiples formas de recorrer un array para mostrar sus datos. Veamos algunos ejemplos con el array del sistema Solar:

let sistemaSolar = new  Array();
sistemaSolar[0] = "Mercurio";
sistemaSolar[1] = "Venus";
sistemaSolar[2] = "Tierra";
sistemaSolar[3] = "Marte";
sistemaSolar[4] = "Jupiter";
sistemaSolar[5] = "Saturno";
sistemaSolar[6] = "Urano";
sistemaSolar[7] = "Neptuno";

Empleando un bucle for, por ejemplo:

for (let i=0;i<sistemaSolar.length;i++)
     document.write(sistemaSolar[i] + "<br/>");

Empleando un bucle while, por ejemplo:

let i=0;
while (i < sistemaSolar.length)
{
     document.write(sistemaSolar[i] + "<br/>");
     i++;
}

Empleando la sentencia for in

for (let i in objeto)
     sentencias

Esta sentencia repite la variable indicada, sobre todos los valores de las propiedades del objeto. Dentro de las sentencias i contiene el índice con el que acceder.

Es realmente útil ya que nos permite conocer las propiedades y métodos de cualquier objeto de JavaScript.

Ejemplo:

for (let i in screen)
     document.write("Propiedad" + i +" y valor " +" screen[i] " +"<br />");

Ocultar

Empleando la sentencia for of

for (let componente in objeto)
     sentencias

Esta sentencia muestra el contenido del array, y no su posición necesitando acceder al array. Tenemos el contenido del mismo

Ejemplo:

let array=[1,2,3,4,5]; 

for (let contenido of array)
     document.write("Propiedad" + i +" y valor " +" contenido " +"<br />");

Citas para pensar

Ocultar

Es curioso, que podamos predecir con siglos de antelación el recorrido de las estrellas más lejanas, y en cambio, no seamos capaces de saber cómo soplará mañana el viento en nuestro pequeño planeta.
SPOERL, Heinrich

Autoevaluación

Ocultar

Solución

2.1.3.- Borrado de elementos en un array.

Ocultar

Para borrar cualquier dato almacenado en un elemento del array, lo podrás hacer ajustando su valor a null o a una cadena vacía "".

Lapicero con goma. — Daniel Novta. *to err is human* (CC BY)

Hasta que apareció el operador delete en las versiones más modernas de navegadores, no se podía eliminar completamente una posición del array.

Al borrar un elemento del array, se eliminará su índice en la lista de índices del array, pero no se reducirá la longitud del array. Por ejemplo en las siguientes instrucciones:

elarray.length;          //  resultado: 8
delete elarray[5];
elarray.length;          //  resultado: 8
elarray[5];          //  resultado:  undefined

El proceso de borrar una entrada del array no libera la memoria ocupada por esos datos necesariamente. El intérprete de JavaScript, encargado de gestionar la colección de basura en memoria, se encargará de liberar memoria ocupada cuando la necesite.

Si se quiere tener un mayor control sobre la eliminación de elementos de un array, deberías considerar usar el método splice(índice, número de elementos a eliminar), que está soportado por la mayoría de los navegadores. Este método se puede usar en cualquier array, y te permite eliminar un elemento o una secuencia de elementos de un array, provocando que la longitud del array se ajuste al nuevo número de elementos.

Ejemplo de uso del operador delete:

Si consideramos el siguiente array denso:

let  oceanos = new  array("Atlantico","Pacifico","Artico","Indico");

Esta clase de array asigna automáticamente índices numéricos a sus entradas, para poder acceder posteriormente a los datos, como por ejemplo con un bucle:

for  (let  i=0; i < oceanos.length;  i++)
{
     if  (oceanos[i] == "Atlantico")
     {
          //  instrucciones a realizar..
     }
}

Si ejecutamos la instrucción:

delete oceanos[2];

Se producirán los siguientes cambios: en primer lugar el tercer elemento del array ("Artico"), será eliminado del mismo, pero la longitud del array seguirá siendo la misma, y el array quedará tal y como:

oceanos[0] = "Atlantico";
oceanos[1] = "Pacifico";
oceanos[3] = "Indico";

Si intentamos referenciar oceanos[2] nos devolverá un resultado indefinido (undefined).

Si queremos eliminar la tercera posición y que el array reduzca su tamaño podríamos hacerlo con la instrucción:

oceanos.splice(2,1); // las posiciones del array resultante serán 0, 1 y 2.

El operador delete deja undefined al borrar, así que es mejor borrar con splice.

Ejercicio Resuelto

Ocultar

Partiendo del ejercicio resuelto anterior de los personajes de The Big Bang Theory.

Vamos a eliminar con splice la posición 3 en el array. Después la última posición del mismo.

2.1.4.- Trabajando sobre arrays. Iteradores en arrays.

Ocultar

Una tabla alimentaria para elegir. — United States. Department of Agriculture.. *For health--eat some food from each group--every day!* (CC BY)

Vimos ya que cuando borrabas un elemento con delete dejabas undefined y el tamaño del length llega ser incorrecto. Además de los bucles for in y for of tenemos otra forma de recorrer los objetos y arrays de JavaScript que nos van a permitir realizar filtrados sobre los mismos e incluso usar el iterador next para recorrerlos. Sin embargo empezamos con formas para recorrer los arrays y sacar información de los mismos como son foreach, filter, some, any, etc...

Propiedades globales en JavaScript:

recorridos de arrays funcionales en JavaScript
Propiedad	Descripción
forEach()	Recorrer el array ejecutando la función que se le pasa.
map()	Crea un nuevo array transformado basado en el original.
filter()	Crea un nuevo array con los elementos que cumplan una condición.
some()	Te dice si alguno de los elementos cumple una condición. Basta con uno.
every()	Te dice si todos los elementos del array cumplen una condición. Necesitas que sean todos a diferencia de some().
find()	Devuelve el primer elemento que cumple una condición.
reduce()	Reduce a un solo resultado el array, aplicando una función acumulativa. Por ejemplo, si tienes un array numérico puedes obtener la suma.

Si os habéis fijado necesitan una función anónima o flecha, si no vas a reutilizarlos, o una normal si esa función la vas a utilizar posteriormente. En la siguiente

// Suponemos que estamos jugando una partida de un juego de rol y
// queremos hacer cosas con esos nombres de los jugadores.
let personajes = ["Thorin", "Eldrin", "Morgana", "Balgruf", "Zara"];

// foreach
personajes.forEach(nombre => {
  console.log(nombre);
});

// se pasan a minúsculas todos los nombres con map
let minusculas = personajes.map(nombre => nombre.toLowerCase());
console.log(minusculas); // ["thorin", "eldrin", "morgana", "balgruf", "zara"];

// se obtiene los nombres más largos de 6 caracteres que irán al array largos.
let largos = personajes.filter(nombre => nombre.length > 6);
console.log(largos); // ["Morgana", "Balgruf"]

// Con some vamos a ver si hay al menos un nombre "Zara"
let existeZara = personajes.some(nombre => nombre === "Zara");
console.log(existeZara); // true

// Con every vamos a comprobar si todos los nombres tienen al menos 5 caracteres. 
let  todosTienenCinco = personajes.every(nombre => nombre.length >= 5);
console.log(todosTienenCinco); // true

// Con  find vamos a buscar los nombres de los personajes que empiezan con B
let empiezaConB = personajes.find(nombre => nombre.startsWith("B"));
console.log(empiezaConB); // "Balgruf"

// Con reduce vamos a sacar todas las cadenas en una.
let todosJuntos = personajes.reduce((concatenado, nombre) => concatenado + " " + nombre);
console.log(todosJuntos); // "Thorin Eldrin Morgana Balgruf Zara"

// Piensa como ejercicio como calcular la longitud total.

Ocultar

Ahora entramos en la parte difícil de comprender. Una parte que utiliza patrones para simplificar el proceso. En el punto 4 podrás ver más información de como utilizar los más importantes. Puede que tu profesor no te lo exija en la tarea por ser quizás un poco confusos y difíciles para este curso. Pero sí que debes conocer el concepto.

Ahora bien, ¿qué es un iterador de un array?

Un iterador de un array te permite recorrerlo paso a paso usando next().

let bigbangTheory = ["Sheldon", "Leonard", "Penny", "Howard", "Raj"];

// Esta función inicializa el iterador creado.
function crearIterador(array) {
  let indice = 0;
  return {
    next: function() { // Nuestro next 
      if (indice < array.length) { // si no hemos terminado. 
     // Devolvemos una tupla con dos opciones con la siguiente posición y le indicamos con done que no ha terminado. 
        return { value: array[indice++], done: false }; 
      } else {
        return { value: undefined, done: true }; 
        // indicamos que no hay más elementos y que done está a true, o sea has terminado de recorrerlo. 
      }
    }
  };
}

const iterador = crearIterador(personajes); // aquí si que es obligatorio const. 

// Ahora se usa el iterador
let resultado = iterador.next(); // Obtenemos el primer elemento. 
while (!resultado.done) { // Mientras queden elementos en el array seguimos. 
  console.log(resultado.value); // Imprime uno por uno: "Sheldon", "Leonard", etc.
  resultado = iterador.next(); // calculamos el siguiente
}

Ahora este iterador pues es un poco complejo porque tienes que hacer esos returns tan raros de primeras. ¿Cómo lo solucionamos? Pues con un generador.

Una función generadora es un tipo especial de función que sirve como una fábrica, (un tipo de patrón que veremos), de iteradores. Al ejecutarse devuelve un nuevo objeto generador.

Una función ese convierte en funcion generadora si usa la sintaxis function*.

Todo esto parece muy raro, pero es más sencillo que hacerlo como en el ejemplo anterior.

let personajes = ["Sheldon", "Leonard", "Penny"];

function* generadorPersonajes(array) { // Al poner function* estamos indicando que es un generador. 
  for (let i = 0; i < array.length; i++) {
    yield array[i]; // fíjate en yield. Luego hablamos de lo que es.
  }
}

// Usamos el generador. 
let gen = generadorPersonajes(personajes); 

console.log(gen.next()); // { value: "Sheldon", done: false } // Al poner next() olvidamos lo que había antes en este generador, 
                                                                                            // pero en el array siguen todos los elementos. 
console.log(gen.next()); // { value: "Leonard", done: false }
console.log(gen.next().value); //  "Penny" . Al poner .value estas accediendo al contenido. 
console.log(gen.next()); // { value: undefined, done: true }
// Podrías hacer como ejercicio un bucle que recorra el array con este generador usando un while, como hicimos en el ejemplo anterior.

La palabra clave yield va a detener, temporalmente, la función devolviendo el valor de la tupla { value: valor, done: true/false}

Para saber más

Ocultar

Iteradores y generadores.

2.1.5.- Propiedades y métodos.

Ocultar

Vamos a ver a continuación, las propiedades y métodos que podemos usar con cualquier array que utilicemos en Javascript.

Pieza de Mecano. — Les Chatfield. *Meccano Alchin steam tractor* (CC BY)

Propiedades del objeto array:

Propiedades del objeto Array
Propiedad	Descripción
constructor	Devuelve la función que creó el prototipo del objeto array.
`length`	Ajusta o devuelve el número de elementos en un array.
`prototype`	Te permite añadir propiedades y métodos a un objeto.

Métodos del objeto array:

Métodos del objeto Array
Métodos	Descripción
concat()	Une dos o más arrays, y devuelve una copia de los arrays unidos.
join()	Une todos los elementos de un array en una cadena de texto.
pop()	Elimina el último elemento de un array y devuelve ese elemento.
push()	Añade nuevos elementos al final de un array, y devuelve la nueva longitud.
reverse()	Invierte el orden de los elementos en un array.
shift()	Elimina el primer elemento de un array, y devuelve ese elemento.
slice()	Selecciona una parte de un array y devuelve el nuevo array.
sort()	Ordena los elementos de un array.
splice()	Añade/elimina elementos a un array.
toString()	Convierte un array a una cadena y devuelve el resultado.
unshift()	Añade nuevos elementos al comienzo de un array, y devuelve la nueva longitud.
valueOf()	Devuelve el valor primitivo de un array.

Ocultar

Ejemplo de algunos métodos del objeto array:

Método reverse():

     let frutas = ["Plátano", "Naranja", "Manzana", "Melocotón"];
     document.write(frutas.reverse());          // Imprimirá:  Melocotón,Manzana,Naranja,Plátano

Método slice():

   let frutas = ["Plátano", "Naranja", "Manzana", "Melocotón"];
   document.write(frutas .slice(0,1) + "<br />");     // imprimirá: Plátano
   document.write(frutas .slice(1) + "<br />");          // imprimirá: Naranja,Manzana,Melocotón
   document.write(frutas .slice(-2) + "<br />");          // imprimirá: Manzana, Melocotón
   document.write(frutas + "<br />");               // imprimirá: Plátano,Naranja,Manzana,Melocotón

Debes conocer

Ocultar

Más información y ejemplos sobre el objeto array.

2.1.6.- Pilas y colas hechas con arrays en Javascript.

Ocultar

JavaScript no tiene colas ni pilas. Pero sí que tiene métodos que nos van a permitir crearlas.

En este apartado vamos a ver que métodos son necesarios para simularlas; no realizar estructuras de datos completas. Esto último se les deja a los alumnos como posibles tareas.

Veamos la definición. Cola: es un tipo de dato abstracto, caracterizada por ser una secuencia de elementos en la que la operación de inserción push, encolar, se realiza por un extremo y la operación de extracción pull, desencolar, por el otro. O sea, metemos por un lado del array y sacamos por el otro.

En la siguiente imagen puedes ver que es lo que se hace.

Una imagen en la que aparece la estructura de datos cola.

Vegpuff. Cola (CC BY-SA)

Podemos realizar una cola con push() y pop(). Como vamos a ver en el siguiente código de ejemplo:

// Lo primero es crear una cola con un array vació. Puedes usar también new Array()
let cola = [];

//  Al agregar frutas con push van al final. 
cola.push('manzana');   //  [manzana]
cola.push('banana');    //  [manzana, banana]
cola.push('piña');      //  [manzana, banana, piña]

console.log("El contenido de la cola es: ", cola); // manzana, banana, cola

// Quitamos la primera fruta (la más antigua en la cola)
let frutaEliminada = cola.shift(); // Elimina 'manzana' y se guarda en otra variable. 

console.log("Fruta eliminada:", frutaEliminada);
console.log("Cola actual:", cola); // [banana, piña]

// Agregamos una uva
cola.push('uva'); // [banana, piña, uva]

console.log("Después de agregar 'uva':", cola);

// Se elimina otra fruta. 
frutaEliminada = cola.shift(); // Elimina 'banana'

console.log("Fruta eliminada:", frutaEliminada);
console.log("Estado final de la cola:", cola); // piña, uva

Ocultar

Ahora pasamos a una pila.

Una Pila es una clase especial de lista, en nuestro caso array, en la cual todas las inserciones y borrados tienen lugar en un extremo denominado extremo, cabeza o tope.

Otro nombre para las pilas son listas FIFO (último en entrar, primero en salir). Lo habrás visto en el módulo de Sistemas Informáticos en primero para trabajar con procesos.

Boivie. Represetanción simple de una pila (CC0)

Resumen textual alternativo de una pila.

Podemos realizar una cola con push() y pop()

let pila = [];

// Añadimos las  frutas a la pila, al final: 
pila.push('manzana');   //  [manzana]
pila.push('plátano');   //  [manzana, plátano]
pila.push('piña');      //  [manzana, plátano, piña]

console.log("Después de apilar 3 frutas:", pila); // manzana, platano, piña

// Ahora quitamos la fruta del tope de la pila (la última que se añadió)
let frutaSacada = pila.pop(); // Quitamos la  'piña'

console.log("Fruta retirada del tope:", frutaSacada);
console.log("Pila actual:", pila); // [manzana, plátano] la última añadida se ha quitado.

// Agregamos una uva
pila.push('uva'); // [manzana, plátano, uva]

console.log("Después de apilar 'uva':", pila);

// Sacamos la fruta del tope
frutaSacada = pila.pop(); // Quita 'uva'

console.log("Fruta retirada del tope:", frutaSacada); // es una uva
console.log("Estado final de la pila:", pila); //  [manzana, plátano]

Cada vez que metes algo se pone al final y cada vez que lo quitas se quita el último. Entre los lectores se da este fenómeno. Te compras varios libros, los vas apilando, pero normalmente te pones a leer el último que has comprado que es el que está arriba de la pila.

Ocultar

Métodos nativos JavaScript para colas y pilas
Método	¿Qué hace?	¿Donde actúa?
push()	Agrega un elemento.	Al final.
pop()	Quita el último elemento.	Del final.
unshift()	Agrega un elemento.	Al inicio.
shift()	Quita el primer elemento.	Del inicio.

Ejercicio Resuelto

Ocultar

Volvemos al caso de los personajes de The Big Bang Theory.

Vamos a realizar con una cola para ir metiendo todos los personajes uno a uno. Luego se sacan los dos primeros.

Retroalimentación

// Primero crearmos la cola
let colaBigBang = [];

// Usamos el método push() para añadir al final del array
colaBigBang.push("Sheldon");
colaBigBang.push("Leonard");
colaBigBang.push("Penny");
colaBigBang.push("Howard");
colaBigBang.push("Raj");
colaBigBang.push("Bernadette");
colaBigBang.push("Amy");
colaBigBang.push("Stuart");

// Se muestra el contenido de la cola
console.log("Cola actual:", colaBigBang);


// Ahora useremos elmétodo shift() para quitar el primer elemento del array
console.log("\n--- Sacando personajes de la colaBigBang (los primeros) ---");

let primerPersonajeFuera = colaBigBang.shift();
console.log(`El primer personaje en salir es: ${primerPersonajeFuera}`); 
console.log("Cola después de sacar el primero:", colaBigBang);

let segundoPersonajeFuera = colaBigBang.shift();
console.log(`El segundo personaje en salir es:"+ segundoPersonajeFuera);
console.log("Cola después de sacar el segundo:", colaBigBang);


// Estado final de la cola
console.log("Cola de personajes final:", colaBigBang);

Para saber más

Ocultar

Puedes consultar todos estos métodos en más detalle en las siguientes páginas:

2.1.7.- Asignación múltiple de variables en JavaScript.

Ocultar

En este punto se ven cosas añadidas en los últimos años al lenguaje javaScript que nos simplifican la tarea de asignación, concatenación, y devolución de múltiples valores.

Ya conocemos de la primera unidad como se puede asignar una variable aun valor, pero JavaScript lo amplió para poder asignar variables directamente desde un array.

Veamos primero el caso el caso original de asignación múltiple

let a=1,b=2,c=3;

Una señal de trafico que dice return. — Nick Youngson. *Return* (CC BY-SA)

y ahora lo de la múltiple asignación usando arrays

let [nombre, apellidos, edad] = ['Alejandra', 'Jiménez Ortiz', 24];
console.log(nombre, apellido, edad); // Salida: Alejandra Jiménez Ortiz 24

Ocultar

También tenemos que tener en cuenta la ventaja de juntar arrays con el operador spread (operador de propagación) ...

let verduras1 = new Array("Pimiento","Berenjena","Puerro");
let verduras2 = new Array("Tomate","Zanahoria");
let resultado = [...verduras1,...verduras2]; // Se ha expandido cada array.
// Resultado "Pimiento","Berenjena","Puerro","Tomate","Zanahoria

Ocultar

Y por último también podemos devolver varios elementos en las funciones.

Como hemos visto se pueden devolver más de un resultado con una tupla {resultado1, resultado2} o incluso un array

 
function multicalculo(num1, num2) {
         let suma = num1 + num2;
         let resta = num1 - num2;
         return { suma, resta };
};
let { suma, resta } = multicalculo(10, 1);
console.log(suma, resta);

No te olvides de llamar igual a las variables de recepción para que funcione. Si no tendrás un undefined. ¿Cómo lo evitamos? Usando un objeto literal.

   function multicalculo(num1, num2) {
            let suma = num1 + num2;
            let resta = num1 - num2;
            return { sumar: suma, restar:resta };
   };
   let { sumar: resultado1, restar: resultado2 } = multicalculo(10, 1);
   // Ahora se guarda en resultado1 y resultado2. 
    console.log(resultado1, resultado2);

De esta forma conseguimos devolver varios valores para casos excepcionales que no tengan que ser un array.

No es buena idea devolver tipos de objetos diferentes pero a veces hay que usarlos.

Para saber más

Ocultar

Tuplas

2.1.8.- Arrays multidimensionales.

Ocultar

Una alternativa a los arrays paralelos es la simulación de un array multidimensional. Si bien es cierto que en JavaScript los arrays son uni-dimensionales, podemos crear arrays que en sus posiciones contengan otros arrays u otros objetos. Podemos crear de esta forma arrays bidimensionales, tridimensionales, etc.

Cada punto del tapiz tiene dos coordenadas. — Dan Zen. *Hierarchies, Trees, Nesting, Multidimensional Arrays, Drawers* (CC BY)

Por ejemplo podemos realizar el ejemplo anterior creando un array bidimensional de la siguiente forma:

let datos = new Array();
datos[0] = new Array("Cristina","Seguridad",24);
datos[1] = new Array("Catalina","Bases de Datos",17);
datos[2] = new Array("Vieites","Sistemas Informáticos",28);
datos[3] = new Array("Benjamin","Redes",26);

ó bien usando una definición más breve y literal del array:

let datos = [
          ["Cristina","Seguridad",24],
          ["Catalina","Bases de Datos",17],
          ["Vieites","Sistemas Informáticos",28],
          ["Benjamin","Redes",26]
      ];

Para acceder a un dato en particular, de un array de arrays, se requiere que hagamos una doble referencia. La primera referencia, será a una posición del array principal, y la segunda referencia, a una posición del array almacenado dentro de esa casilla del array principal. Esto se hará escribiendo el nombre del array, y entre corchetes cada una de las referencias: nombrearray[indice1][indice2][indice3] (nos permitiría acceder a una posición determinada en un array tridimensional).

Por ejemplo:

document.write("<br/>Quien imparte Bases de Datos? "+datos[1][0]);          // Catalina
document.write("<br/>Asignatura de Vieites: "+datos[2][1]);               // Sistemas Informaticos
document.write("<br/>Alumnos de Benjamin: "+datos[3][2]);          // 26

Si queremos imprimir toda la información del array multidimensional, tal y como hicimos en el apartado anterior podríamos hacerlo con un bucle for:

for (let i=0;i<datos.length;i++)
{
     document.write("<br/>"+datos[i][0]+" del módulo de "+datos[i][1]+", tiene "+datos[i][2]+" alumnos en clase.");          
}

Obtendríamos como resultado:

Cristina del módulo de Seguridad, tiene 24 alumnos en clase.
Catalina del módulo de Bases de Datos, tiene 17 alumnos en clase.
Vieites del módulo de Sistemas Informáticos, tiene 28 alumnos en clase.
Benjamin del módulo de Redes, tiene 26 alumnos en clase.

Para crear un array multidimensional 10x10 e inicializarlo podríamos utilizar el siguiente código:

    let datos = new Array(10);
        for ( let i = 0; i < datos.length; i++)
        {
            datos[i]=new Array(10);
            for (let j = 0; j < datos[i].length ; j++)
            {
                datos[i][j]=j;
                document.write(datos[i][j]+" ");                               
            }
            document.write("<br />");
        }

Se puede asignar un objeto en la línea datos[i][j]=new Objeto(); y de esa forma crear un array con objetos. En el punto 3 se verá como crear objetos en JavaScript.

También podríamos imprimir todos los datos de los arrays dentro de una tabla:

document.write("<table border=1>");
for (let i = 0; i< datos.length; i++)
{
     document.write("<tr>");
     for (let j = 0; j< datos[i].length; j++)
     {
          document.write("<td>"+datos[i][j]+"</td>");
     }
     document.write("</tr>");
}     
document.write("</table>")

2.1.9.- Arrays paralelos.

Ocultar

Bolas de Discoteca de los años 70. — Dominic Alves. *Mirror Balls - Brian Eno Speaker Flowers Sound Installation at Marlborough House* (CC BY)

El usar arrays para almacenar información, facilita una gran versatilidad en las aplicaciones, a la hora de realizar búsquedas de elementos dentro del array. Pero en algunos casos, podría ser muy útil hacer las búsquedas en varios arrays a la vez, de tal forma que podamos almacenar diferentes tipos de información, en arrays que estén sincronizados.

Cuando tenemos dos o más arrays, que utilizan el mismo índice para referirse a términos homólogos, se denominan arrays paralelos.

Por ejemplo consideremos los siguientes arrays:

let profesores = ["Cristina","Catalina","Vieites","Benjamin"];
let asignaturas=["Seguridad","Bases de Datos","Sistemas Informáticos","Redes"];
let alumnos=[24,17,28,26];

Usando estos tres arrays de forma sincronizada, y haciendo referencia a un mismo índice (por ejemplo índice=3), podríamos saber que Benjamín es profesor de Redes y tiene 26 alumnos en clase.

Veamos un ejemplo de código que recorrería todos los profesores que tengamos en el array imprimiendo la información sobre la asignatura que imparten y cuantos alumnos tienen en clase:

   let profesores = ["Cristina","Catalina","Vieites","Benjamin"];
   let asignaturas=["Seguridad","Bases de Datos","Sistemas Informáticos","Redes"];
   let alumnos=[24,17,28,26];
   function imprimeDatos(indice)
   {
        document.write("<br/>"+profesores[indice]+" del módulo de "+asignaturas[indice]+", tiene "+alumnos[indice]+" alumnos en clase.");
   }     
   for (let i=0;i<profesores.length;i++)
   {
        imprimeDatos(i);
   }

Éste será el resultado que obtendremos de la aplicación anterior:

Cristina del módulo de Seguridad, tiene 24 alumnos en clase.
Catalina del módulo de Bases de Datos, tiene 17 alumnos en clase.
Vieites del módulo de Sistemas Informáticos, tiene 28 alumnos en clase.
Benjamin del módulo de Redes, tiene 26 alumnos en clase.

Para que los arrays paralelos sean homogéneos, éstos tendrán que tener la misma longitud, ya que de esta forma se mantendrá la consistencia de la estructura lógica creada.

Entre las ventajas del uso de arrays paralelos tenemos:

Se pueden usar en lenguajes que soporten solamente arrays, como tipos primitivos y no registros (como puede ser JavaScript).
Son fáciles de entender y utilizar.
Pueden ahorrar una gran cantidad de espacio, en algunos casos evitando complicaciones de sincronización.
El recorrido secuencial de cada posición del array, es extremadamente rápido en las máquinas actuales.

Ejercicio Resuelto

Ocultar

Vamos a recorrer arrays paralelos.

Partimos de estos dos arrays

const personajes = [
  "Sheldon Cooper",
  "Leonard Hofstadter",
  "Penny",
  "Howard Wolowitz",
  "Raj Koothrappali",
  "Bernadette Rostenkowski-Wolowitz",
  "Amy Farrah Fowler",
  "Stuart Bloom"
];

const especialidades = [
  "Físico Teórico",
  "Físico Experimental",
  "Camarera / Vendedora Farmacéutica",
  "Ingeniero Aeroespacial",
  "Astrofísico",
  "Microbióloga",
  "Neurobióloga",
  "Propietario de tienda de cómics"
];

Queremos que no se puedan modificar los arrays (investiga como se puede hacer), porque const no evita que se puedan modificar. Necesitamos que sean inmutables.

Después recorrerlo con for normal y con un while

Para saber más

Ocultar

Ejemplo de arrays paralelos.

2.2.- Conjuntos.

Ocultar

Un conjunto, Set en JavaScript, es una colección de valores únicos. O sea, que cada valor solo puede aparecer una única vez en el conjunto declarado. Al igual que pasa en los arrays puedes mezclar diferentes tipos de datos, aunque no sea una buena práctica, pudiendo ser los valores de cualquier tipo, variables primitivas u objetos.

Vamos a ver un ejemplo de uso del mismo en el que se utilizan los métodos más habituales.

     let numeros = new Set();

      // Agregar elementos
      numeros.add(1);
      numeros.add(2);
      numeros.add(3);
      numeros.add(1); // Este no será agregado porque ya existe

      console.log(numeros); // Set { 1, 2, 3 }
      
      // Posibles problemas si usas cadenas, que haya diferencia entre mayúsculas y minúsculas.
      // Podemos añadir cadenas y mezclarlo todo.

      // con has podemos averiguar si pertenece ya a un conjunto un elemento.

      console.log(numeros.has(1)); // true
      console.log(numeros.has("polvoron")); // false

      // Eliminar un elemento
      numeros.delete(1);
      console.log(numeros); // Set { 2, 3 }</script>

Sl. Surjection (Dominio público)

Continuamos iterando.

     // Iterar sobre el Set

      // con bucle for of
      for (let i of numeros) console.log(i);

      // iterable
      numeros.forEach((numero) => console.log(numero));

      // Puedes saber el tamaño con size
      // No, no vale con length.

Ahora bien, debes saber, que aparte de set tienes otro tipo de conjunto denominado WeakSet.

Es bastante parecido a Set, pero las referencias son débiles y pueden ser eliminadas por el recolector de basuras. Además sólo se aceptan objetos.

   let conjuntoDebil = new WeakSet();

      // Creamos objetos para agregar al WeakSet
      let objeto1 = { nombre: "Juan" };
      let objeto2 = { nombre: "Ana" };

      // Agregamos objetos al WeakSet
      conjuntoDebil.add(objeto1);
      conjuntoDebil.add(objeto2);

      // Verificamos si un objeto está en el WeakSet
      console.log(conjuntoDebil.has(objeto1)); // true
      console.log(conjuntoDebil.has({ nombre: "Juan" })); // false (este es un objeto diferente)

      // Eliminar un objeto
      conjuntoDebil.delete(objeto2);
      console.log(conjuntoDebil.has(objeto2)); // false

      // Si un objeto pierde todas sus referencias, se elimina automáticamente del WeakSet
      // Por ejemplo:
      let  objeto3= { nombre: "Luis" };
      conjuntoDebil.add(objeto3);

      console.log(conjuntoDebil.has(objeto3)); // true

      // Eliminar referencia al objeto
      objeto3 = null;
      console.log(conjuntoDebil);
<br />// Y ahora iteramos por el WeakSet
      
      for (let i of conjuntoDebil) {
        console.log(i);
      }
      // Uncaught TypeError: conjuntoDebil is not <strong>iterable</strong>

Al ejecutar la última línea veremos que se produce una excepción (hablaremos de ellas adelante). ¿Por qué pasa? No puedes verificar directamente porque WeakSet no es iterable.
Debemos tener en cuenta que la gestión de la memoria se hace en otra parte.
Para terminar con los problemas debemos decir que tampoco tiene size() para saber el tamaño.

Así que no es recomendable para aun uso normal, así que mejor trabajar con Set.

Para saber más

Ocultar

Conjuntos.

Conjuntos débiles

Ejercicio Resuelto

Ocultar

Seguimos con los personajes de Big Bang Theory.

2.3.- Mapas.

Ocultar

Los mapas, Map, son una estructura de datos de tipo colección que consiste en valores almacenados a través de una clave para identificarlos. Comúnmente, esto se denomina pares clave-valor o tuplas tipo llave-valor.

Recuerdan a los arrays asociativos, pero de una forma más organizada, al menos aparentemente, qué es más optima en rendimiento que los arrays mencionados anteriormente.

Joseph Meyer . Meyers Konversationslexikon (Dominio público)

     let usuarios = new Map();

      // Agregar pares clave-valor
      usuarios.set(1, "Juan");
      usuarios.set(2, "Ana");
      usuarios.set(3, "Luis");
      usuarios.set("Me da la gana", 11); // Sí, JavaScript no aprende y te deja hacer todo aunque está mal. 
     <br />// Esto es tan loco que se pueden meter hasta funciones (Tiene sentido en cuestiones avanzadas).
     usuarios.set(function (a, b) {
        return a + b;
      }, "Funcion que hace suma");


   // Se accede a una posición.
      console.log(usuarios.get(2)); // Ana

      // Verificar si una clave existe
      console.log(usuarios.has(3)); // true
      console.log(usuarios.has(4)); // false

      // Eliminar un par clave-valor
      usuarios.delete(1);

      console.log(usuarios); // Map { 2 => 'Ana', 3 => 'Luis' , "Me da la gana" => 11}

Continuamos iterando.

     // Iterar sobre el Set

      // con bucle for of
      for (let i of numeros) console.log(i);

      // iterable
      numeros.forEach((numero) => console.log(numero));

      // Puedes saber el tamaño con size
      // No, no vale con length.

También tenemos una versión débil del mapa llamada WeakMap.

Entre las características tenemos que WeakMap sólo trabaja con objetos, así que no se traga funciones, pero tiene el problema de memoria que tienen los WeakSet.
Además no es iterable y no tiene propiedad de tamaño size como si que tiene Map.

      let mapaDebil = new WeakMap();

      let objeto1 = { id: 1 };
      let objeto2 = { id: 2 };

      // Solo se pueden usar objetos como claves
      mapaDebil.set(objeto1, "Dato asociado a objeto1");
      mapaDebil.set(objeto2, "Dato asociado a objeto2");

      // Acceder a valores
      console.log(mapaDebil.get(objeto1)); // "Dato asociado a objeto1"

      // Eliminar referencia
      // Si no hay otras referencias a `objeto1`, será eliminado automáticamente
      objeto1 = null;
      // Después de ese null el recolector de basuras lo limpia y se borra del conjunto.
      // otra locura. 
    
      console.log(mapaDebil.get(objeto1)); // "Dato asociado a objeto1"

Así que de nuevo, mejor usar Map que WeakMap de forma general.

Ejercicio Resuelto

Ocultar

Seguimos con nuestros personajes más querido.

Partiendo de este código

let nombresBigBang = ["Sheldon", "Leonard", "Penny", "Howard", "Raj", "Bernadette", "Amy", "Stuart"];

Crea un mapa. Hazlo usando bucles modernos.

Retroalimentación

// Se declara el array<br />let nombresBigBang = ["Sheldon", "Leonard", "Penny", "Howard", "Raj", "Bernadette", "Amy", "Stuart"];

// Creamos un nuevo Mapa
let mapaPersonajes = new Map();

// Llenamos el mapa usando un bucle for...of 
let id = 1; // Para dar un ID único a cada personaje
for (let nombre of nombresBigBang) {
  mapaPersonajes.set(id, nombre); // Añadimos el ID como clave y el nombre como valor
  id++; // Importante para que no tengas problemas. 
           //Prueba a ver que pasa si comentas la línea.
}

console.log("Mapa de Personajesj: " + mapaPersonajes);

// Para finalizar recorremos el mapa con un bucle for...of
console.log("\nRecorrido del mapa\n");
for (let nombrePersonaje of mapaPersonajes.values()) {
  console.log(`Nombre: ${nombrePersonaje}`);
}

Se deja como ejercicio un el conjunto.

Para saber más

Ocultar

Mapas

Mapas débiles

3.- Creación de objetos a medida.

Caso práctico

Ocultar

Antonio ha hecho una pausa para tomar café, y charla con Juan de todo lo que ha aprendido sobre las funciones. Comenta lo interesante que ha sido, pero le surge una duda, ya que cuando estudió los objetos en JavaScript, vio que tenían propiedades y métodos, y los métodos tienen el mismo formato que las funciones que acaba de estudiar. Juan le dice que efectivamente eso es así, porque en realidad los métodos son funciones que se asignan a un objeto determinado, y que a parte de los objetos que ya ha estudiado en unidades anteriores, en JavaScript podrá crear sus propios objetos, con los métodos (funciones) y propiedades que él quiera.

Terminan su café y los dos vuelven al despacho para buscar documentación sobre cómo crear nuevos objetos en JavaScript.

Los objetos se crean a partir de otros componentes básicos. — Windell Oskay. *Inside-out Lego brick* (CC BY)

Ocultar

En unidades anteriores has visto, como toda la información que proviene del navegador o del documento está organizada en un modelo de objetos, con propiedades y métodos. Pues bien, JavaScript también te da la oportunidad de crear tus propios objetos en memoria, objetos con propiedades y métodos que tú puedes definir a tu antojo. Estos objetos no serán elementos de la página de interfaz de usuario, pero sí que serán objetos que podrán contener datos (propiedades) y funciones (métodos), cuyos resultados si que se podrán mostrar en el navegador. El definir tus propios objetos, te permitirá enlazar a cualquier número de propiedades o métodos que tú hayas creado para ese objeto. Es decir, tú controlarás la estructura del objeto, sus datos y su comportamiento.

También hay que dejar claro que, JavaScript no es un lenguaje orientado a objetos de verdad en sentido estricto. Se considera que, JavaScript es un lenguaje basado en objetos. La diferencia entre orientado a objetos y basado en objetos es significante, y tiene que ver sobre todo en cómo los objetos se pueden extender. Quizás en un futuro no muy lejano podamos ver que JavaScript soporte clases, interfaces, herencia, etc.

Un objeto en JavaScript es realmente una colección de propiedades. Las propiedades pueden tener forma de datos, tipos, funciones (métodos) o incluso otros objetos. De hecho sería más fácil de entender un objeto como un array de valores, cada uno de los cuales está asociado a una propiedad (un tipo de datos, método u objeto). Un momento: ¿un método puede ser una propiedad de un objeto? Pues en JavaScript parece que sí.

Una función contenida en un objeto se conoce como un método. Los métodos no son diferentes de las funciones que has visto anteriormente, excepto que han sido diseñados para ser utilizados en el contexto de un objeto, y por lo tanto, tendrán acceso a las propiedades de ese objeto. Esta conexión entre propiedades y métodos es uno de los ejes centrales de la orientación a objetos.

Los objetos se crean empleando una función especial denominada constructor, determinada por el nombre del objeto. Ejemplo de una función constructor antigua:

function Coche( )
{
     // propiedades y métodos
}

Aunque esta función no contiene código, es sin embargo la base para crear objetos de tipo Coche. Puedes pensar en un constructor como un anteproyecto o plantilla, que será utilizada para crear objetos. Por convención, los nombres de los constructores se ponen generalmente con las iniciales de cada palabra en mayúscula, y cuando creamos un objeto con ese constructor (instancia de ese objeto), lo haremos empleando minúsculas al principio. Por ejemplo: let unCoche = new Coche( );

La palabra reservada new se emplea para crear objetos en JavaScript. Al crear la variable unCoche, técnicamente podríamos decir que hemos creado una instancia de la clase Coche, o que hemos instanciado el objeto Coche, o que hemos creado un objeto Coche, etc. Es decir hay varias formas de expresarlo, pero todas quieren decir lo mismo.

Para saber más

Ocultar

Más información sobre creación de Objetos de forma clásica (la nueva la vemos en el punto 3.1).

3.1- Clases Modernas.

Caso práctico

Ocultar

Christopher Hiller. JavaScript Logo (CC BY-NC-SA)

Antonio ha visto por internet que el Lenguaje JavaScript está evolucionando constantemente y añadiendo funcionalidad para adaptar el lenguaje de programación a los tiempos.

Juan se había adelantado y viendo que IE ya no se utiliza casi nada ha llegado el momento de utilizar las ventajas, ateniéndose a lo que funciona en los navegadores de los últimos años. Antonio le advierte a Juan que puede no funcionar todo en todos los sitios así que deciden investigar más profundamente.

Ocultar

Lo primero es decir que todo lo visto hasta ahora en esta unidad se sigue utilizando. Sin embargo, las empresas también están utilizando las nuevas tecnologías añadidas a Java y hay que conocerlas.

Pero antes de entrar a explicar centrémonos un poco en la historia. Originalmente había distintas implementaciones del lenguaje JavaScript. Incluso tenía distintos nombres; Microsoft lo llamaba jscript. A partir de 1996 se le encargó a ECMA la estandarización del lenguaje y ya lleva realizados cambios en múltiples, siendo la última versión de Junio de 2022. La mayoría de las versiones han añadido características pero nunca tan revolucionarias para el programador con la versión 6.

Otros lenguajes de programación se han derivado de este estándar; el más famoso es actionScript usado en Adobe Flash.

Lo que vamos a tratar de la versión 6 está implementado y bastante estable en los navegadores Firefox, Chrome y Edge. Y si no funciona podemos utilizar babel.js, un framework que veremos en la última unidad (por ahora no te metas).

Reflexiona

Ocultar

Babel.js está teniendo cada vez menos influencia. Estamos llegando a que sólo haya un motor de navegación. ¿Crees que es bueno?

Para saber más

Ocultar

Web de ECMA Internacional.

3.1.1.- Características de una clase ES2015.

Ocultar

Omed Habib. Unofficial Javascript Icon (CC BY-NC-SA)

Hasta la implementación completa de EcmaScript 6/ES6/ES2015 los navegadores habían tenido diversos problemas a la hora de realizar una aplicación web con clases.

Algunas cosas no funcionaban en Firefox, otras en Chrome, otras en Edge y ninguna en Internet Explorer. Ahora si que son usables.

En el siguiente código vemos lo sencillo y similar que es al Java el modelo de clases.

class clase {
    //declaracion de atributos
   constructor(){
      // ...
   }
    metodo1() {
        // ......
    }
    ......
    metodoN() {
        // ......
     }
     toString() { // Este método devuelve una propiedad.
        return ("El valor de la propiedad es" + this.propiedad);
    }
}

// A la hora de crear el objeto vamos a tener el mismo funcionamiento que en las formas anteriores
miclase = new Clase();
document.write(miclase)

Si por algún motivo quieres utilizar estas tecnologías en navegadores antiguos, te recomiendo que uses babeljs (se encuentra explicado en la unidad 6 del curso). Así podrás utilizar todas las ventajas de las versiones ES6 y superiores sin tener que perder la compatibilidad.

Antes de 2015 no existían ni métodos privados, ni constructores ni encapsulamiento ni podíamos realizar sobrecarga. A partir del estándar 2015 ya surgieron los constructores, los setters y getters especificos de JavaScript. A partir de la versión de 2022 se permite la herencia que veremos en los siguientes puntos. Recuerden que desde que sale el estándar hasta que aparece una implementación correcta en todos los navegadores puede pasar un tiempo (yo dejaría al menos un año).

Para saber más

Ocultar

Como saber si un navegador soporta clases ES6.

3.1.1.1- Constructor.

Ocultar

OpenClipart-Vectors. Albañil (CC0)

A diferencia de la versión anterior de JavaScript, esta versión dispone de un constructor definido. En las anteriores versiones de los objetos escribíamos dentro de la función de la cual colgaban los métodos el código para la asignación inicial de variables, un tanto limitado pero funcional.

A partir de ES6/ES2015 se soluciona permitiendo incluir todo el código de incialización en un método llamado constructor.

El método constructor es un método especial de una clase para crear e inicializar una instancia de un objeto de esa clase.

Este método es similar al de otros lenguajes y tiene de entrada los argumentos que van a servir para inicializar los atributos/propiedades de la clase.

Veamos un ejemplo.

class serVivo {
    constructor(peso) {
        this.peso = peso;
    }
    toString() {
        return "El peso es " + this.peso + "<br>";
    }
}

bicho = new serVivo(1);
document.write(bicho); // forma correcta de mostrar el objeto con toString().

Ocultar

También podemos usar el objeto arguments para pasar un número no determinado de argumentos. Veámoslo con un ejemplo:

class listaElementos {
   constructor(lista) {
        this.miArray=new Array();
        for ( let i=0; i<  arguments.length ;i++ )   { // let crea una variable local del bloque.     
               this.miArray.push(arguments[i]); // Se añaden los argumentos al final      
                }
        }
  toString() { 
         let devolver="";  
         for (let i=0;i<this.miArray.length;i++) {
                 devolver+=this.miArray[i];
         }
         return (devolver);
    }
}

coleccion= new listaElementos("perro","gato","canario");
document.write (coleccion); // forma correcta de mostrar el objeto con toString().

Esto objeto ya existía anteriormente a ES6, pero ahora se puede utilizar con más sentido, ya que las clases tienen pinta de clases y con este objeto podemos simular una sobrecarga de métodos.

Para saber más

Ocultar

Más de constructores en JavaScript.

3.1.1.2.- Declaración de atributos y métodos públicos.

Ocultar

Abinoam Jr.. Pills (CC BY-SA)

ES6/ES2015 añade la capacidad de crear getters y setters usando las palabras clave get y set antes del método. Este método será la forma de acceder a la propiedad, creando una especie de encapsulamiento limitado. Es limitado ya que si se conoce el nombre de la propiedad puede ser accedido. Recordemos que JavaScript no dispone de clases privadas ni métodos privados.

Los atributos se deben declarar antes del constructor. Pero no deben inicializarse fuera del mismo ya que después a la hora de buscar errores tardarás más en descubrir donde se encuentra el error. Las excepciones a esta frase son las constantes. Esos valores constantes estáticos pueden estar definidos. Pero verdaderas constantes.

Si queremos que se acceda a una propiedad con este tipo de setters o getters tenemos que darle un nombre distinto a la propiedad a la que nos vamos a referir. Por ejemplo si queremos que se acceda al peso de un objeto debemos realizar un set y un get con peso, y la propiedad original se llamará de otra forma. Una buena práctica para identificarlas es ponerle un guión bajo delante. Así pues en este caso al peso lo vamos a llamar _peso. Por supuesto hay otras formas un tanto arcanas que podréis consultar en el para saber más.

Los setters y getters son diferentes de los de los otros lenguajes de programación orientados a objetos que conocerás, como Java. Consigues que se trate de una asignación normal.

......
.....
set propiedad (mipropiedad) {
// realizar las comprobaciones pertinentes.
this._propiedad=mipropiedad;
}

get propiedad () {
return this._propiedad;
}
...
...
// ya en el código fuera de la clase
miObjeto.propiedad=10; // No hay que llamar al método como haríamos en Java.
console.log(miObjeto.propiedad);

Y aquí vemos un posible problema. ¿Qué pasa si en el setter ponemos this.propiedad=mipropiedad ? Se produce un error de recursividad ya que se llama una y otra vez al mismo setter. Ese es un error que debes evitar.

Veamos una clase completa.

class serVivo {
// declaración de variables/propiedades/atributos
  peso;
  constructor(peso) {
        this.peso = peso; // En versiones anteriores no se podía llamar al setter directamente. Ahora sí debes hacerlo de esta forma. 
    }
    get peso() {
        return this._peso;
    }
    set peso(nuevoPeso) {
       if (nuevoPeso>=0) 
            this._peso = nuevoPeso;
       else this.peso = 0; // no puede haber peso inferior a 0. 
    }
    toString() {
        return "El peso es " + this.peso + "<br>";
    }
}

let bicho = new serVivo(12);
bicho.peso = 33; // Es realmente un setPeso(33)

Como se puede comprobar aunque es accesible bicho._peso, es mucho mejor usar bicho.peso ya que te permite controlar que no se asigne un peso inferior a 0. En el siguiente punto veremos como usar privados.

Es importante llamar al setter en el constructor para que realice las comprobaciones necesarias y evitar tener que replicar código que puede llevar a diferentes problemas en el mantenimiento y aquí la suerte es que al usar el setter estás usándolo como si de una propiedad fuera.

Si os fijáis en el guion bajo _ antes del nombre de la variable es convención que es recomendable para separar el nombre de los setters y getters de la variable en sí. Incluso con las propiedades privadas que vamos a ver a continuación.

Ejercicio Resuelto

Ocultar

Estamos teniendo un error en la consola en un setter y no sabemos el porqué

Este es el setter.

set altura (nuevaAltura) {
     this.altura=nuevaAltura;
}

Autoevaluación sobre propiedades.

Ocultar

Solución

Para saber más

Ocultar

La guía definitiva para trabajar con setters y getters.

3.1.1.3.- Privados.

Ocultar

Aotaro.. Private. (CC BY)

Otra novedad muy importante del ES2022, ya implementada en los motores de JavaScript es la posibilidad de utilizar privados con las ventajas que conlleva. Por fin se puede encapsular sin tener que confiar en que los usuarios del programa hagan lo correcto.

Además de las propiedades/atributos privados vamos a poder declarar tanto métodos privados. Estos métodos solo van a ser usables dentro de la función.

Tanto los métodos como propiedades debemos precederlos del símbolo #.

Aunque ya podríamos declarar los privados con #propiedad, vamos a seguir con #_propiedad por ser la forma habitual del desarrollo del código y te será así más fácil entender cualquier código anterior.

Las propiedades privadas se declaran antes del constructor y deben ser inicializadas en el mismo, no en su declaración.

Por lo demás el funcionamiento es el mismo. A continuación tienes un código que debes modificar para añadir las restricciones necesarias para el completo funcionamiento. Sin embargo en un punto posterior veremos excepciones que es una forma más correcta.

  class Pollo {
        // Los privados los declaramos así. Con un #
        #_nombre; // _nombre para no confundirlo con el setter nombre.
        #_edad;     // Los setters serán públicos. 
        constructor(nombre, edad) {
          this.nombre = nombre; // Se llama directamente al setter
          this.edad = edad; // Si no lo haces no van las comprobaciones
          this.#miprivado(); // ejemplo de como llamar al método privado.
          // viene precedido de this. 
        }
        #miprivado() {
          console.log("Me llaman");
        }
        set nombre(nuevoNombre) {
          // no esté vacío y además que sea cadena
          // implementar eso como ejercicio.
          this.#_nombre = nuevoNombre;
        }
        set edad(nuevaEdad) {
          // Comprobar que sea un número y no NaN menor de 100
          // Positivo.
          // entero.
          this.#_edad=edad;
        }
        get edad() {
          return this.#_edad;
        }
        get nombre() {
          return this.#_nombre;
        }
        toString() {
          return "\n" + this.nombre + " " + this.edad + "<br>";
        }
      }

      // Una vez creada la clase Pollo pasamos a crear instancias.

      let pollo1;
      let pollo2;
      pollo1 = new Pollo("Alejandro", 11);
      pollo2 = new Pollo("Andrés", 20);
      document.write(pollo1 + pollo2);
      pollo1.edad = 10;

Autoevaluación de Privados

Ocultar

Veamos sobre la declaración de variables privadas.

Retroalimentación

Falso

No es buena idea obviarlo. Hay muchas clases antiguas y es más sencillo de adaptar. Es un estilo de código bueno.

Para saber más

Ocultar

Privados en MDN.

3.1.1.4.- Herencia.

Ocultar

Escrito antiguo donde se describe la herencia de los descendientes.

Pedro Vélez (1665). Testamento La Quntrala (Dominio público)

La palabra reservada de Java es la misma que en JavaScript: extends. Por dentro, el lenguaje sigue siendo gestionado por prototype, pero es más sencillo para un programador de Java y similares. Nos permite aislarnos de las complejidades que puede causar utilizar prototype y su sistema de creación de objetos con herencia.

Al igual que en Java podremos acceder a los métodos del padre usando super.

En el siguiente ejemplo podremos ver el uso de la herencia con super heredando de la clase serVivo:

class vegetal extends serVivo {
    constructor(peso, altura) {
        super(peso); // El padre asigna el peso. 
        this._altura = altura; // La clase hija asigna la altura. 
    }
    get altura() {
        return this._altura;
    }
    set altura(nuevaAltura) {
        this._altura = nuevaAltura;
    }
    toString() {
        let devolver = super.toString();
        devolver = devolver + "La altura es " + this._altura + "<br>";
        return (devolver);
    }

}
let planta = new vegetal(13, 12);
document.write(planta);

Ejercicio Resuelto

Ocultar

Partiendo de la clase vegetal implementa la clase Caducifio.

Realicemos la clase Caducifolios. Aquí entrarán los árboles por su color de hoja en el otoño. Además realice un método que devuelva el string

Retroalimentación

Aquí tienes la solución

class Caducifolios extends vegetal {
    constructor(peso, altura, colorHojasOtono) {
        super(peso, altura); // Llama al constructor de la clase padre 'vegetal'
        this._colorHojasOtono = colorHojasOtono; // Propiedad específica de Caducifolios
    }

    get colorHojasOtono() {
        return this._colorHojasOtono;
    }

    set colorHojasOtono(nuevoColor) {
        this._colorHojasOtono = nuevoColor;
    }

    // Método específico para los árboles caducifolios
    perderHojas() {
        return "¡Este árbol caducifolio ha perdido sus hojas para el invierno!";
    }

    toString() {
        let devolver = super.toString(); // Obtiene la descripción de 'vegetal'
        devolver = devolver + `Sus hojas se vuelven de color ${this._colorHojasOtono} en otoño.<br>`;
        return devolver;
    }
}

// Y para usarlo.
let planta = new vegetal(13, 12);
document.write(planta);
document.write("---<br>"); 
//Ahora si creamos un roble.
let roble = new Caducifolios(500, 25, "marrón rojizo");
document.write(roble.toString()); // Usamos toString para imprimir sus propiedades
document.write(roble.perderHojas() + "<br>"); // Llamamos a su método específico

Para saber más

Ocultar

Prototype vs ES6

3.1.1.5.- Métodos estáticos.

Ocultar

Estatua de Hatshepsut — Desconocido. *Seated Statue of Hatshepsut* (Dominio público)

La palabra clave static nos permite crear un método accesible aunque la clase no haya sido instanciada.

Una de las clases que te van a servir para enteder este sistema es Math ya nos permite usar su métodos sin crear ninguna instancia. Por ejemplo Math.pow(2,2).

static se escribe justo antes de la declaración del método. Veamos un ejemplo.

class Mates {
    static areaCuadrado (lado)  {
        return(lado*lado);
    }
   static areaRectángulo (base, altura) {
        return (base*altura);
    }
}

console.log(Mates.areaCuadrado(2));

Para terminar podemos evitar usar static en variables directamente. Podemos utilizarla con get en los métodos (sin un setter).

static get PI() {
    return 3.14;
}

Ejercicio Resuelto

Ocultar

Con lo que llevamos hasta ahora podemos empezar a realizar cosas más complejas.

Vamos a realizar la clase Armario.

El array se llamará #_ropa

Tendrás un método agregarRopa() que recibe una cadena (aunque puedes implementar una clase en el futuro).

Hacer un getter que de devuelva el total de la ropa ropa.

No te olvides del toString();

Retroalimentación

class Armario {
    // Propiedad privada (#) cuyo nombre también incluye un guion bajo (_) por transición con los sistemas anteriores a 2022.
    #_ropa;  // El array que tendrá las cadenas de la ropa

    constructor() {
        // Inicializamos el array de ropa en el constructor. 
        // No inicialices arriba. 
        this.#_ropa = []; 
    }

    /**
     * Agrega una pieza de ropa al armario.
     * La entrada es una cadena simple que describe la pieza de ropa (ej. "falda amarilla").
     * Lanza un error si la entrada no es una cadena o está vacía.
     * @param {string} descripcionRopa - Una cadena que describe la pieza de ropa.
     * @throws {Error} Si la entrada no es una cadena válida o está vacía.
     */
    agregarRopa(descripcionRopa) {
        // Lo primero es comprobar si es una cadena con contenido
        if (typeof descripcionRopa === 'string' || descripcionRopa.trim()!=="'') 
        { // Si la entrada es válida, la agregamos directamente
            this.#_ropa.push(descripcionRopa); 
            console.log(`Ropa agregada: "${descripcionRopa}"`);
        }
        else   throw "No se pudo agregar la ropa: La descripción debe ser una cadena de texto no vacía."; // Podrías hacerlo con new Error
    }

    /**
     * Obtiene el número total de piezas de ropa que hay en el armario.
     * @returns {number} La cantidad de ropa.
     */
    get totalRopa() {
        return this.#_ropa.length;
    }

    /**
     * Devuelve una representación en cadena (texto) de todo el contenido del armario.
     * Es útil para depurar o mostrar el estado del objeto de manera legible.
     * @returns {string} Una descripción legible de toda la ropa en el armario.
     */
    toString() {
        let descripcion = `Contenido del Armario (${this.totalRopa} piezas de ropa):\n`;
        if (this.totalRopa === 0) {
            descripcion += "  El armario está vacío.\n";
        } else {
        for (let i = 0; i < this.#_ropa.length; i++) { // También se puede hacer con un .foreach<br />              descripcion += this.#_ropa[i]; // Se entiende más así. <br />             }
        }
        return descripcion;
    }
}

Para saber más

Ocultar

Uso de static en ES2015.

3.1.2.- Módulos.

Ocultar

Un par de módulos de Lego desconectados.

O Falcão de LEGO. Dojo04 (CC BY-NC-ND)

ES6 añade más funcionalidades referidas al ámbito de las variables, funciones y clases: los módulos. Son lo más parecido a los paquetes de Java de lo que podemos disponer en JavaScript.

Los módulos son útiles como medio de aislar un archivo de código de otro. Imaginar dos desarrolladores que realizan funcionalidades distintas pero que por casualidad usan una misma variable, o método o clase. A la hora de usarlo como hasta ahora había un problema y la última de las definiciones realizadas era la que quedaba como utilizable. Los módulos en ES6 nos van a permitir separar este código y exportar con el nombre que necesitemos la funcionalidad que queremos que sea visible desde otros sitios. El resto permanecerá oculto y no dará problemas.

El siguiente código importa una funcionalidad a tu archivo principal HTML.

        <script type="module">
        // Se importa desde el archivo html que usa la funcionalidad. 
        import {
            comprobarDNI
        } from 'momodulo.js';
        funcionPublica("Haz algo");
      </script>

Es muy importante que el el código en el HTML desde el que utilicéis módulos tenga incluido type="module". Si no no funcionará.

Este segundo trozo de código es el archivo que se va a importar.

// archivo mimodulo.js
export function funcionPublica(valor) {  
    let devolver=funcionPrivada(valor); //  Aquí compruebas que la letra es correcta. 
    return (devolver);
}
// La siguiente función no puede ser llamada desde el archivo que la importa ya que no tiene import. 
function funcionaPrivada(valor) {
    let devolver; // variable para devolver.
    // Aquí el calculo
    // .......
    return (devolver);
}

Así como puede verse, en vez de usar <script src="fuente.js"> , se utiliza import para añadir la funcionalidad. Eso si, no te olvides de poner en el archivo que importa los módulos <script type="module"> . Si no lo haces tendrás muchos problemas.

Podemos exportar tanto variables, como funciones o clases.

Si quisiésemos importar varias funciones o clases deberíamos separarlas por comas.

import {  area, perimetro } from 'circulo';

Con import se puede cambiar el nombre a una función evitando de esa forma colisiones del módulo con funciones del tuyo.

 import { 
            comprobarDNI as DNItester
        } from 'miOtroModulo.js';

Los módulos deben tener extensión js.

A la hora de escribir en el documento puedes tener problemas. Para ello te recomiendo que uses un código similar al siguiente:

<p id="salida">
Este contenido va a ser cambiado. 
</p>

<script type="module">
        // Si document.write no te sirve puedes poner resultado
        resultados=funcion(parametros);
        document.getElementById("salida").innerHTML="Aquí dentro el código HTML que quiero mostrar el resultado que es: "+resultados+"<br>";
</script>

Para saber más

Ocultar

Para saber más sobre como trabajar con módulos.

3.1.3.- Excepciones.

Ocultar

Señal de trafico con excepciones. — PhotoLanda. *Excepciones* (CC BY-NC-SA)

Es buena práctica trabajar con excepciones, aunque como pasa en JavaScript, fue muy a posteriori la implementación de las mismas.

Tenemos dos opciones sobre como enviar excepciones. O a través de un mensaje con un String o usando el objeto Error, que son las formas fáciles, o utilizar uno de los siete constructores de errores que tiene JavaScript, que veremos después.

Para implementar las excepciones podemos trabajar con el bloque try ... catch , aunque podemos usar la versión con finally, o sea try ... catch ... finally.

Para lanzar las excepciones usamos throw. La forma más sencilla es mandar una cadena que explique el mensaje, que es lo que se utiliza en el siguiente código en el que volvemos al ejemplo de la clase Pollo.

  class Pollo {
        // Los privados los declaramos así. Con un #
        #_nombre; // _nombre para no confundirlo con el setter nombre.
        #_edad;     // Los setters serán públicos. 
        constructor(nombre, edad) {
          this.nombre = nombre; // Se llama directamente al setter
          this.edad = edad; // Si no lo haces no van las comprobaciones
          this.#miprivado(); // ejemplo de como llamar al método privado.
          // viene precedido de this.
        }
        #miprivado() {
          console.log("Me llaman");
        }
        set nombre(nuevoNombre) {
          // no esté vacío y además que sea cadena
          // implementar eso como ejercicio.
          this.#_nombre = nuevoNombre;
        }
        set edad(nuevaEdad) {
          // Comprobar que sea un número y no NaN menor de 100
          // Positivo.
          // entero.
          // Termine de hacer las comprobaciones.
          if (isNaN(nuevaEdad) || nuevaEdad > 100 || nuevaEdad <= 0) {
            this.#_edad = 100; // no hace falta ya con excepciones.
            throw "La edad no es válida"; 
           // también throw  new Error (" La edad no es válidad");
            // el código debajo no se ejecuta.
          } else this.#_edad = nuevaEdad;
        }
        get edad() {
          return this.#_edad;
        }
        get nombre() {
          return this.#_nombre;
        }
        toString() {
          return "\n" + this.nombre + " " + this.edad + "<br>";
        }
      }

      // Una vez creada la clase Pollo pasamos a crear instancias.

      let pollo1;
      let pollo2;
      try {
        pollo1 = new Pollo("Alejandro", 11);
        pollo2 = new Pollo("Andrés", 20);
        document.write(pollo1 + pollo2);
        pollo1.edad = 10;
      } catch (e) {
        document.write("Excepción: " + e);
      } finally {
        // aquí pondrías el código de finalización. 
      }

Ocultar

Es muy importante declarar las variables fuera del bloque try catch porque no estarán disponibles fuera de la creación de los mismos y nos producirán un feo error undefined.

Ocultar

Además de lo anterior, throw puede lanzar diferentes tipos de excepciones.

Trabajando con los distintos tipos de excepciones que tienen más utilidad para crear clases para nosotros:

Tipos de excepciones
Excepción	Descripción
RangeError	La variable numérica está fuera del rango.
`TypeError`	Error en el tipo.

Existen más excepciones pero que no tienen tanto sentido enviarlas nosotros ya que las manda el intérprete de JavaScript.

Así pues podemos lanzar una excepción numérica:

      set edad(nuevaEdad) {
          // Comprobar que sea un número y no NaN menor de 100
          // Positivo.
          // entero.
          // Termine de hacer las comprobaciones.
          if (isNaN(nuevaEdad) || nuevaEdad > 100 || nuevaEdad <= 0) {
            this.#_edad = 100; // no hace falta ya con excepciones.
             throw new RangeError("El argumento debe estar entre 0 y 99.");
           // también throw  new Error (" La edad no es válidad"); si estamos con Error simplemente
          } else this.#_edad = nuevaEdad;
        }

Si simplemente queremos mandar un error de la clase Error podemos elegir la linea throw comentada.

En resumen JavaScript no tiene un sistema muy avanzado de excepciones parecido al de Java que incluía todos los casos. Tenemos 7 del sistema, dos de los cuales nos sirven bastante, más los que podemos crear nosotros ya sea con new Error(), o con otra posibilidad que es usar la herencia y extender Error .

Veamos un caso en el que ampliamos la funcionalidad Error.

    class ValidacionError extends Error {
        constructor(mensaje) {
            super(mensaje); 
            this.name = "Error de validación";
        }
    }
    function generaError() {
        throw new ValidacionError("¡Error horror!");
    }

    try {
        generaError(); // Si no está entre try no lo podemos capturar.
    } catch(e) {
        console.error(e.message); // ¡Error horror! -> La cadena que hemos definido. 
        console.error(e.name); // "Error de validación";
        console.error(e.stack); // la pila del error que nos va a servir para dupurar
    }

Esto se puede complicar más comprobando si un error es de un tipo determinado o no.

Autoevaluación

Ocultar

El profesorado ha visto muchos problemas con el ámbito de las variables usando try catch.

Retroalimentación

Falso

No. Tendrías que declarar el ferrari antes del try.

let ferrariF40; // Ahora vale undefined. 
try
{
ferrariF40=new Coche(....)
......
}
catch (e) {
console.error("Se ha producido un error "+e);
}

ferrariF40.arrancar();

Para saber más

Ocultar

Objeto Error.

Gestión de errores en Javascript. Excepciones.

Excepciones avanzadas.

Errores personalizados con herencia.

3.1.4.- Iterables en objetos.

Ocultar

Teorija Velikog Praska. The Big Bang Theory (CC BY-SA)

Los objetos también pueden ser iterables, siempre que se define cómo se itera. Ya hemos visto que Array o Map, tiene iteraciones definidas, pero otros objetos, como Object, no.

Para realizar un iterador tienes que implementar este método: [Symbol.iterator]()

class PersonajesBigBang {
   #_personajes;
   constructor() { 
    this.#_personajes = [ // Inicializamos en el constructor. 
      "Sheldon",
      "Leonard",
      "Penny",
      "Raj",
      "Howard",
      "Amy",
      "Bernadette"
    ];
  }

  [Symbol.iterator]() { // Aquí está el iterador. Es similar al que vimos como función en Arrays
    let indice = 0;
    let personajes = this.#_personajes;
    return {
      next() {
        if (indice < personajes.length) {
          return { value: personajes[indice++], done: false }; // Si no llegamos al finar devolvemos en la tupla el done a false. 
        } else {
          return { done: true };
        }
      }
    };
  }
}

// Ejemplo de uso
let miBigBangTheory = new PersonajesBigBang();

for (let personaje of miBigBangTheory) {
  console.log(personaje);
}
// El resultado será Sheldon Leonard Penny Raj Howard Amy Bernadette

Sin embargo, como pasaba en como cuando vimos los arrays, se puede simplificar si usamos generadores, que es mi recomendación.

class PersonajesBigBang {
  #_personajes;
  constructor() {
    this.#_personajes = [ // Inicializamos en el constructor. 
      "Sheldon",
      "Leonard",
      "Penny",
      "Raj",
      "Howard",
      "Amy",
      "Bernadette"
    ];
  }
  *[Symbol.iterator]() { // No tenemos function* sino un * antes de symbol.iterator
    for (let personaje of this.#_personajes) {
      yield personaje; // paralizamos temporalmente por aquí. 
    }
  }
}

// Crearmos un objeto de la clase
let miBig = new PersonajesBigBang();

// Lo recorremos con un for of
for (let personaje of miBig) {
  console.log(personaje);
}

En resumen, como dije en el punto de iteradores sobre arrays, es más interesante y claro de entender si usas yield.

3.2.- Clases anteriores a ES2015.

Ocultar

Jonas Strandell . Brendan Eich's presents his keynote: Grown-up Javascript (CC BY)

Hasta la aparición del estándar ECMA ES6, en 2015, conocido también como ES2015, las clases se hacían como veremos en este punto.

Básicamente es declarar funciones dentro de funciones, siendo estas los métodos.

La herencia en este formato es bastante más difícil de implementar usando prototype.

No tenemos constructores y no declaramos los atributos hasta que usamos en la función principal, al comienzo de la misma.

Pero, ¿significa esto que las clases al estilo antiguo han desaparecido para siempre y que no tienes que saber como funciona? Pues no, debes conocerlo porque hay mucho código antiguo por ahí que puede que necesites corregir o adaptar a una implementación más moderna.

Para saber más

Ocultar

Podéis criticar al creador de JavaScript, Brendan Eich, por la forma en la que creó las clases. Sin embargo sí que reservó la palabra clave class.

La historia de JavaScript.

3.3.1.- Definición de propiedades.

Ocultar

Una vez que ya sabemos como crear un constructor para un objeto, vamos a ver cómo podemos crear una propiedad específica para ese objeto. Las propiedades para nuestro objeto se crearán dentro del constructor empleando para ello la palabra reservada this. Véase el siguiente ejemplo:

La gasolina. — Jaques Wagner Governador. *Gasolina* (CC BY)

function Coche( )
{
     // Propiedades
     this.marca =  "Audi A6";
     this.combustible =  "diesel";
     this.cantidad = 0;          // Cantidad de combustible en el depósito.
}

La palabra reservada this, se utiliza para hacer referencia al objeto actual, que en este caso será el objeto que está siendo creado por el constructor. Por lo tanto, usarás this, para crear nuevas propiedades para el objeto. El único problema con el ejemplo anterior es, que todos los coches que hagamos del tipo Coche será siempre Audi A6, diésel, y sin litros de combustible en el depósito. Por ejemplo;

let cocheDeMartin = new Coche( );
let cocheDeSilvia = new Coche( );

A partir de ahora, si no modificamos las propiedades del coche de Martin y de Silvia, en el momento de instanciarlos tendrán ambos un Audi A6 a diésel y sin combustible en el depósito.

Lo ideal sería por lo tanto que en el momento de instanciar un objeto de tipo Coche, que le digamos al menos la marca de coche y el tipo de combustible que utiliza. Para ello tenemos que modificar el constructor, que quedará de la siguiente forma:

function Coche(marca, combustible)
{
     // Propiedades
     this.marca =  marca;
     this.combustible =  combustible;
     this.cantidad = 0;          // Cantidad de combustible inicial por defecto en el depósito.     
}

Ahora sí que podríamos crear dos tipos diferentes de coche:

let cocheDeMartin = new Coche("Volkswagen Golf","gasolina");
let cocheDeSilvia = new Coche("Mercedes SLK","diesel");

Y también podemos acceder a las propiedades de esos objetos, consultar sus valores o modificarlos. Por ejemplo:

document.write("<br/>El coche de Martin es un: "+cocheDeMartin.marca+" a "+cocheDeMartin.combustible);
document.write("<br/>El coche de Silvia es un: "+cocheDeSilvia.marca+" a "+ cocheDeSilvia.combustible);
// Imprimirá:
// El coche de Martin es un: Volkswagen Golf a gasolina
// El coche de Silvia es un: Mercedes SLK a diesel 
// Ahora modificamos la marca y el combustible del coche de Martin:
cocheDeMartin.marca = "BMW X5";
cocheDeMartin.combustible = "diesel";
document.write("<br/>El coche de Martin es un: " + cocheDeMartin.marca + " a " + cocheDeMartin.combustible);
// Imprimirá: El coche de Martin es un: BMW X5 a diesel

Reflexiona

Ocultar

¿Normalmente en las clases tienes un constructor explicito, pero en este caso ves alguno?

3.2.2.- Definición de métodos.

Ocultar

Las propiedades son solamente la mitad de la ecuación de la Orientación a Objetos en JavaScript. La otra mitad son los métodos, que serán funciones que se enlazarán a los objetos, para que dichas funciones puedan acceder a las propiedades de los mismos.

Proceso de llenado del deposito de un coche. — Josh Smith. *Fuel.* (CC BY)

Nos definimos un ejemplo de método, que se podría utilizar en la clase Coche:

function rellenarDeposito (litros)
{
     // Modificamos el valor de la propiedad cantidad de combustible
     this.cantidad = litros;
}

Fíjate que el método rellenarDeposito, que estamos programando a nivel global, hace referencia a la propiedad this.cantidad para indicar cuantos litros de combustible le vamos a echar al coche. Lo único que faltaría aquí es realizar la conexión entre el método rellenarDeposito y el objeto de tipo Coche (recuerda que los objetos podrán tener propiedades y métodos y hasta este momento sólo hemos definido propiedades dentro del constructor). Sin esta conexión la palabra reservada this no tiene sentido en esa función, ya que no sabría cuál es el objeto actual. Veamos cómo realizar la conexión de ese método, con el objeto dentro del constructor:

function Coche(marca, combustible)
{
     // Propiedades
     this.marca =  marca;
     this.combustible =  combustible;
     this.cantidad = 0;          // Cantidad de combustible inicial por defecto en el depósito.     
     // Métodos
     this.rellenarDeposito = rellenarDeposito;
}

Aquí se ve de forma ilustrada, que los métodos son en realidad propiedades: se declaran igual que las propiedades, por lo que son enmascarados como propiedades en JavaScript. Hemos creado una nueva propiedad llamada rellenarDeposito y se le ha asociado el método rellenarDeposito. Es muy importante destacar que el método rellenarDeposito() se referencia sin paréntesis dentro del constructor, this.rellenarDeposito = rellenarDeposito.

Ejemplo de uso del método anterior:

cocheDeMartin.rellenarDeposito(35);
document.write("<br/>El coche de Martin tiene "+cocheDeMartin.cantidad+ " litros de " + cocheDeMartin.combustible+ " en el depósito.");
// Imprimirá
// El coche de Martin tiene 35 litros de diesel en el depósito.

La forma en la que hemos definido el método rellenarDeposito a nivel global, no es la mejor práctica en la programación orientada a objetos. Una mejor aproximación sería definir el contenido de la función rellenarDeposito dentro del constructor, ya que de esta forma los métodos al estar programados a nivel local aportan mayor privacidad y seguridad al objeto en general, por ejemplo:

function Coche(marca, combustible)
{
     // Propiedades
     this.marca =  marca;
     this.combustible =  combustible;
     this.cantidad = 0;
     // Métodos
     this.rellenarDeposito = function (litros)
     {
          this.cantidad=litros;
     };
}

JavaScript es muy flexible y podríamos añadir más propiedades y métodos después de la definición. Aunque esto no es algo recomendado en el código va a servir para comprender la necesidad de prototype.

Lo primero que haremos será crear un nuevo coche y después le añadiremos el método que es llamado desde document.write para poder escribir los contenidos de un objeto: toString .

  let micoche= new Coche("Honda", "120");
       document.write(micoche); // Sale Object.
       micoche.toString = function () {
            return ( this.marca + " " + this.combustible + " " + this.cantidad );
       }
  document.write(micoche); // Sale el contenido.

Ahora bien, se presenta otro problema, para cada objeto que creemos hay que añadir esta función. De hecho cada objeto usa memoria para cada función repitiéndose una y otra vez. Para solucionarlo se puede utilizar el objeto prototype.

El objeto prototype se encuentra en cualquier objeto de JavaScript y con él se puede añadir métodos nuevos a cualquier objeto e incluso implementar herencia.

Veamos un ejemplo de uso en el que se añade el método toString.

       micoche= new Coche("Honda", "120");
       document.write(micoche); // Sale Object.
       Coche.prototype.toString = function () {
            return ( this.marca + " " + this.combustible + " " + this.cantidad );
       }
       document.write(micoche); // Sale el contenido.

Para saber más

Ocultar

Además del siguiente enlace si desea utilizar herencia puede utilizar ES6 tal y como pone el punto 4.1.3. Más sencillo para objetos propios.

La herencia en JavaScript se realiza a través del objeto prototype.

3.2.3.- Definición de objetos literales.

Ocultar

Otra forma de definir objetos es hacerlo de forma literal.

Ocultar

Un literal es un valor fijo que se especifica en JavaScript. Un objeto literal será un conjunto, de cero o más parejas del tipo nombre:valor.

Ocultar

Avión despegando. — planegeezer. *Plane* (CC BY)

Por ejemplo:

let avion = { marca:"Boeing" , modelo:"747" , pasajeros:"450" };


Es equivalente a:

let avion = new Object();
avion.marca = "Boeing";
avion.modelo = "747";
avion.pasajeros = "450";

Para referirnos desde JavaScript a una propiedad del objeto avión podríamos hacerlo con:

document.write(avion.marca);  // o trambién se podría hacer con:
document.write(avion["modelo"]);

Podríamos tener un conjunto de objetos literales simplemente creando un array que contenga en cada posición una definición de objeto literal:

let datos=[
{"id":"2","nombrecentro":"IES A Piringalla" ,"localidad":"Lugo","provincia":"Lugo"},
{"id":"10","nombrecentro":"IES As Fontiñas","localidad":"Santiago","provincia":"A Coruña"},
{"id":"9","nombrecentro":"IES As Lagoas","localidad":"Ourense","provincia":"Ourense"},
{"id":"8","nombrecentro":"IES Cruceiro Baleares","localidad":"Culleredo","provincia":"A 
Coruña"},
{"id":"6","nombrecentro":"IES Cruceiro Baleares","localidad":"Culleredo","provincia":"A 
Coruña"},{"id":"4","nombrecentro":"IES de Teis","localidad":"Vigo","provincia":"Pontevedra"},
{"id":"5","nombrecentro":"IES Leliadoura","localidad":"Ribeira","provincia":"A Coruña"},
{"id":"7","nombrecentro":"IES Leliadoura","localidad":"Ribeira","provincia":"A Coruña"},
{"id":"1","nombrecentro":"IES Ramon Aller 
Ulloa","localidad":"Lalin","provincia":"Pontevedra"},
{"id":"3","nombrecentro":"IES San Clemente","localidad":"Santiago de 
Compostela","provincia":"A Coruña"}
];

De la siguiente forma se podría recorrer el array de datos para mostrar su contenido:

for (let i=0; i< datos.length; i++)
{
     document.write("Centro ID: "+datos[i].id+" - ");
     document.write("Nombre: "+datos[i].nombrecentro+" - ");
     document.write("Localidad: "+datos[i].localidad+" - ");
     document.write("Provincia: "+datos[i].provincia+"<br/>");
}

Y obtendríamos como resultado:

Centro ID: 2 - Nombre: IES A Piringalla - Localidad: Lugo - Provincia: Lugo
Centro ID: 10 - Nombre: IES As Fontiñas - Localidad: Santiago - Provincia: A Coruña
Centro ID: 9 - Nombre: IES As Lagoas - Localidad: Ourense - Provincia: Ourense
Centro ID: 8 - Nombre: IES Cruceiro Baleares - Localidad: Culleredo - Provincia: A Coruña
Centro ID: 6 - Nombre: IES Cruceiro Baleares - Localidad: Culleredo - Provincia: A Coruña
Centro ID: 4 - Nombre: IES de Teis - Localidad: Vigo - Provincia: Pontevedra
Centro ID: 5 - Nombre: IES Leliadoura - Localidad: Ribeira - Provincia: A Coruña
Centro ID: 7 - Nombre: IES Leliadoura - Localidad: Ribeira - Provincia: A Coruña
Centro ID: 1 - Nombre: IES Ramon Aller Ulloa - Localidad: Lalin - Provincia: Pontevedra
Centro ID: 3 - Nombre: IES San Clemente - Localidad: Santiago de Compostela - Provincia: A Coruña

Ejercicio Resuelto

Ocultar

Seguimos aprendiendo con la serie The Big Bang Theory.

Vamos a realizar un único objeto literal parecido al avión

Vamos a partir de que el nombre es "The Big Bang Theory" , el género es "Sitcom" , tiene 12 temporadas y 279 episodios.

4.- Patrones de diseño.

Ocultar

Caso práctico

Ocultar

Elaboración propia. (CC BY-NC)

Antonio y Juan están agobiados por el tiempo de desarrollo. Su jefe quiere producción rápida de código. Piensan en usar la IA sin revisar nada, pero luego piensan en lo que en el curso de DWEC les estuvieron explicando sobre patrones de diseño.

Los dos se ponen a investigar a ver como pueden realizar buen código y rápido.

Ocultar

El desarrollo de software de una forma rápida, correcta y mantenible es uno de los desafíos de la programación en la actualidad.

Fotografía del matemático Informático Edsger Dijkstra

Bubba73. Edsger Wybe Dijkstra (CC BY-SA)

Uno de los principios de la programación es no reinventar la rueda. ¿Y sí nos proveemos de las soluciones de estos problemas más típicos?

A lo largo del tiempo uno de los objetivos de la ingeniería del software ha sido conseguir todo esto que hemos dicho hasta ahora. En su principio había todo un grupo de personas que desarrollaban a su estilo sin cumplir ninguna norma, más allá de la que se considerase. Pues no fue hasta que en la OTAN, decidieron empezar a valorar esto y darle un nombre. A Friedrich L. Bauer se le atribuyo el nombre a esta nueva rama de la ingeniería, pero fue Edsger Dijkstra el que lo inventó y sentó las bases de la programación moderna. Bases que se ignoran en muchos casos y provocan problemas como el de la deuda técnica.

Veamos alguno de las circunstancias que dieron lugar al desarrollo de la ingeniería del software:

El primero fue la pérdida de un F18, en 1986, debido a que pusieron un if then y se olvidaron del else porque creían que haría falta.
Entre 1985-1987 el Therac-25, una máquina de radioterapia mató a varios pacientes porque no hubo control de calidad del software.
Sobrecostos en múltiples proyectos como fue el software del Bank of America que llevó a su cancelación. Puedes pensar que eso ya no pasa, pero simplemente mirando en el mercado de los videojuegos seguro que recuerdas alguno que se canceló o se retrasó años y años.
Fracaso del desarrollo del sistema operativo Plan 9. Este fue uno de los mayores desastres del mal desarrollo de software. Originalmente se pensó como un futuro sustituto de Unix.

Después de esta crisis nos propuso unas cuantas reglas, (que se violan constantemente en la actualidad), y posteriormente se desarrollaron, ya en los 90s, los patrones de diseño.

Para saber más

Ocultar

Más de la historia de la crisis del software.

4.1.- ¿Qué es un patrón?

Ocultar

Los patrones de diseño son soluciones de problemas que se dan habitualmente en el diseño de software. Son como planos que se pueden personalizar para un problema específico del código que estés desarrollando.

PxHere. node_boat_rope_marin_wharf_port_sea_navigation (CC0)

Así pues existen muchos problemas muy repetidos a los que no tendrás que volver a realizar completamente. Ya verás que los patrones de diseño, pattern designs en inglés, te van ahorrar trabajo si sabes seleccionar el más útil para tus necesidades.

Los patrones de diseño actúan a menor escala que los patrones de arquitectura (no es nuestro objetivo), y si se sabe como utilizarlos y en las circunstancias adecuadas mejorarán la organización de partes específicas del software.

Por ejemplo, los patrones de diseño han permitido que los iteradores modernos sobre objetos puedan realizarse en JavaScript.

Como veremos en el punto siguiente se siguen patrones que no son patrones, sin pensar, para producir código que en el futuro puede tener deuda técnica que producirán un código no fácilmente mantenible.

Los patrones principales se pueden clasificar en creacionales, estructurales y de comportamiento.

Ocultar

Los patrones creacionales se centran como se crean y se inicializan los objetos; entre los cuales tenemos utilizados en JavaScript:

Singleton o solterón. Para conseguir que solo haya una instancia de un objeto.
Factoría y Factoría Abstracta. Van a simplificar la herencia subclases o familias de objetos de forma sencilla sin tener que realizar grandes cambios cada vez.
Constructor. Para construir objetos complejos paso a paso.
Prototipo (Prototype). Permite crear objetos nuevos partiendo de copias de existentes.
Promesa. Los veremos en un par de secciones.
Generadores. Ya los hemos visto tanto para clases como para arrays.

Los patrones estructurales define como se componen clases u objetos para realizar estructuras más grandes sin que sea complejo, manteniendo la flexibilidad y eficiencia. Entre los patrones estructurales disponemos de:

Adaptador. Sería el equivalente a usar interfaces de los que no tiene interfaces como Java o TypeScript. Pero este patrón te puede ayudar a simularlos en JavaScript.
Módulos. Este ya lo hemos trabajado a través de los módulos de ES6/2015 en este punto. La idea es ocultar toda la funcionalidad que no necesiten otras partes del código.
Composite o compuesto. Sirve para trabajar con estructuras jerárquicas como árboles. Por ejemplo se pueden usar para la unidad 5 con DOM.

Los patrones de comportamiento hablan de la lógica de nuestro sistema y se centran en como las clases y los objetos interactúan, se reparten responsabilidades, y se comunican entres si. Entre los de comportamiento utilizados en JavaScript:

Estrategia. Este es complicado de explicar brevemente, pero imagínate que puedes encapsular algoritmos. Ahora coges y creas una clase impuestos y la tasa de impuesto de valor añadido, la implementas para muchos países. Al instanciar el objeto puedes seleccionar el del país que corresponda.
Observador. Este es muy usado para comunicaciones AJAX, como lo es promesa, similar hasta cierto punto. Se utiliza en Angular.
Promesa. También podría considerarse en este apartado.
Patrón comando u orden. Este es utilizado para interfaces de usuario. No vamos a entrar.
Iteradores. Ya los hemos visto tanto para clases como para arrays.
Generadores:(también pueden ser considerados en esta categoría además de creacionales). Ya los hemos tratado porque están implementados en el lenguaje.

En el siguiente vídeo vemos una explicación alternativa a este texto.

Resumen textual alternativo de patrones de diseño.

Para saber más

Ocultar

Patrones de diseño más utilizados en JavaScript.

4.2.- Buenas prácticas.

Ocultar

El mundo es complejo y a veces no se pueden hacer todas las cosas bien. De hecho a veces hacer las cosas bien puede ser más complejo que hacerlas mal. De ahí que alguna vez se tenga que hacer un return antes del final porque el código sería más espagueti que si tuvieras que hacer todas las comprobaciones. Pero dicho esto, la buena enseñanza de las metodologías de la programación no puede convertirse en no tengo ni idea y hago todo así. Por ejemplo este código es muy típico generado por IA que he corregido bastantes veces:

function hazAlgo(argumento) {

if (!argumento) return;

if (argumento) {
  // Haces las cosas bien
   return resultado;
}
// incluso algunos me ponen un return aquí que no puede ir a ninguna parte. 
}

Sin embargo es mucho más corto y sencillo este código para solucionar ese problema y sin dejar undefineds o nulls sueltos por ahí.

function hazAlgo(argumento) {
let resultado=valorpordefecto; // El valor por defecto. 
if (argumento) {

  // Haces las cosas bien
   
}
return resultado; // Un solo return
}

Entonces te planteas que eso se entiende pero si lo haces 7 if returns comprobando una misma variable. Eso se soluciona con un switch en la gran mayoría de las ocasiones teniéndolo todo centralizado. Ese return arriba, más abajo, al final, etc. va haciéndose cada vez más difícil de mantener. Y eso es la clave, mantener el código. Si por casualidad es realmente complicado una serie de if if if if, y no puedes plantearte una solución mejor dividiendo el código pues tienes que hacer un return (dejándolo todo claro en la documentación), y no pasa nada. Por ejemplo, en la recursividad es mucho más claro dejar varios returns y nadie se va a rasgar las vestiduras.

Sin embargo en los bucles cuando tienes un while true o algo así no completo y metes siete breaks (eso se ha visto en algunas tareas), es que no estás plantandolo bien, que no sabes condiciones y agruparlas, o que el problema es realmente difícil (aún así no debería haber nunca un while true ). Cualquier profesor que conozca de metodología de la programación te lo va a decir. Es una materia muy importante en la educación universitaria y ahora con la IA se están produciendo más suspensos de lo que había antes.

Así pues, aunque hay patrones para todos los gustos, es el sentido común y la experiencia, (además de la guía de estilo que tengas en la empresa o lo que te diga aquí el profesorado), deben guiarte.

Una imagen del problema de la deuda técnica en la que se ve mal montada una casa.

Desconocido. Deuda técnica. (Dominio público)

Muchas veces en la empresa hacen código de usar y tirar con poco mantenimiento. Sobretodo en las webs sencillas basadas en frameworks con constante cambio de versiones. Muchas veces es más sencillo programar rápido y sin documentar, ya que cuando hay cambios se suele realizar de nuevo. Pero no en todos los sitios se trabaja así; ahí estás produciendo lo que se denomina deuda técnica.

Esta deuda técnica es dejar para mañana lo que puedes hacer hoy. Hay plazos, hay un número limitado de recursos, y tienes asegurado un contrato de mantenimiento. Pero no siempre tienes este contrato bien pagado y todo el trabajo que has hecho mal se te puede volver en tu contra. Pero claro eso es asunto en el que podemos influir menos cuando somos obreros que cuando somos jefes del proyecto.

La deuda técnica, y también una de ciberseguridad, están llegando por la forma más rápida de hacer código, la IA. Los patrones nos ahorran trabajo haciendo algo que para las circunstancias puede ahorrarnos horas y horas de trabajo. La IA sería como el súper patrón que lo resuelve todo, sin embargo el código que generan está repleto de errores y de dificultad de mantenimiento. Genera una deuda técnica inmensa, a cambio de malos diseños que provocan retrasos en el mantenimiento, graves problemas de ciberseguridad, y gente que no sabe lo que ha resuelto la IA porque apenas saben programar ya que decidieron que saber realmente programar. Como alumno debes luchar contra el desconocimiento.

Sé que tu futuro vas a progamar con IA, pero debes conocer todos sus problemas y para ello debes programar bien. Seguir las normas que te dicte tu profesorado para alcanzar un conocimiento real de la programación. Utiliza la IA para que te presente ejemplos de lo que no entiendes, y entonces usa el sentido común.

Para saber más

Ocultar

Para saber de los distintos tipos de deuda técnica.

Ejercicio Resuelto

Ocultar

Es muy habitual que la gente haga if return sin devolver nada, algo que es equivalente a un break, y aunque a veces se puede utilizar (pero no es algo que vaya a pasar practicamente nunca en este curso), la gente está obviando que existen cosas como switch para evitar returns innecesarios.

Arregla este código.

function describeError(param) {

if (param==0) return;
if (param==1) return;
if (param==2) return;
if (param==3) return;

return "Error desconocido";

}

4.3.- Patrones importantes.

Ocultar

pxhere. chains_metallic_silvery_patterns_designs_grey_gray_shiny (CC0)

En este apartado vamos a ver algunos de los patrones más usados en JavaScript y que se pueden desarrollar de forma sencilla para el nivel del curso.

Ya habéis visto anteriormente generadores, iteradores, módulos entre otros. Veamos los más útiles para este curso.

Patrón promesa. Es el patrón más importante que se aplica en la Unidad 6.

Una promesa es un objeto que representa la terminación exitosa o el fracaso de una operación asíncrona.

let miPromesa = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (1>0) // Podéis imaginar alguna operación para calcular algo.
        resolve("Éxito!");
    else 
        reject("Fallo");
  }, 1000); // Con esta espera de un segundo estamos simulando operaciones síncronas.
});

miPromesa
  .then(valor => {
    console.log("Promesa cumplida:", valor); // Solo aparece si la promesa se cumple, o sea, se ha ejecutado resolve. 
  })
  .catch(error => {
    console.log("Promesa rechazada:", error); // Se ejecuta si la promesa es rechazada, o sea, se ha ejecutado reject. 
  })
  .finally(() => {
    console.log("Promesa terminada"); // Se ejecuta siempre, al final, sea aceptada o rechazada. 
  });

Un callback es una función pasada como argumento a otra función y se ejecuta después de que esa otra función haya completado su trabajo, o cuando ocurre un evento específico (también conocido como gestor de eventos ) que es lo que veremos en la Unidad 4 y 5.

Fijaos que ahora nos ahorramos un callback (asignar una función a cada circunstancia evitando el callback hell y la pirámide infernal de if elses. Aunque para lo último se puede utilizar try catch también, y a aunque veces se puede solucionar con un return ya hemos dicho que hay que evitar el abuso cuando no estemos con esta pirámide.

Esa espera de tiempo que podéis ver en el código es algo habitual en JavaScript cuando se programa AJAX y que se implementa tanto en la API fetch como en la librería de comunicación asíncrona de Axios. Esto lo vamos a desarrollar en la Unidad 6.

Ocultar

Hay muchísimos patrones que se pueden utilizar como ejemplos. Pero para el nivel real de este curso no tantos. El punto de patrones lo que quiere es introducir al alumnado en el tema ya que no son fáciles, pero el anterior promesa, es realmente muy útil. Vamos al patrón factoría muy útil para simplificar cuestiones de herencia. Veamos el caso típico de tipos de vehículos.

// Hagamos una factoría de automóviles. Es un ejemplo típico. 

// CLASES DE LOS PRODUCTOS QUE VAMOS A CREAR.
class Coche {
  // Por simplificar declaramos en el constructor, pero en la vida real debes declarar aquí.
    constructor(modelo) {
        this.tipo = "Coche";
        this.modelo = modelo;
        this.ruedas = 4;
    }

    acelerar() {
        return `${this.modelo} (Coche) está acelerando.`;
    }
}

class Moto {
    constructor(modelo) {
        this.tipo = "Moto";
        this.modelo = modelo;
        this.ruedas = 2;
    }
    acelerar() {
        return `${this.modelo} (Moto) está acelerando ruidosamente.`; 
    }
}

class Camion {
    constructor(modelo) {
        this.tipo = "Camión";
        this.modelo = modelo;
        this.ruedas = 8;
    }

    acelerar() {
        return `${this.modelo} (Camión) está acelerando lentamente.`;
    }
}

// LA CLASE FACTORÍA (el "creador" de objetos)
// En este caso hacemos varios returns dentro del switch por simplificar. 
class FabricaDeVehiculos {
    crearVehiculo(tipo, modelo) {
        switch (tipo.toLowerCase()) {
            case 'coche':
                return new Coche(modelo);
            case 'moto':
                return new Moto(modelo);
            case 'camion':
                return new Camion(modelo);
            default:
                throw new Error(`Tipo de vehículo desconocido: ${tipo}`);
        }
    }
}

// Ahora pasamos a crear la Fábrica. 
const fabrica = new FabricaDeVehiculos(); // En este caso no vamos a modificar nada nunca así que puede ser constante. 

// Creamos un coche
let  miCoche = fabrica.crearVehiculo('coche', 'Seat Ibiza');
console.log(miCoche); // Coche { tipo: 'Coche', modelo: 'Seat Ibiza', ruedas: 4 }
console.log(miCoche.acelerar()); // Seat Ibiza (Coche) está acelerando.

// Creamos una moto
let  miMoto = fabrica.crearVehiculo('moto', 'Kawasaki Ninja');
console.log(miMoto); // Moto { tipo: 'Moto', modelo: 'Kawasaki Ninja', ruedas: 2 }
console.log(miMoto.acelerar()); // Kawasaki Ninja (Moto) está acelerando ruidosamente.

// Creamos un camión
let miCamion = fabrica.crearVehiculo('camion', 'Volvo FH');
console.log(miCamion); // Camion { tipo: 'Camión', modelo: 'Volvo FH', ruedas: 8 }
console.log(miCamion.acelerar()); // Volvo FH (Camión) está acelerando lentamente.

// Intentamos crear un tipo desconocido
try {
    let miTren = fabrica.crearVehiculo('tren', 'Orient Express');
    console.log(miTren);
} catch (error) {
    console.error(error.message); // Tipo de vehículo desconocido: tren
}

Un patrón sencillo que es bastante útil cuando tienes muchas clases relacionadas. Si te has fijado, solo desde la fábrica debes crear nuevas instancias.

Lógicamente el usar este patrón vendrá indicado en la tarea, no lo hagas si no te lo indica el profesorado, ya que aún estás aprendiendo.

Autoevaluación

Ocultar

Sobre el patrón Factoría

Retroalimentación

Falso

Deberías usar esa herencia factoría cuando tengas desacoplar el código cliente de la creación de los objetos. O cuando tengas mucha complejidad. Por ejemplo: Un objeto Usuario que tiene diferentes roles (Admin, Editor, Visor), cada uno con sus propias propiedades y métodos específicos. Una herencia simple no te va a servir si hay muchas diferencias, así que en este caso lo haces así.

Lígicamente hay que evitar aumentar la complejidad.

Para saber más

Ocultar

En patterns.dev vas a encontrar un montón de código en JavaScript resuelto sobre patrones.

Y para aprender más de promesas Promesas

5.- Enlaces de refuerzo y ampliación.

Para saber más

Ocultar

Arrays en JavaScript :
- Arrays
Metodos de Array en JavaScript:
- Métodos del array.
- Más de Arrays.
JavaScript Functions:
- http://www.w3schools.com/js/js_functions.asp
Detalles del modo estricto:
- Modo estricto.
JSON: JavaScript Object Notation.:
- Introducción a la notación JSON.
Ámbito de las funciones (Funciones anidadas):
- Closures.
Propiedades y funciones globales JavaScript:
- Más Funciones.

Condiciones y términos de uso de los materiales

Ocultar

Materiales desarrollados inicialmente por el Ministerio de Educación, Cultura y Deporte y actualizados por el profesorado de la Junta de Andalucía bajo licencia Creative Commons BY-NC-SA.

Antes de cualquier uso leer detenidamente el siguente Aviso legal

Ocultar

Historial de actualizaciones

Versión: 02.00.01	Fecha de actualización: 17/11/25
Actualización de materiales y correcciones menores.

Versión: 02.00.00	Fecha de actualización: 27/05/25	Autoría: Arturo José Puentes Castellanos
Ubicación: A lo largo del documento. Mejora (tipo 1): Erratas y se añadió también un punto que desarrolla excepciones y otro de los returns modernos de tuplas. Ubicación: Desde el principio. Mejora (tipo 3): Aunque hay contenidos que pueden ser correctos, están desfasados totalmente y deben ser rescritos. Hay un punto que habla muy por encima sobre ES6(ES2015). Ese punto debe debe ser el principal y desarrollarse de forma extendida. Por ejemplo las funciones flecha ahora están nombradas, pero no suficientemente desarrolladas en el apartado de las funciones. Además ahora en los contenidos (como en los criterios) de la nueva orden tenemos que incluir tanto colecciones como una introducción a los patrones de diseño. Detallando. 1. Estructuras de datos pasa a ser colecciones. 1.1.5.- iteradores en arrays. 1.1.6.- Pilas y colas hechas con arrays en Javascript. 1.1.7.- Asignación múltiple de variables en JavaScript. (no sé si merece la pena ponerlo en un subpunto). 1.2.- Conjuntos. 1.3.- Mapas. 2.4.- Funciones flecha. El 2.4 pasaría al 2.5. El 3.1. 3.2. 3.3 deberían colgar de un nuevo punto dentro del 3.2 que serían las funciones clásicas. 3.1 Clases modernas. 3.1.1.- Características de una clase ES2015 3.1.1.1.- Declaración de atributos y métodos privados y públicos. 3.1.1.2.- Herencia. 3.1.1.3.- Métodos estáticos. 3.1.2.- Módulos. 4.- Patrones de diseño. 4.1.- ¿Qué es un patrón? 4.2.- Buenas prácticas. 4.3.- Patrones importantes. Ubicación: Mapa Mejora (Mapa conceptual): Se añade patrones de diseño entre otras cosa. Ubicación: En el documento. Mejora (Orientaciones del alumnado): Nueva Actualización con referencias a todas las novedades.

Versión: 02.00.00

Fecha de actualización: 27/05/25

Autoría: Arturo José Puentes Castellanos

Ubicación: A lo largo del documento.
Mejora (tipo 1): Erratas y se añadió también un punto que desarrolla excepciones y otro de los returns modernos de tuplas.

Ubicación: Desde el principio.
Mejora (tipo 3): Aunque hay contenidos que pueden ser correctos, están desfasados totalmente y deben ser rescritos. Hay un punto que habla muy por encima sobre ES6(ES2015). Ese punto debe debe ser el principal y desarrollarse de forma extendida. Por ejemplo las funciones flecha ahora están nombradas, pero no suficientemente desarrolladas en el apartado de las funciones.

Además ahora en los contenidos (como en los criterios) de la nueva orden tenemos que incluir tanto colecciones como una introducción a los patrones de diseño.
Detallando.
1. Estructuras de datos pasa a ser colecciones.
1.1.5.- iteradores en arrays.
1.1.6.- Pilas y colas hechas con arrays en Javascript.
1.1.7.- Asignación múltiple de variables en JavaScript. (no sé si merece la pena ponerlo en un subpunto).
1.2.- Conjuntos.
1.3.- Mapas.

2.4.- Funciones flecha. El 2.4 pasaría al 2.5.
El 3.1. 3.2. 3.3 deberían colgar de un nuevo punto dentro del 3.2 que serían las funciones clásicas.
3.1 Clases modernas.
3.1.1.- Características de una clase ES2015
3.1.1.1.- Declaración de atributos y métodos privados y públicos.
3.1.1.2.- Herencia.
3.1.1.3.- Métodos estáticos.
3.1.2.- Módulos.

4.- Patrones de diseño.
4.1.- ¿Qué es un patrón?
4.2.- Buenas prácticas.
4.3.- Patrones importantes.

Ubicación: Mapa
Mejora (Mapa conceptual): Se añade patrones de diseño entre otras cosa.

Ubicación: En el documento.
Mejora (Orientaciones del alumnado): Nueva Actualización con referencias a todas las novedades.

Versión: 01.02.00	Fecha de actualización: 30/11/18	Autoría: Arturo José Puentes Castellanos
Ubicación: A lo largo del documento. Mejora (tipo 1): 2.2 En enlace ahora tiene detallado adecuadamente del para saber más. Punto 1.4. Enlace roto. Eliminado el para saber más del punto 3.1. Ya se trata con posterioridad. El enlace 3.2 ahora es significativo. El cambio del 1.1.4 y el 3.3 no son necesarios ya. Los marco. El del 3.3 se ha incluido en el 4 ya que trata de ES6. El del 2 se ha incluido en el 4 ya que se habla de ES6 ahí. Ubicación: Añadir un nuevo punto con ES6. Mejora (tipo 2): Hay un montón de cambios en la versión 6 de JavaScript (EcmaScript 6). Cuestiones como las clases, herencias, ámbito de las variables nuevas con let y const, módulos, funciones flecha, etc. Este comentario sustituye a otros que hay de tipo 1 que se refieren a cuestiones a tratar aquí. Ubicación: 2.- Creación de funciones. Mejora (tipo 1): En el púnto 2.- Creación de funciones, se debería estudiar aspectos relativos a funciones como el tema de ámbitos tradicional en el ES5 a nivel de funciones y el concepto hoisting y como el ES6 introduce nuevas formas de tratar el ámbito a nivel de bloque con let. Ubicación: 3.3 Mejora (tipo 1): Añadir un ejemplo nuevo de clase que se vea de las tres maneras habituales a la vez para que sea más sencillo compararlos y reducir la confusión que provoca Javascript con su evolución a lo largo de los años. Ubicación: 1.1.4 Mejora (tipo 1): Añadir algún ejemplo ordenación con arrays y el método sort. Ubicación: 3.3 Mejora (tipo 1): Añadir más ejemplos de objetos en JavaScript. Ubicación: 3.3 Mejora (tipo 1): Hay algún comentario en los foros sobre los setters y getters nuevos. Aunque se han añadido ejemplos en la unidad 6, se puede hacer una mención de que no son soportados por los navegadores y que en la unidad 6 se explica como usarlos. Nada de escritura de contenidos reales. Ubicación: En el documento. Mejora (Orientaciones del alumnado): Se ha añadido el punto 4. Se ha hecho un comentario sobre los cambios.

Versión: 01.02.00

Fecha de actualización: 30/11/18

Autoría: Arturo José Puentes Castellanos

Ubicación: A lo largo del documento.
Mejora (tipo 1): 2.2 En enlace ahora tiene detallado adecuadamente del para saber más.
Punto 1.4. Enlace roto.
Eliminado el para saber más del punto 3.1. Ya se trata con posterioridad.
El enlace 3.2 ahora es significativo.
El cambio del 1.1.4 y el 3.3 no son necesarios ya. Los marco.
El del 3.3 se ha incluido en el 4 ya que trata de ES6.
El del 2 se ha incluido en el 4 ya que se habla de ES6 ahí.

Ubicación: Añadir un nuevo punto con ES6.
Mejora (tipo 2):
Hay un montón de cambios en la versión 6 de JavaScript (EcmaScript 6). Cuestiones como las clases, herencias, ámbito de las variables nuevas con let y const, módulos, funciones flecha, etc. Este comentario sustituye a otros que hay de tipo 1 que se refieren a cuestiones a tratar aquí.

Ubicación: 2.- Creación de funciones.
Mejora (tipo 1): En el púnto 2.- Creación de funciones, se debería estudiar aspectos relativos a funciones como el tema de ámbitos tradicional en el ES5 a nivel de funciones y el concepto hoisting y como el ES6 introduce nuevas formas de tratar el ámbito a nivel de bloque con let.

Ubicación: 3.3
Mejora (tipo 1): Añadir un ejemplo nuevo de clase que se vea de las tres maneras habituales a la vez para que sea más sencillo compararlos y reducir la confusión que provoca Javascript con su evolución a lo largo de los años.

Ubicación: 1.1.4
Mejora (tipo 1): Añadir algún ejemplo ordenación con arrays y el método sort.

Ubicación: 3.3
Mejora (tipo 1): Añadir más ejemplos de objetos en JavaScript.

Ubicación: 3.3
Mejora (tipo 1): Hay algún comentario en los foros sobre los setters y getters nuevos. Aunque se han añadido ejemplos en la unidad 6, se puede hacer una mención de que no son soportados por los navegadores y que en la unidad 6 se explica como usarlos. Nada de escritura de contenidos reales.

Ubicación: En el documento.
Mejora (Orientaciones del alumnado): Se ha añadido el punto 4.
Se ha hecho un comentario sobre los cambios.

Versión: 01.01.00	Fecha de actualización: 11/01/15	Autoría: Arturo José Puentes Castellanos
Integradas las definiciones. Añadidos acrónimos. Arreglados los ésto con acento a no tener acento. Añadido for (var i in Objeto) Arreglado un ejemplo de función con dos return. Está en contra de todos los criterios explicados en cualquier facultad y no es correcto aunque se utilice(es equivalente a un vulgarismo) Añadido ejemplo de inicialización de un array bidimensional. Añadido toString para imprimir objetos y ejemplos de uso, con prototype. Reconocimiento de la autoría usando el n

Versión: 01.00.00	Fecha de actualización: 30/04/14
Versión inicial de los materiales.

Estructuras definidas por el usuario en JavaScript.

Caso práctico

1.- Creación de funciones.

Caso práctico

1.1.- Parámetros.

Ejercicio Resuelto

Retroalimentación

Citas para pensar

Para saber más

1.2.- Ámbito de las variables.

Para saber más

1.3.- Funciones anidadas.

Citas para pensar

1.4.- Funciones flecha.

Ejercicio Resuelto

Retroalimentación

Reflexiona

Retroalimentación

Para saber más

1.5.- Funciones predefinidas del lenguaje.

Ejercicio Resuelto

Retroalimentación

Debes conocer

2.- Estructuras de datos. Colecciones.

Caso práctico

Para saber más

Citas para pensar

2.1.- Objeto Array.

Autoevaluación

Pregunta

Respuestas

Retroalimentación

Solución

2.1.1.- Creación de un array.

Introducir datos en un array

Ejercicio Resuelto

Retroalimentación

2.1.2.- Recorrido de un array.

Citas para pensar

Autoevaluación

Pregunta

Respuestas

Retroalimentación

Solución

2.1.3.- Borrado de elementos en un array.

Ejercicio Resuelto

Retroalimentación

2.1.4.- Trabajando sobre arrays. Iteradores en arrays.

Para saber más

2.1.5.- Propiedades y métodos.

Debes conocer

2.1.6.- Pilas y colas hechas con arrays en Javascript.

Ejercicio Resuelto

Retroalimentación

Para saber más

2.1.7.- Asignación múltiple de variables en JavaScript.

Para saber más

2.1.8.- Arrays multidimensionales.

2.1.9.- Arrays paralelos.

Ejercicio Resuelto

Retroalimentación

Para saber más

2.2.- Conjuntos.

Para saber más

Ejercicio Resuelto

2.3.- Mapas.

Ejercicio Resuelto

Retroalimentación

Para saber más

3.- Creación de objetos a medida.

Caso práctico

Para saber más

3.1- Clases Modernas.

Caso práctico

Reflexiona

Retroalimentación

Para saber más

3.1.1.- Características de una clase ES2015.

Para saber más

3.1.1.1- Constructor.