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

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Fundamentos Javascript

Funciones, Scope y Estructuras de Datos

DOM y Experiencia en el Navegador

Modulos y Asincronía

Tomar examen

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

Resumen

Los arrays en JavaScript son una herramienta esencial para organizar información y manipular datos de forma eficiente. Aquí encontrarás una guía clara y práctica para entender su estructura, cómo funcionan sus índices, y cómo aplicar operaciones de CRUD con métodos como push, unshift, splice, pop y shift. Con ejemplos simples, verás por qué los arreglos son parte del día a día en el desarrollo.

¿Qué es un array en JavaScript y por qué es clave?

Un array es una estructura ordenada de datos que almacena múltiples valores en una sola variable. Se reconoce por los corchetes y por separar elementos con comas. Puede mezclar distintos tipos: texto, números, valores booleanos, nulos y hasta objetos. En muchas respuestas de APIs verás datos organizados como arreglos y objetos.

Un array permite acceder por posición usando su índice.
El índice inicia en 0: el primer elemento está en la posición 0.
Con const no cambias la referencia del array, pero sí puedes mutar su contenido con métodos.

¿Cómo se declara un arreglo con corchetes y comas?

const notas = ['nota uno', 'nota dos', 'nota tres'];

¿Qué tipos de datos puede contener un array?

const mixto = [1, 'texto', null, true, {}];

Números, strings, null y booleanos.
Objetos para estructuras más ricas.

¿Cómo funciona el índice que inicia en cero?

console.log(notas[0]); // 'nota uno'
console.log(notas[1]); // 'nota dos'

Índices: 0, 1, 2, ... hasta length - 1.
Evita confusiones recordando que el conteo no empieza en 1.

¿Cómo aplicar CRUD en arrays: create, read, update y delete?

CRUD es un patrón común: create, read, update, delete. Con arreglos puedes implementarlo usando métodos nativos. La clave: mutas el contenido, no la referencia creada con const.

¿Cómo agregar elementos con push y unshift?

Agregar al final con push.
Agregar al inicio con unshift.

const notas = ['nota uno', 'nota dos', 'nota tres'];
notas.push('nota cuatro');      // final
notas.unshift('nota cero');     // inicio
console.log(notas);
// ['nota cero', 'nota uno', 'nota dos', 'nota tres', 'nota cuatro']

¿Cómo insertar o sustituir con splice sin eliminar?

splice recibe: posición, cantidad a eliminar, y elementos a insertar.

// Insertar en la posición 1 sin eliminar
notas.splice(1, 0, 'nota 1.2');
console.log(notas);
// ['nota cero', 'nota 1.2', 'nota uno', 'nota dos', 'nota tres', 'nota cuatro']

// Si el segundo argumento es 1, elimina 1 elemento en esa posición
notas.splice(1, 1); // elimina 'nota 1.2'

Con 0 no eliminas y solo insertas.
Con 1 (o más) eliminas desde la posición indicada.

¿Cómo leer, actualizar y eliminar valores de forma segura?

Para leer, usa índices y el método length. Para actualizar, asigna por índice o usa splice. Para eliminar, aplica pop, shift o splice según el caso.

¿Cómo leer por posición y contar con length?

console.log(notas[0]); // primer elemento
console.log(notas[1]); // segundo elemento
console.log(notas.length); // total de elementos

length devuelve el total.
El último índice es length - 1.

¿Cómo actualizar por índice y con splice?

Asigna por índice para reemplazar un valor.
Usa splice para insertar en una posición específica sin eliminar.

const notas2 = ['nota uno', 'nota dos'];
notas2[1] = 'nota tres';
console.log(notas2); // ['nota uno', 'nota tres']

// Insertar en la posición 1 sin eliminar
notas2.splice(1, 0, 'nota cuatro');
console.log(notas2); // ['nota uno', 'nota cuatro', 'nota tres']

Recuerda: splice(pos, 0, item) inserta. Si quieres sustituir eliminando el actual, usa splice(pos, 1, item).

