Sección 1: JavaScript

Lección 13: Estructuras de datos - Arrays (arreglos)

En esta lección vamos a aprender nuestra primera estructura de datos. ¿Que es una estructura de datos? Hasta ahora solo hemos aprendido acerca de números, strings, booleans, undefined y funciones. ¿Pero cómo podemos almacenar todos ellos?

Dijimos que una variable es como el cajón de un escritorio, pero no queremos arrojar todos nuestros datos dentro de un cajón y generar un gran de desorden. Tal como no queremos arrojar una lapicera dentro del cajón y cerrarlo, sin ordenar nada adentro.

Idealmente podemos almacenar más cosas, y para ello sería muy importante que podamos organizarlas. Las estructuras de datos son como compartimentos en nuestro escritorio que nos permiten almacenar datos de una manera organizada.

Diferentes estructuras de datos son buena para diferentes cosas. Por ejemplo, en la imagen anterior podemos ver que un fichero es muy útil para encontrar cosas porque se podrían encontrar en orden alfabético.

Las estructuras de datos nos brindan la habilidad de almacenar información y acceder a ella, de una manera que sea útil para nosotros.

Así que aprendamos nuestra primera estructura de datos: los arrays (arreglos).

Abramos nuestro editor Sublime Text y generemos el siguiente archivo HTML, llamado “index.html”:

Ahora en la misma carpeta, un archivo en blanco JavaScript llamado “script.js”.

Comencemos a escribir nuestro primer array dentro del archivo “script.js”:

var listaAnimales = [“perro”, “gato”, “tigre”, “serpiente”];

Como podemos ver, nuestro array se almacena en una variable. También podemos apreciar que un array es un conjunto de elementos, en este caso strings, separados por comas, y definidos entre corchetes.

Un array (arreglo), como dijimos, es una manera de organizar nuestra información. ¿Cómo podemos acceder a esta información? ¿Cómo podemos obtener uno de estos cuatro ítems que están almacenados en nuestro array? La forma de acceder a un array es la siguiente:

listaAnimales[1];

Como podemos apreciar, para acceder a un elemento de nuestro array (arreglo), debemos colocar el nombre de la variable que almacena al array y luego colocar entre corchetes un número, el cual indica el índice del elemento al que queremos acceder.

En nuestro ejemplo queremos acceder al elemento que se encuentra en el índice 1 del array listaAnimales.

Ahora probemos imprimir en la consola de nuestro navegador web el valor almacenado en el índice 1 del array listaAnimales:

console.log(listaAnimales[1]);

Guardemos nuestro archivo “script.js”, y abramos el archivo “index.html” en nuestro navegador web.

Como podemos ver, la consola nos imprime “gato”. Seguramente la mayoría de nosotros pensamos que el valor que se iba a imprimir era “perro”. Generalmente en programación, cuando comenzamos a contar números lo hacemos a partir del cero.

Por lo tanto para obtener el primer elemento de nuestro array debemos acceder al índice cero:

listaAnimales[0];

Ahora juguemos con los arrays desde nuestro consola. Copiemos la definición de nuestro array listaAnimales y la peguemos en la consola.

Veamos el contenido de la variable listaAnimales.

Como podemos ver, el array listaAnimales almacena cuatro valores, por lo que podemos decir que su tamaño (length) es de 4. En la posición 0 tenemos el valor “perro”, en la posición 1 tenemos el valor “gato”, en la posición 2 tenemos el valor “tigre”, y en la posición 3 el valor “serpiente”.

Ahora, ¿qué tipo de cosas pueden almacenar los arrays? ¿Sólo pueden almacenar strings? No necesariamente. Intentemos crear un array llamado “numeros” que almacene valores numéricos:

var numeros = [1, 2, 3, 4];

Ahora definamos un array de booleans:

var booleans = [true, false, true];

Incluso podemos definir arrays de funciones:

var listaFunciones = [function saludar() {

   console.log(“Hola”);

}];

Ahora veamos el contenido del array listaFunciones

Como podemos ver este listado tiene un tamaño de 1, y en su posición 0 almancena la función saludar()

Ahora intentemos crear una array que almacene valores de distintos tipos:

var listaMixta = [“manzanas”, 3, undefined, true, function encender() {

   console.log(“encendiendo”);

}];

