Javascript: ¿para qué sirve un array?

Introducción

Imagina que necesitas organizar tu armario y, para ello, tienes que guardar los sombreros en un cajón, los pantalones y los calcetines en otro. Un array es una estructura similar a un armario, donde puedes almacenar "cosas" en un espacio reservado. En este artículo entenderemos qué es un array y para qué se utiliza. También hablaremos de:

• Cómo funciona un array;

• Cómo hacer un array en Javascript;

• Métodos de array utilizados en Javascript.

¿Qué es un array?

Los arrays son estructuras utilizadas para almacenar y organizar datos. Su finalidad es ser un espacio fijo en la memoria del ordenador que almacena elementos. Se puede acceder a estos elementos mediante un tipo de indicación, que llamamos índice. Puedes guardar tus sombreros en el cajón 1, tus pantalones en el cajón 2 y tus calcetines en el cajón 3, y siempre que necesites pantalones, sombreros o calcetines, sabrás en qué cajón buscar.

[TOC]

¿Para qué sirve un array?

De forma más robusta, un array es una estructura de datos que sirve para almacenar elementos en un espacio de la memoria. Estos espacios de memoria se llaman variables. En este curso de JavaScript podrás aprender todo sobre los arrays, variables, tipos y mucho más.

¿Cómo funciona un array en JavaScript?

Para entender mejor qué es y cómo funciona un Array en JavaScript, siga el siguiente ejemplo. Imagina que tienes que comprar fruta en el supermercado. Coge rápidamente una hoja de papel y un bolígrafo y escribes cada artículo, uno debajo del otro, de la siguiente manera:

Lista de frutas:

1. Manzanas;

2. Uvas

3. Plátanos

4. Piña;

5. Fresas;

Si alguien te pregunta cuál es la tercera cosa que necesitas comprar, mirarás tu lista y responderás "Plátanos".

En Javascript los arrays se comportan de forma similar a la búsqueda del elemento en la lista, la diferencia es que empieza a contar desde cero, así:

JavaScript Array - Ejemplo: Lista de Frutas

Cada ítem es un elemento y se accede a cada elemento a través de un índice que es igual a cero. Además, podemos intercambiar elementos, añadir y eliminar a nuestro antojo.

¿Cómo declarar un array en JavaScript?

Hay dos formas de declarar un array en JavaScript, pero la más común es crear una variable como la siguiente:

var listaDeFrutas  = ['Manzanas','Uvas','Plátanos','Piña','Fresas'];

Donde cada elemento de la lista está separado por comas y ocupa una posición en el array listaDeFrutas empezando por el índice cero. Esta forma se llama JavaScript Array literal.

Acceder a un elemento de un array

Podemos acceder a los elementos de un array buscando en su índice, como se indica a continuación:

var primeroItem  = listaDeFrutas[0]; // Obtener el elemento "Manzanas
var segundoItem  = listaDeFrutas[1]; // Obtener el elemento "Uvas
var terceroItem  = listaDeFrutas[2]; // Obtener el elemento 'Plátanos'

Otra forma de acceder a los elementos de un array es iterando sobre él, es decir, recorriendo todos los elementos utilizando estructuras de repetición como while, for y forEach().

listaDeFrutas(function (elemento, indice) {
  console.log(elemento, indice);
});
// Manzanas 0
// Uvas 1
// Plátanos 2
// Piña 3
// Fresas 3

Ni el tamaño ni los tipos de los elementos son fijos en un array, ya que podemos añadir y eliminar sus elementos. Veamos algunos de los métodos más utilizados por los programadores cuando trabajan con arrays.

Métodos de arrays en JavaScript

Hay algunos métodos que los programadores utilizan mucho cuando tratan con arrays.

Acceder a un elemento por su índice

Podemos acceder al índice de un elemento con indexOf() pasando el elemento como parámetro.