¿Cómo eliminar con pop, shift y splice?

pop: elimina el último elemento.
shift: elimina el primero.
splice: elimina desde un índice específico.

const notas3 = ['nota uno', 'nota dos'];
console.log(notas3.pop()); // 'nota dos'
console.log(notas3);       // ['nota uno']

const notas4 = ['nota uno', 'nota dos'];
console.log(notas4.shift()); // 'nota uno'
console.log(notas4);         // ['nota dos']

// Eliminar 1 elemento desde la posición 1
notas4.splice(1, 1);
console.log(notas4);

Con splice(ini, cantidad) controlas cuántos elementos borrar.
Cuidado con eliminar más de lo necesario.

¿Tienes un caso de uso con arrays que quieras optimizar o dudas con splice y los índices? Compártelo en comentarios y seguimos la conversación.

// ============================================
//  Reto 16: Arrays en JavaScript
// ============================================
// Completa cada función según las instrucciones.
// Ejecuta los tests con: 
// npx vitest src/16-arrays-javascript
// ============================================


// --- Reto 1: Crear Array de Frutas
// crea un array frutas con valores: manzana, banana y naranja
// retorna el array
function crearArrayFrutas() {
  const frutas = ['manzana', 'banana', 'naranja'];
  return frutas;
}

console.log(crearArrayFrutas());

// --- Reto 2: Crear Array Mixto
// Retorna un array con 1,'texto', true, null y {tipo: 'objeto'}
function crearArrayMixto() {
  const mixto = [1, 'texto', true, null, { tipo: 'objeto' }];
  return mixto;
}

console.log(crearArrayMixto());

// --- Reto 3: Obtener Primer Elemento
// recibe array y retorna el primer elemento
const colores = ['azul', 'naranja', 'amarillo'];

function obtenerPrimerElemento(array) {
  return array[0];
}

console.log(obtenerPrimerElemento(colores));

// --- Reto 4: Obtener Último Elemento
// recibe array retorna el último elemento
// pista: .length
function obtenerUltimoElemento(array) {
  return array[array.length - 1];
}

console.log(obtenerUltimoElemento(colores));

// --- Reto 5: Agregar al Final
// recibe array y elemento
// agrega elemento al array en la posicion final y retorna array
function agregarAlFinal(array, elemento) {
  array.push(elemento);
  return array
}

console.log(agregarAlFinal(colores, 'celeste'));

// --- Reto 6: Agregar al Inicio
// recibe array y elemento
// agrega elemento al inicio del array y retorna array
function agregarAlInicio(array, elemento) {
  array.unshift(elemento);
  return array;
}

console.log(agregarAlInicio(colores, 'dorado'));

// --- Reto 7: Insertar en Posición
// recibe array, posicion, elemento
// inserta elemento con base a posición sin eliminar en el array
// pista: .splice()
// retorna el array
function insertarEnPosicion(array, posicion, elemento) {
  array.splice(posicion, 0, elemento);
  return array;  
}

console.log(insertarEnPosicion(colores, 3, 'soy el texto de splice'));

// --- Reto 8: Reemplazar en Posición
// recibe array, posicion, nuevoElemento
// (posicion, 1, nuevoElemento) → reemplaza y retorna el array
function reemplazarEnPosicion(array, posicion, nuevoElemento) {
  array.splice(posicion, 1, nuevoElemento);
  return array;
}

console.log(reemplazarEnPosicion(colores, 3, 'Te reemplace'));

// --- Reto 9: Eliminar Último elemento
// recibe array y elimina el ultimo elemento y retorna el array
function eliminarUltimo(array) {
  array.pop();
  return array;
}

console.log(eliminarUltimo(colores));

// --- Reto 10: Eliminar Primero
// recibe array y elimina el primer elemento y retorna el array
function eliminarPrimero(array) {
  array.shift();
  return array;
}

console.log(eliminarPrimero(colores));

// --- Reto 11: Eliminar en Posición
// recibe array y posicion
// elimina un elemento con base a posicion
function eliminarEnPosicion(array, posicion) {
  array.splice(posicion, 1);
  return array;
}

