Función que crea un objeto y lo almacena en una lista en Javascript

5
(1)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

constructor javascript

Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común.

En programación todo se puede expresar mediante objetos de la misma forma que lo podemos hacer en la vida real.

A modo de repaso diremos que un objeto es un tipo de variable que nos permite definir una entidad con distintas propiedades. En esta entrada se explica con mayor profundidad y ejemplos y se repasan también todos los tipos de variables que podemos tener en JS.

En un nivel más avanzado veríamos que incluso los strings y los números son objetos pero no pensamos en ellos como tal. Tampoco hace falta llegar tan lejos.

Para una comprensión mejor del lenguaje puede resultar útil aprender a declarar y crear objetos mediante constructores.

Un constructor es un tipo especial de función que dados unos parámetros de entrada es capaz de crear un nuevo objeto.

Veamos un caso práctico en Javascript.

Constructores

Función que crea un objeto y lo almacena en una lista en Javascript 1
En la imagen anterior vemos una función de nombre «creaAlumne«.

La función pasa los parámetros nombre, apellidos, telefono, email, inscrito. Todos estos parámetros son variables de ámbito local dentro del ámbito de la función creaAlumne.

En el interior de la función se declara una variable local de tipo objeto y nombre alumne.

Si alguna vez habéis usado el this, en este ejemplo es la variable alumne quién va a robarle el protagonismo. Si nunca previamente habéis visto el this entonces no hagáis ni caso a este comentario. Tiempo habrá de aplicarlo.

A continuación declaramos el objeto con las propiedades que vemos en la imagen y siguiendo la sintaxis reservada para los objetos en javascript.

En este punto hacer especial atención a que muchos estudiantes se sienten confundidos por el hecho que en el nombre de la propiedad y las variables locales creadas en la declaración de la función haya usado el mismo nombre. Hacerlo de este modo es una práctica habitual.

Si os confunde en exceso entonces simplemente modificar los nombres y ya está.

Una vez tenemos declarado el objeto y a sus propiedades se les han asignado los valores transmitidos por las variables locales de entrada es el momento de guardar toda esta información en una lista de objetos.

La particularidad de la lista usada en el ejemplo es que es una variable declarada fuera de la función y por lo tanto de ámbito global.

Concretamente almacenamos el objeto en la última posición de la lista. También se hubiera podido hacer mediante el método push(). Pero personalmente me gusta más el .length porqué pedagógicamente es útil. El length irá muy bien cuando se aborde el DOM.¡Espero que este ejemplo os haya resultado de utilidad!  Es un ejemplo que me gusta porqué se combina el conocimiento de funciones, ámbito local y global de las variables y objetos. Así que es muy completo.

¡Si tenéis dudas o propuestas de mejora dejarlas en los comentarios!

  1. Avatar de ivan
    ivan

    gracias muy buena la página, probaré realizar los ejercicios .

    1. Avatar de Francesc Ricart

      ¡Me alegro que te haya gustado!
      saludos,

  2. Avatar de Ferran

    A ver. Entonces lo que denominaremos «constructor» se refiere concretamente a declaracion con var de la lista «alumne» dentro de la función ¿no?. Y «alumne» será el objeto creado ¿Voy bien?

    1. Avatar de Francesc Ricart

      hola!
      como yo lo entiendo constructor es la función creaAlumne() en todo su conjunto.
      alumne es una variable local de tipo objeto usado dentro de creaAlumne()
      saludos Ferran

    2. Avatar de Francesc Ricart

      Hola Ferran,

      El constructor sería la totalidad de la función. El objeto creado es «alumne» y lo guardamos dentro de una lista de nombre «altas».

      Es importante indicar que el ejemplo que se muestra en esta publicación es meramente didáctico. Hay formas más eficientes de escribir un constructor. (por ejemplo con el this pero en este punto del tutorial sería demasiado avanzado).

  3. Avatar de troy
    troy

    Hola, no comprendo por qué dices que «almacenamos el objeto en la última posición de la lista», la última posición no sería (altas.lengt-1), puesto que empieza en la posición 0? Gracias, un saludo

    1. Avatar de Francesc Ricart

      Hola troy,

      En este caso en concreto del código de la imagen lo que estamos haciendo es añadir la variable «alumne» en la posición a continuación de la última información contenida. La última información contenida es como tu indicas «atlas.length-1» y la que viene después es «atlas.length»

      Imagínate una fila de 5 personas y viene la sexta. La sexta pasa a ocupar la última posición.

      PD: Como consideración, al salir de la función la variable «alumne» se borra y vuelve a estar a disponer para volverse a usar pero la información que había contenida dentro de atlas, como es una variable global, no desaparece.

  4. Avatar de Lourdes Munguia

    Muchas gracias por compartir el conocimiento me funciono a la perfecciòn

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *