AD

¿Ya dominas lo básico? Un curso estructurado de JavaScript es la vía rápida para dar el salto.

Ver cursos de JavaScript en Udemy

Enlace de afiliado. No te cuesta nada extra.

🟨Lecciones de JavaScript
Lección 7 / 69

Trabajar con objetos

En esta lección aprenderás lo básico de los objetos en JavaScript para agrupar información relacionada. Está pensada para quien busca «uso de objetos en JavaScript» o «propiedades de un objeto en JavaScript».

Un objeto es un mecanismo para agrupar datos como pares «nombre: valor», llamados propiedades. Se crea con { nombrePropiedad: valor } y se obtiene un valor con objeto.nombrePropiedad. Si un array es «una lista de datos del mismo tipo», un objeto encaja mejor con «un conjunto de información sobre una misma cosa», como el perfil de una persona, agrupando datos relacionados.

El código de ejemplo da a un objeto llamado usuario tres propiedades —nombre, edad y aficion— y obtiene los valores con notación de punto, como usuario.nombre. En las aplicaciones web reales, la mayor parte de la información de usuarios y productos se intercambia con esta forma de objeto, y es muy habitual combinar arrays y objetos.

Un tropiezo habitual al empezar es que acceder a una propiedad que no existe no lanza error: simplemente devuelve undefined. Mucha gente se atasca pensando «no consigo el valor» sin darse cuenta de que ha cometido una errata, así que revisa bien la ortografía del nombre de la propiedad. Otro fallo común es confundir objetos con arrays e intentar acceder por número, como usuario[0].

En el desarrollo real, los datos JSON que devuelve una API se pueden manejar casi siempre directamente como objetos de JavaScript. Los objetos aparecen en la base misma del desarrollo web: por ejemplo, al agrupar los valores de un formulario de registro en un objeto antes de enviarlo al servidor.

Es habitualísimo combinar objetos y arrays: meter un array dentro de un objeto, o alinear objetos dentro de un array. Algo como «un array de usuarios, cada uno un objeto con nombre, edad y afición» es un patrón típico que aparece constantemente en el diseño de datos real.

Si quieres acceder a una propiedad de forma dinámica (usando una variable), se usa la notación de corchetes, como usuario["nombre"]. Brilla en situaciones que la notación de punto no cubre, como cuando el nombre de la propiedad no se conoce hasta el momento de ejecutar.

JavaScript
SALIDA

💡 Todo lo que pases a console.log() aparece en la salida de abajo.

Espacio publicitario (banner)
Espacio publicitario (en el artículo)