console.log(eliminarEnPosicion(colores, 4));

// --- Reto 12: Obtener Longitud
// recibe array y retorna la longitud del array
function obtenerLongitud(array) {
  return array.length;
}

console.log(obtenerLongitud(colores));

// --- Reto 13: Verificar si es Array
// recibe valor y verifica si es un array
// retorna true o false
function esArray(valor) {
  return Array.isArray(valor);
}

console.log(esArray(colores));

// --- Reto 14: Encontrar Índice
// recibe array y elemento, array contiene [contenido] y elemento (numero)
// retorna el el array con el elemento buscando el indice recibido por elemento
// pista: .indexOf  
function encontrarIndice(array, elemento) {
  return array.indexOf(elemento);
  }

console.log(encontrarIndice(colores, 'amarillo'));

// --- Reto 15: CRUD (Create, Read, Delete y Update)
// declara un array con valores : [1,2,3]
// cre las siguientes Operaciones: 
// unshift(0), 
// push(4), 
// splice(1,1,10), 
// pop(), 
// splice(2,1)
// retorna el array
// Resultado → solo  debe realizar todas las operaciones CRUD correctamente 
function crudCompleto() {
  const valores = [1, 2, 3];
  valores.unshift(0);
  valores.push(4);
  valores.splice(1, 1, 10);
  valores.pop();
  valores.splice(2, 1);
  return valores;
}

console.log(crudCompleto());

module.exports = {
  crearArrayFrutas,
  crearArrayMixto,
  obtenerPrimerElemento,
  obtenerUltimoElemento,
  agregarAlFinal,
  agregarAlInicio,
  insertarEnPosicion,
  reemplazarEnPosicion,
  eliminarUltimo,
  eliminarPrimero,
  eliminarEnPosicion,
  obtenerLongitud,
  esArray,
  encontrarIndice,
  crudCompleto,
};

// ============================================
//  Reto 16: Arrays en JavaScript
// ============================================
// Completa cada función según las instrucciones.
// Ejecuta los tests con: 
// npx vitest src/16-arrays-javascript
// ============================================


// --- Reto 1: Crear Array de Frutas
// crea un array frutas con valores: manzana, banana y naranja
// retorna el array
function crearArrayFrutas() {
  const frutas = ['manzana', 'banana', 'naranja'];
  return frutas;
}

console.log(crearArrayFrutas());

// --- Reto 2: Crear Array Mixto
// Retorna un array con 1,'texto', true, null y {tipo: 'objeto'}
function crearArrayMixto() {
  const mixto = [1, 'texto', true, null, { tipo: 'objeto' }];
  return mixto;
}

console.log(crearArrayMixto());

// --- Reto 3: Obtener Primer Elemento
// recibe array y retorna el primer elemento
const colores = ['azul', 'naranja', 'amarillo'];

function obtenerPrimerElemento(array) {
  return array[0];
}

console.log(obtenerPrimerElemento(colores));

// --- Reto 4: Obtener Último Elemento
// recibe array retorna el último elemento
// pista: .length
function obtenerUltimoElemento(array) {
  return array[array.length - 1];
}

console.log(obtenerUltimoElemento(colores));

// --- Reto 5: Agregar al Final
// recibe array y elemento
// agrega elemento al array en la posicion final y retorna array
function agregarAlFinal(array, elemento) {
  array.push(elemento);
  return array
}

console.log(agregarAlFinal(colores, 'celeste'));

// --- Reto 6: Agregar al Inicio
// recibe array y elemento
// agrega elemento al inicio del array y retorna array
function agregarAlInicio(array, elemento) {
  array.unshift(elemento);
  return array;
}

console.log(agregarAlInicio(colores, 'dorado'));

// --- Reto 7: Insertar en Posición
// recibe array, posicion, elemento
// inserta elemento con base a posición sin eliminar en el array
// pista: .splice()
// retorna el array
function insertarEnPosicion(array, posicion, elemento) {
  array.splice(posicion, 0, elemento);
  return array;  
}

console.log(insertarEnPosicion(colores, 3, 'soy el texto de splice'));

// --- Reto 8: Reemplazar en Posición
// recibe array, posicion, nuevoElemento
// (posicion, 1, nuevoElemento) → reemplaza y retorna el array
function reemplazarEnPosicion(array, posicion, nuevoElemento) {
  array.splice(posicion, 1, nuevoElemento);
  return array;
}

console.log(reemplazarEnPosicion(colores, 3, 'Te reemplace'));

// --- Reto 9: Eliminar Último elemento
// recibe array y elimina el ultimo elemento y retorna el array
function eliminarUltimo(array) {
  array.pop();
  return array;
}

console.log(eliminarUltimo(colores));

// --- Reto 10: Eliminar Primero
// recibe array y elimina el primer elemento y retorna el array
function eliminarPrimero(array) {
  array.shift();
  return array;
}

console.log(eliminarPrimero(colores));

// --- Reto 11: Eliminar en Posición
// recibe array y posicion
// elimina un elemento con base a posicion
function eliminarEnPosicion(array, posicion) {
  array.splice(posicion, 1);
  return array;
}

console.log(eliminarEnPosicion(colores, 4));

// --- Reto 12: Obtener Longitud
// recibe array y retorna la longitud del array
function obtenerLongitud(array) {
  return array.length;
}

console.log(obtenerLongitud(colores));

// --- Reto 13: Verificar si es Array
// recibe valor y verifica si es un array
// retorna true o false
function esArray(valor) {
  return Array.isArray(valor);
}

console.log(esArray(colores));

// --- Reto 14: Encontrar Índice
// recibe array y elemento, array contiene [contenido] y elemento (numero)
// retorna el el array con el elemento buscando el indice recibido por elemento
// pista: .indexOf  
function encontrarIndice(array, elemento) {
  return array.indexOf(elemento);
  }

console.log(encontrarIndice(colores, 'amarillo'));

// --- Reto 15: CRUD (Create, Read, Delete y Update)
// declara un array con valores : [1,2,3]
// cre las siguientes Operaciones: 
// unshift(0), 
// push(4), 
// splice(1,1,10), 
// pop(), 
// splice(2,1)
// retorna el array
// Resultado → solo  debe realizar todas las operaciones CRUD correctamente 
function crudCompleto() {
  const valores = [1, 2, 3];
  valores.unshift(0);
  valores.push(4);
  valores.splice(1, 1, 10);
  valores.pop();
  valores.splice(2, 1);
  return valores;
}

console.log(crudCompleto());

module.exports = {
  crearArrayFrutas,
  crearArrayMixto,
  obtenerPrimerElemento,
  obtenerUltimoElemento,
  agregarAlFinal,
  agregarAlInicio,
  insertarEnPosicion,
  reemplazarEnPosicion,
  eliminarUltimo,
  eliminarPrimero,
  eliminarEnPosicion,
  obtenerLongitud,
  esArray,
  encontrarIndice,
  crudCompleto,
};

Fundamentos Javascript

Primeras líneas de JavaScript en la consola del navegador

Construye un editor de notas Markdown con JavaScript

Configuración del entorno para JavaScript

Var, let y const: qué cambia en JavaScript

Tipos de datos en JavaScript: primitivos vs complejos

Operadores aritméticos en JavaScript

Template literals en JavaScript: sintaxis y uso práctico

Métodos esenciales de strings en JavaScript

Coerción de tipos en JavaScript explicada

Igualdad débil vs estricta en JavaScript

Operadores lógicos AND, OR y NOT en JavaScript

If, else y else if en JavaScript

Switch en JavaScript: cuándo y cómo usarlo

Bucles for, while y for...of en JavaScript

while en JavaScript: evita bucles infinitos

Funciones, Scope y Estructuras de Datos

Anatomía de funciones en JavaScript

Scope en JavaScript: global, función y bloque

Closures en JavaScript: estado privado en cuentas