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:
classMyArray{constructor(){this.length=0;// controla cuántos elementos haythis.data={};// almacena los elementos por índice}get(index){returnthis.data[index];}push(item){this.data[this.length]= item;// coloca el item en el último índice librethis.length++;// incrementa la longitudreturnthis.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 =newMyArray();myArray.push('José');// index 0myArray.push('Adriana');// index 1myArray.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.
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.
Alguna vez hice una práctica sobre construir un array usando mi propio código en C++ jaja, sufrí con eso pero lo logré. Algo importante a tener en cuenta aquí es, aunque estamos usando una clase JavaScript, internamente estamos usando un JSON (el cual permite guardar pares clave-valor), por lo que realmente nuestro array es un JSON, pero a fines prácticos y de entender cómo funciona un array, la práctica viene genial!
.
Obviamente, JavaScript ya tiene implementada una clase nativa llamada Array (la cual tú puedes extender si así lo deseas, en mi perfil hay un tutorial sobre cómo hacerlo)
.
Les dejo un enlace a la documentación de los arreglos de JavaScript por si quieren ver qué otros métodos interesantes tiene:
Code runner nos permite correr archivos individuales de una manera simple, podemos dar click derecho dentro de nuestro código y darle en run code, automáticamente se te abrirá una consola con el resultado de tu código, también te habilita un botón de play que de igual forma te permite correr el código ✨
Si conocen la sintaxis for..of, se van a dar cuenta que el código que estamos haciendo aquí para emular un arreglo nos lanzaría un error puesto que las instancias de MyArray no son iterables.
!El output de la terminal diciendo que no puede iterar myArray pues no es un iterable
Por lo que actualmente, con el código de la clase, sólo podríamos iterar nuestro arreglo haciendo algo así:
for (let i = 0; i < myArray.length; i++) {
console.log(myArray.get(i))
}
Pero hacerlo funcionar con la sintaxis de for..of es muy sencillo, sólo agregue este método en la clase y ya puedo hacer uso del for..of. Así que en la clase MyArray, podemos agregar el siguiente método:
class MyArray {
// ...otros métodos...
*[Symbol.iterator]() {
let index = 0;
while (index < this.length) {
yield this.data[index++];
}
}
}
Y cuando lo vayamos a usar con la instancia, podemos hacerlo ya de la siguiente forma:
const myArray = new MyArray();
myArray.push("Uno");
myArray.push("Dos");
myArray.push("Tres");
for (const item of myArray) {
console.log(item);
}
// Output:
// Uno
// Dos
// Tres
Si quieren saber mas sobre iterables y generadores (yield syntax), no duden en dejarme comentarios, con muchísimo gusto se los resolveré.
BONUS: Usando la sintaxis que puse puede traer algunos problemas en caso de que no tengas un bundler o no transpiles el código. ¿Sabes el motivo de los posibles problemas? ¿Cómo resolver los problemas? ¿En caso de no poder usar un bundler, de que otra forma implementarías sin usar yield?
