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.
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:
Yo cuando vi la materia de estructura de datos los tuve hacer tosas incluidas los arboles binarios pero en java
Te entiendo xd, cuando conocí las matrices dinámicas en C++ comencé a implementarlas en todos mis scripts, pero es bastante más difícil que en JS xdxd
Ojala degranda hiciera un remake el curso profesional de JavaScript :( le entiendo todito a degranda
A mí me gusta mucho la enseñanza del profesor del curso de Javascript profesional :D
A mi también me gusta mucho cómo enseña Sparragus c:
🚀 Extensión de VS Code recomendada para la clase
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 ✨
Es importante tener Node instalado
👉 Enlace al Marketplace
Esta extensión me gustó mucho, la conocí en el curso de ECMAScript 6+
Hola amigos , una versión con una mínima modificación a la hora de aumentar el contador de longitud , para los que les gusta simplificar jeje
!codigoArray
holas, cómo hiciste esa imagen? te quedó muy linda
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:
classMyArray{// ...otros métodos...*[Symbol.iterator](){let index =0;while(index <this.length){yieldthis.data[index++];}}}
Y cuando lo vayamos a usar con la instancia, podemos hacerlo ya de la siguiente forma:
const myArray =newMyArray();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?
Otra forma de obtener el mismo comportamiento en caso de no poder hacer uso de un bundler o no poder transpilar el codigo, puede ser: omitir el uso del generador y hacer una implementación propia usando el iterable:
Para esto debemos recordar la estructura de los iterables, la cual requiere que se haga la implementación del método next el cual se espera que se retorne un objeto con las propiedades value y done.
classMyArray{constructor(){this.length=0;this.data={};}get(index){returnthis.data[index];}push(item){this.data[this.length]= item;this.length++;returnthis.data;}[Symbol.iterator](){let index =0;return{next:()=>{return{value:this.data[index++],done: index >this.length}}}}}const myArray =newMyArray();myArray.push("Uno");myArray.push("Dos");myArray.push("Tres");for(const item of myArray){console.log(item);}
Ya con esto se puede hacer uso del for...of sin ningún problema y obetenemos el mismo resultado sin necesidad de transpilar el código
➜ ~ node arrays.js
Uno
Dos
Tres
Referencias
The itebale protocolo
function*
let iterable = [10, 20, 30];
for (let value of iterable) {
value += 1;
console.log(value);
}
// 11
// 21
// 31
me sale que mi array si es iterable °°
Hola todos, me encanto esta clase, aca un resumen visual. Lo aborde desde la perspectiva de como se llega a la solucion de usar una clase
Espectacular!
Es mas digerible una clase así y más si podemos ahondar en conceptos como los de clase, constructor, valores primitivos. This, Autoboxing, entre otros.
Recuerda que si ya usas la terminal de tu pc, o bien la integrada de VScode, puedes instalar nodemon con el comando
npm i nodemon
y poder ver los cambios en tu consola en tiempo real, sin necesidad de copiar pegar el codigo.
Si lo instales, no olvides correr el comando:
nodemon tu_archivo.js
Para matar la terminal usa Ctrl + C
#nuncaparesdeaprender
Hola Santiago, ¿sabes por qué en wsl o en la terminal de Linux nodemon se queda en escucha con un puerto?
Cuando vuelvo a ejecutar me dice que el puerto está ocupado y la única solución que encontré fue matar el proceso en ese puerto pero hacerlo a cada rato es como para node y volverlo a activar por lo cual no me ofrece la ventaja de nodemon.
Intenté de todo pero no obtuve resultados así que espero conseguir alguna respuesta. 🙂🙂
Hola! La verdad nunca me a pasado ese problema, pero si alguien en la comunidad conoce una solución, seria bueno que nos ayudaran
si quieres usar nodejs como tu entorno de desarrollo puedes usar solo un script de js y obviamente tener instalado nodejs luego de eso con el comando
node arreglo.js
tu codigo sera ejecutado, algo asi
Justo, yo también lo estoy haciendo con Node.js ;)
Cual es la diferencia entre Array y Objeto? Hubiera sido bueno empezar por Objeto xD
Gracias
Un array hereda de objeto. Casi todo en javascript herredara de objeto, asi que la diferencia son todos los metodos y comportamientos de array que no encontraras en un objeto, pero todos los metodos y funciones de objeto funcionaran en array a menos que interfieran con su comportamiento.
¡Hola! Ya te lo explicó Juan, en JavaScript básicamente todo es objetos, este es un concepto que ya deberías saber, recuerda que al inicio Diego pidió que ya te hayas pasado por ciertos cursos, esos cursos te enseñan a profundidad qué son los objetos ^^
Muy bien explicada la clase, llevo años trabajando software y paso por aquí para repasar estructuras de datos.
Lo que podría aportar es que el método push se podría hacer en dos líneas: incrementando el valor con ++ luego del uso de this.length. Se asignará el valor actual y se incrementará en 1.
Es para permitir agregar más items en el array. Si lo olvidamos, notaremos que siempre el nuevo item sobrescribe al anterior.
Una de las cosas que vi en el curso Profesional de Javascript es que TODO es un objeto.
Y viendo lo que hicimos de esta clase entiendo muchisimo mejor a lo que se refiere. Pues pudimos construir una clase tan Basica como la Array con un objeto y operaciones basicas. Estoy muy sorprendido.
Yo creería que es mejor tomar este curso antes del Curso que mencionas.
CONSTRUYENDO NUESTRO ARRAY
const array =["Diego",'Karen',"Oscar"];console.log(array);// (3)["Diego", 'Karen', "Oscar"]//Para llamar un elemento le indicamos la posicion del elemento que queremos llamararray[0]//Metodos//Push sirve para empujar un elemento a lo ultimo del arrayarray.push('xd');//El ejercicio que haremos es construir una clase para construir un array //Desde 0 que venga con el metodo de get que es para poder obtener algun elemento//El metodo de push para agregar un elemento//El metodo de get que me va a ayudar a borrar ese elemento//El metodo de pop que me va a ayudar a borrar un elemento//Y asi con cualquier metodo pero por ahora haremos los principalesclassMyArray{constructor(){this.length=0;this.data={};}//Funcion para obtener el elementoget(index){//retornamos la informacion y le damos un indicereturnthis.data[index];}//Agregar elemento al array y le pasamos por parametro el elemento que le//Vamos a agregarpush(item){//Le indicamos a la data la longitud que estamos agregando ya que //Estamos creando un nuevo elemento por lo tanto nuestro array es mas largothis.data[this.length]= item;this.length++;returnthis.data;}}//Generamos una histancia de nuestra claseconst myArray =newMyArray();
Me encanto esta clase!!!! es crear lo que utilizas cada día. }
Aprender el cómo están programadas las cosas me llama mucho la atención. Claro esto es una simulación porque simplemente estamos guardando los valores en un objeto y en el formato original (Osea no estamos guardando los bits como se hace realmente) pero sigue siendo interesante.
Se te va hacer muy comodo hacer codigos y compilarlo. Para descargarlo solo basta tener node instalado y descargar: npm i -g nodemon
Muestro una imagen de prueba para que veas como se ve:
La razón por la que creo está usando un objecto para construir el Array, es porque como se verá más adelante, es la estructura de datos más eficiente en JS (es una hash map) para poder indexar, buscar y obtener los datos. Los keys son los index que solo toman O(1) en agregarse y buscarse.