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 tipo de dato 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): Este se utiliza para definir array JavaScript. crea un array en JavaScript de len elementos.
- new Array(e1, e2…): Otro elemento que se utiliza para definir array JavaScript. Este crea un array en JavaScript con ninguno o varios elementos.
- [e1, e2…]: Otro elemento que te ayuda a definir array JavaScript. Simplemente, crea los elementos dentro de corchetes si es tu notación de preferencia: [] de array en JavaScript.
Piensa en el siguiente ejemplo: podrías tener un array JavaScript 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
//array asociativo javascript
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 JavaScript.
- Método “Object” [pos]: operador que devuelve el elemento número pos del array JavaScript.
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
//javascript longitud 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!
