Objects en JavaScript – Declaración y acceso
Veamos un ejemplo de cómo utilizar Objects en JavaScript. Una manera de estructurar los datos de forma más clara y fácil de manejar.
Seguimos con los tutoriales de JavaScript, esta vez viendo el funcionamiento de los objects en JavaScript.
El Ejemplo
Pongamos un ejemplo que iremos complicando en futuros artículos para poder almacenar datos en JavaScript de forma estructurada y clara. Objects, nos permite hacerlo.
Necesitamos almacenar los datos de un equipo de futbol. Lo haremos en un Object llamado ‘equipo’. Los datos que almacenaremos son el nombre, el año de fundación, el nombre del estadio y por último la plantilla.
Veamos en el código cómo lo declaramos y accedemos a los datos.
El código
Fijaos cómo declaramos la variable equipo como Object() para poder trabajar con él posteriormente.
Para acceder y crear los campos del objeto lo haremos con equipo.campo
var equipo = new Object();
var textoMostrar= "";
equipo.nombre= "Sevilla FC";
equipo.fundacion= "1912";
equipo.estadio= "Sanchez Pizjuan";
equipo.plantilla = new Array();
textoMostrar += "<br />Nombre: "+ equipo.nombre;
textoMostrar += "<br />Fundación: "+ equipo.fundacion;
textoMostrar += "<br />Estadio: "+ equipo.estadio;
document.getElementById('consola').innerHTML= textoMostrar;Fijaos cómo creamos e inicializamos el nombre con equipo.nombre= «Sevilla FC». Accedemos con un . y el nombre del campo. Atentos, porque en JavaScript también podemos acceder de otras formas.
El campo/atributo que dejamos en blanco y que trataremos en otro artículo, es plantilla. Ésta, será un Array de Objects de jugadores… Lo complicaremos todo un poco más. Un Object (equipo), cuyo atributo es un Array (plantilla) que contendrá otros Objects (jugador).
Ejemplo CodePen
See the Pen JavaScript – Work with Objects – 01 by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.
Es un primer contacto con los Objects en JavaScript. No hay mucho más que explicar, la creación, inicialización y tratamiento de datos de un Object.
Si os véis capaces, podéis ampliar vuestros conocimientos de objects en el artículo donde explicamos cómo crear arrays de objects en javascript.
Más información