var listaDeFrutas = ['Manzanas','Uvas','Plátanos','Piña','Fresas'];
var posicion = listaDeFrutas.indexOf('Plátanos');
//posicion = 2

Añadir elementos

Para añadir un elemento al final del array podemos utilizar push().

var listaDeFrutas = ['Manzanas','Uvas','Plátanos','Piña','Fresas'];
listaDeFrutas.push('Naranjas');
// ['Manzanas','Uvas','Plátanos','Piña','Fresas','Naranjas']

Para añadir un elemento al principio del array podemos usar unshift().

var listaDeFrutas = ['Manzanas','Uvas','Plátanos','Piñas','Fresas'];
listaDeFrutas.unshift('Naranjas');
// ['Naranjas','Manzanas','Uvas','Plátanos','Piña','Fresas']

En ambos métodos, para añadir un objeto a un array JavaScript, debemos pasar el elemento que queremos añadir como parámetro.

Eliminar un elemento de un array JavaScript

Para eliminar un elemento del principio de un array podemos utilizar shift().

var listaDeFrutas = ['Manzanas','Uvas','Plátanos','Piña','Fresas'];

listaDeFrutas.shift();
// ['Uvas','Plátanos','Piña','Fresas']

Para eliminar un elemento del final de un array podemos utilizar pop().

var listaDeFrutas = ['Manzanas','Uvas','Plátanos','Piña','Fresas'];
listaDeFrutas.pop();
// ['Manzanas','Uvas','Plátanos','Piña']

En ambos métodos no es necesario pasar el elemento como parámetro.

También podemos eliminar un elemento de su índice con el método splice().

var listaDeFrutas = ['Manzanas','Uvas','Plátanos','Piña','Fresas'];
var pos = listaDeFrutas.indexOf('Piña'); //pos = 3
listaDeFrutas.splice(pos, 1)
// ['Manzanas','Uvas','Plátanos','Fresas']

En el método splice(), el primer parámetro debe ser la posición donde queremos eliminar los elementos, y el segundo parámetro es la cantidad que queremos eliminar.

Conclusión

Hemos visto qué son los arrays, que se utilizan para almacenar, agrupar y organizar datos en la memoria del ordenador y que no tienen un tamaño o tipo fijo y, por ello, podemos añadir, eliminar e intercambiar elementos libremente. También vimos que en Javascript la forma más común de declarar un array es utilizando el método array literals**, que es una secuencia de elementos separados por comas y encerrados entre corchetes. Por último, conocimos algunos de los métodos de array utilizados por las personas desarrolladoras a la hora de tratar con arrays en programación.

Aquí en Alura Latam tenemos algunos cursos para ayudarte a entender los diferentes tipos de variables y cómo puedes almacenar datos en ellas:

• Curso de Fundamentos de JavaScript: Tipos, variables y funciones

  Y si quieres aprender más sobre arrays, puedes consultar el curso:

• Curso de Fundamentos de JavaScript: Arrays

  También tenemos otros artículos que hablan más sobre métodos de arrays y tipado dinámico de datos:

  Manipulación de array con map, filter y reduce

  Manipulación de arrays con map, filter y reduce

  Tipado dinámico con Javascript

Mi nombre es Neilton Seguins, instructor de React aquí en Alura, y te invito a aprender más sobre el universo Frontend en esta formación exclusiva de nuestra plataforma. Si quieres estar al día de novedades y contenidos exclusivos, también te espero en nuestro canal de Discord para que podamos aprender juntos e intercambiar conocimientos.

Soy licenciado en Ciencia y Tecnología y en Ingeniería Mecánica. Actúo como Instructor de Desarrollador de Software en Alura y tengo experiencia en desarrollo con JavaScript/typescript, React js, Next js y Node.js. Me encanta compartir conocimiento, porque creo que la educación es transformadora y quiero cambiar la vida de las personas a través de la educación, así como he logrado cambiar de vida. También me encanta escuchar y tocar música, leer libros y manga y ver series.