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

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

Print Friendly, PDF & Email
Función que crea un objeto y lo almacena en una lista en Javascript
Valora esta entrada
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

constructor javascript
Ejemplo de constructor en javascript

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á. Pero debéis pensar que en realidad las variables locales llevarán el contenido “pedro” o “picapiedra” o un correo electrónico.

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!

Entradas relacionadas:

Ejercicio – Generación iterativa de encabezados html
- 138
Ejercicio dónde se generan los encabezados h1 a h6 mediante javascript. Incluye solución.
Ejercicio JS – Susto emergente
- 114
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
Ejercicio – Sumas con letras
- 186
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
Ejercicio JS – Menú vertical desplegable con javascript (sin jquery)
- 276
Ejercicio práctico con solución sobre como crear un menú vertical con submenú vertical desplegable en javascript sin jquery. Incluye solución.
Como modificar el destino de todos los enlaces de una web con javascript
- 178
Ejercicio con solución de la serie ejercicios javascript puro dónde se muestra como modificar el href de todos los enlaces de una web.
Métodos javascript
- 437
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
Funciones Javascript: declaración, uso y utilidad en programación
- 688
Una función es una estructura de código que ejecuta y transforma unos inputs de entrada en un output de salida en forma de dato o acción. Hemos trabajado con funciones toda nuestra vida. Las aprendimo...
Como hacer una lista de la compra con Javascript
- 99
Ejercicio lista de la compra con Javascript. Incluye solución. Se practica la creación y eliminación de nodos, this, addEventListener, ...
Ejercicio – ¿Estamos en fin de semana?
- 156
Ejercicio dónde se resuelve un simple ejercicio mediante el uso de getDay() y se compara un switch y un if. Incluye solución.
Como añadir nuevos nodos al DOM usando Javascript
- 593
En esta entrada vemos un tutorial paso a paso sobre como añadir nuevos nodos al DOM mediante Javacript con el ejemplo de un párrafo y el de una imagen.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.