Construcción de Arrays con Clases en JavaScript

Clase 5 de 29Curso de Estructuras de Datos con JavaScript

Resumen

Aprende, con enfoque práctico, a construir un array desde cero en JavaScript usando una clase. Implementamos un constructor con this.length y this.data, y los métodos get y push para acceder y agregar elementos con índices desde cero. Además, verás cómo instanciar la clase y verificar que la longitud crece, preparando el terreno para implementar pop y un método de borrar por índice.

¿Qué haremos al construir un array con clases en JavaScript?

La idea es replicar el comportamiento básico de un array sin usar los métodos nativos directamente. En lugar de un literal ["Diego", "Karen", "Oscar"], creamos una clase propia que administre los elementos con un índice que inicia en cero.

  • Usar una clase: MyArray para encapsular datos y operaciones.
  • Inicializar estado: this.length = 0 y this.data = {}.
  • Implementar get(index): obtener un elemento por índice.
  • Implementar push(item): agregar un elemento al final, actualizar longitud y devolver los datos.
  • Practicar indexación desde cero: 0, 1, 2.
  • Preparar próximos métodos: pop y borrar por índice.

Código base de la clase:

class MyArray {
  constructor() {
    this.length = 0;      // controla cuántos elementos hay
    this.data = {};       // almacena los elementos por índice
  }

  get(index) {
    return this.data[index];
  }

  push(item) {
    this.data[this.length] = item; // coloca el item en el último índice libre
    this.length++;                 // incrementa la longitud
    return this.data;              // devuelve los datos actuales
  }
}

¿Cómo se implementa y usa cada método clave?

Primero se instancia la clase y luego se llaman los métodos para agregar y leer elementos. Observa cómo la longitud crece y los índices se asignan en orden.

const myArray = new MyArray();
myArray.push('José');     // index 0
myArray.push('Adriana');  // index 1
myArray.get(1);           // 'Adriana'

¿Cómo funciona get para acceder por índice?

  • Recibe un index numérico.
  • Accede a this.data[index] y lo retorna.
  • Es directo: no modifica el estado.
  • Ideal para comprobar valores: por ejemplo, 1 devuelve "Adriana".

¿Cómo opera push para crecer el array?

  • Recibe un elemento (item) a agregar.
  • Lo guarda en this.data[this.length] para mantener la secuencia.
  • Incrementa this.length en uno.
  • Devuelve this.data para visualizar el estado actual.

¿Qué conceptos y habilidades refuerzas con este ejercicio?

Este ejercicio refuerza fundamentos esenciales de JavaScript y del pensamiento en estructuras de datos.

  • Clases en JavaScript: encapsulan datos y comportamiento.
  • Constructor: inicializa length y data para el estado interno.
  • Propiedad length: cuenta elementos y define el próximo índice libre.
  • Almacenamiento en objeto: data actúa como mapa índice → valor.
  • Indexación base cero: el primer elemento está en 0.
  • Métodos personalizados: get para lectura y push para inserción.
  • Instanciación con new: crear const myArray = new MyArray().
  • Diferencia con nativos: existen métodos como push y pop ya integrados, pero aquí los construimos para entender su lógica.
  • Próximo paso: implementar pop para eliminar el último elemento y un método para borrar por índice.

¿Te gustaría que implementemos juntos pop y el borrado por índice en el siguiente paso? Deja tus preguntas y casos de uso en los comentarios.