Veamos ahora el contenido de listaMixta

Como podemos ver, en JavaScript se pueden crear arrays que contengan elementos de distintos tipos de datos. Vale aclarar que no es para nada aconsejable hacerlo. Se recomienda siempre almacenar datos de un mismo tipo dentro de un array.

También podemos crear arrays cuyos elementos sean otros arrays:

var listaAnimales = [ [“perro”, “gato”, “tigre”, “serpiente”] ];

Ahora veamos el contenido de nuestro array de arrays.

¿Cómo podemos imprimir en la consola el valor “tigre”? Lo podemos hacer de la siguiente manera:

console.log(listaAnimales[0][2]);

Como podemos ver tenemos dos pares de corchetes para acceder al string “tigre”. El primer par de corchetes indican que el elemento array de arrays, en nuestro caso tenemos un solo array dentro del array listaAnimales, por lo que accedemos a su elemento 0.

El segundo par de corchetes indican el elemento del array que accedimos en el primer par de corchetes, en este caso caso queremos acceder al tercer elemento, por lo que colocamos el número 2.

JavaScript nos provee una gran cantidad de métodos predefinidos para los arrays. ¿Qué son los métodos? Por ahora pensemos en ellos como funciones que podemos usar con los arrays. No nos preocupemos demasiado por el término método, ya que lo veremos en detalle más adelante en este curso.

Definamos nuevamente nuestro array listaAnimales:

var listaAnimales = [“perro”, “gato”, “tigre”, “serpiente”];

Ahora veamos el contenido de nuestro array listaAnimales

Ahora usemos uno los métodos predefininos de los arrays:

listaAnimales.shift();

Como podemos ver nos retorna “perro”. ¿Qué significa esto? Para entender esto veamos nuevamente el contenido de nuestro array

Como podemos ver, el elemento “perro” ha desaparecido de nuestro array. Entonces podemos afirmar que el método shift() elimina el primer elemento de nuestro array.

Ahora probemos el método pop()

Vemos que en este caso la salida es “serpiente”. Veamos ahora el contenido del array.

Como podemos ver, el método pop() eliminó el último elemento de nuestro array. Y ahora solo nos quedan “gato” y “tigre”.

Ahora probemos el método push() el cual necesita que le ingresemos un parámetro:

listaAnimales.push(“elefante”);

Como podemos ver, el este método nos devolvió el valor 3. ¿Qué significa este número? Este número indica el nuevo tamaño de nuestro array. Veamos el contenido de nuestro array para corroborarlo.

Ahora tenemos tres elementos. Como podemos apreciar, el elemento “elefante” se insertó al final de nuestro array.

Ahora veamos el método concat() el cual nos permite concatenar dos arrays. Intentemos concatenar a nuestro array listaAnimales otro array formado por los elementos “abeja” y “jirafa”.

Como podemos el resultado del método nos devuelve un array compuesto por cinco elementos: “gato”, “tigre”, “elefante”, “abeja” y “jirafa”. Los cuales ocupan las posiciones o índices 0, 1, 2, 3 y 4, respectivamente.

Ahora probemos el método sort() el cual ordenará de manera alfanumérica los elementos de nuestro array listaAnimales.

Vemos que obtenemos una lista ordenada. ¿Pero por qué de solamente 3 elementos? ¿Qué pasó con los 2 elementos que concatenamos anteriormente? Esto ocurre porque al momento de concatenar los arrays, no asignamos el resultado de la concatenación a ninguna variable.

Probemos realizar esta asignación:

var listaAnimales2 = listaAnimales.concat([“abeja”, “jirafa”]);

Ahora veamos el contenido de listaAnimales2

Por lo tanto, podemos ver que existen algunos métodos que crean nuevos arrays que pueden ser asignados a variables, como el caso de concat(), y existen otros métodos, como push() y pop(), que no crean un nuevos arrays, solo modifican el existente.

Finalmente, vemos que nuestro conocido sitio W3Schools posee una guía de referencia acerca de los métodos que poseen los arrays en JavaScript.

Podemos leer acerca de ellos a medida que trabajemos con arrays. Existen un par de cosas que no cubriremos en este curso, así que tendremos que buscarlas por nosotros mismos en este sitio, para averiguar lo que necesitamos para resolver los problemas que nos sean planteados.

Bueno, eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!