¿Qué es y cómo funciona un array en JavaScript?

Autor: | Última modificación: 6 de abril de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post:

Si no llevas mucho tiempo aprendiendo sobre JavaScript es posible que no sepas qué es un array en JavaScript ni para qué sirve. Para comprender este concepto es importante que tengas algunas bases de conocimiento sobre los objetos, ya que el tema del array en JavaScript puede ser un poco denso para los principiantes.

En este post resolveremos de modo general la pregunta de qué es un array en JavaScript y cómo funciona.

¿Qué es un array en JavaScript?

Avanzar en el trabajo sobre tu código implica comenzar a agrupar valores para una misma variable con tal de representar conjuntos de datos con determinada relación entre sí. Para solucionar esto puedes crear objetos o crear unas variables más sencillas que conocemos como Arrays.

Un Array en JavaScript es una colección o agrupación de elementos en una misma variable, cada uno de ellos ubicado con referencia a la posición que ocupa dentro del mismo. Tanto la longitud como el tipo de los elementos de un array son variables. Dado que la longitud de un array puede cambiar en cualquier momento y los datos se pueden almacenar en ubicaciones no contiguas, no hay garantía de que los arrays de JavaScript sean densos; esto depende de cómo decidas usarlos al programar. 

Cómo definir un array en JavaScript

Un array en JavaScript se puede definir de varias formas:

  • new Array(len): crea un array de len elementos.
  • new Array(e1, e2…): crea un array con ninguno o varios elementos.
  • [e1, e2…]: simplemente, crea los elementos dentro de corchetes si es tu notación de preferencia: [].

Piensa en el siguiente ejemplo: podrías tener un array que en su primera posición tiene el  ‘a’, en la segunda el  ‘b’ y en la tercera el  ‘c’. En Javascript, esto se crearía así:

// Forma tradicional

const array = new Array("a", "b", "c");

// Mediante literales (preferidas)

const array = ["a", "b", "c"]; // Array con 3 elementos

const empty = []; // Array vacío (0 elementos)

const mixto = ["a", 5, true]; // Array mixto (string, number, boolean).

Al contrario que muchos otros lenguajes de programación, Javascript permite que se puedan realizar arrays de tipo mixto, sin que sea obligatorio que todos los elementos sean del mismo tipo de dato (en el ejemplo anterior, “string”). Ten en cuenta que al crear un array con new Array(num), si solo indicas un parámetro y num es un número, Javascript creará un array de num elementos sin definir. Es decir, a = new Array(3) sería equivalente a a = [undefined, undefined, undefined]. Esto no ocurre con su equivalente, a = [3], donde estarías creando un array con un único elemento: 3.

Acceso a elementos

Al igual que con los string, saber el número de elementos que tiene un array en JavaScript es muy sencillo. Solo tendrás que acceder a la propiedad .length, que te arrojará el número de elementos existentes en un array:

  • Método “Number” length: devuelve el número de elementos del array.
  • Método “Object” [pos]: operador que devuelve el elemento número pos del array.

Por otro lado, si lo que quieres es acceder a un elemento específico del array, no tienes más que utilizar el operador [], al igual que harías con los string para acceder a un carácter concreto. En este caso, accedes a la posición del elemento que quieres recuperar sobre el array:

const array = ["a", "b", "c"];

array[0]; // 'a'

array[2]; // 'c'

array[5]; // undefined

Recuerda que las posiciones empiezan a contar desde 0 y que si intentas acceder a una posición que no existe (mayor del tamaño del array), te mostrará un undefined.

Otras operaciones habituales

Ahora que ya comprendes el funcionamiento y el objetivo esencial de un array en JavaScript, échale un vistazo a esta serie de ejemplos con los que podrás hacerte una idea de cómo realizar otras tareas específicas con un array en JavaScript:

Añadir un elemento al final de un array

let nuevaLongitud = frutas.push('Naranja') // Añade "Naranja" al final

// ["Manzana", "Banana", "Naranja"]

Eliminar el último elemento de un array

let ultimo = frutas.pop() // Elimina "Naranja" del final

// ["Manzana", "Banana"]

Añadir un elemento al principio de un array

let nuevaLongitud = frutas.unshift('Fresa') // Añade "Fresa" al inicio

// ["Fresa" ,"Manzana", "Banana"]

Eliminar el primer elemento de un array

let primero = frutas.shift() // Elimina "Fresa" del inicio

// ["Manzana", "Banana"]

Eliminar un único elemento mediante su posición

Continuando con los mismos ejemplos, si quisieras eliminar «Banana» del array podrías emplear dos parámetros: 

  • La posición del primer elemento que se elimina
  • El número de elementos que se quieren eliminar. 

De esta forma, .splice(pos, 1) empieza en la posición que nos indica el valor de la variable pos y elimina 1 elemento. En este caso, como pos vale 1, elimina un elemento comenzando en la posición 1 del array, es decir «Banana».

let elementoEliminado = frutas.splice(pos, 1)

// ["Manzana", "Fresa"]

Eliminar varios elementos a partir de una posición

Un truco interesante que debes saber es que, si usas .splice(), no solo puedes eliminar elementos del array, sino que también puedes extraerlos guardándoslo en un nuevo array. Eso sí, ten en cuenta que al hacer esto vas a modificar el array de origen.

let vegetales = ['Repollo', 'Nabo', 'Rábano', 'Zanahoria']

console.log(vegetales)

// ["Repollo", "Nabo", "Rábano", "Zanahoria"]

let pos = 1, numElementos = 2

let elementosEliminados = vegetales.splice(pos, numElementos)

// ["Nabo", "Rábano"] ==> Lo que se ha guardado en "elementosEliminados"

console.log(vegetales)

// ["Repollo", "Zanahoria"] ==> Lo que actualmente tiene "vegetales"

¿Por dónde continuar?

Como habrás visto, aprender a manejar por completo un array en JavaScript no es una tarea tan sencilla como podría parecer, principalmente por sus extensas funcionalidades y lo exhaustivo de aplicarlas. ¿Te interesaría aprender de cero con un acompañamiento continuo por parte de expertos? Varios desarrolladores web han logrado desempeñarse de forma excelente en este mercado gracias a  nuestros bootcamps disponibles. ¡Inscríbete ya y conviértete en un experto!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]