Objetos de JavaScript
En JavaScript, los objetos son contenedores para almacenar colecciones con clave de datos y entidades más complejas. Piensa en ellos como una caja donde cada compartimento puede
Introducción a los objetos de JavaScript
En JavaScript, los objetos son elementos fundamentales que ayudan a organizar y almacenar datos. Imagina un objeto de JavaScript como una caja especial donde puedes guardar distintos elementos. Cada elemento dentro de esta caja se almacena en un pequeño compartimento etiquetado con un nombre (llamamos a esto el nombre de la propiedad), y el elemento en sí es el valor. A diferencia de los tipos de datos primitivos (como los números y las cadenas), un object es un tipo de referencia que puede agrupar muchos valores relacionados. Por ejemplo, si tenemos una caja que representa un libro, podría tener compartimentos etiquetados como "title," "author" y "number of pages," donde cada compartimento contiene la información correspondiente sobre el libro.
Creación de objetos
Uso de literales de objeto
Este es un método directo en el que defines el object y sus propiedades directamente usando llaves {}:
En este ejemplo, user es un object que tiene dos propiedades: name y age. Puedes ver de inmediato qué contiene el object, lo que hace que este método sea muy transparente y fácil de usar.
Uso de la sintaxis new Object()
Como alternativa, puedes comenzar con un object vacío y luego agregar propiedades una a una:
Este método consiste en crear primero un object vacío (user) y luego agregar propiedades (name y age). Es útil cuando las propiedades del object dependen de lógica condicional o cuando las propiedades se determinan en tiempo de ejecución.
Forma abreviada de propiedades y métodos
Cuando el nombre de una variable coincide con el nombre de la propiedad que deseas, puedes evitar la repetición con la forma abreviada de valor de propiedad. Los métodos también tienen una sintaxis más corta: puedes omitir la parte : function:
name es equivalente a escribir name: name, y greet() {} es equivalente a greet: function() {}. Ambas formas mantienen los literales de objeto concisos.
Nombres de propiedades calculados
Los nombres de las propiedades no tienen que estar codificados de forma fija. Al envolver una expresión entre corchetes [...] dentro del literal, calculas la clave en tiempo de ejecución:
Esto es especialmente útil cuando el nombre de la propiedad proviene de la entrada del usuario, un argumento de función o una constante definida en otro lugar.
Objetos anidados
El valor de una propiedad puede ser otro object, lo que te permite modelar datos estructurados y jerárquicos. Accede a valores profundos encadenando la notación de punto o la notación de corchetes:
Cada nivel es simplemente otro object, por lo que las mismas reglas de acceso se aplican en todos los niveles.
¿Por qué son importantes los objetos?
Ahora que hemos presentado los objetos de JavaScript, puede que te preguntes sobre su importancia práctica. Exploremos por qué dominar los objetos de JavaScript es esencial para quien está comenzando su camino en el desarrollo web.
- Organización: Los objetos te ayudan a mantener los datos relacionados juntos, haciendo tu código más limpio y fácil de entender. En lugar de tener muchas variables separadas, puedes agrupar datos relacionados en un único object.
Este object book mantiene toda la información relacionada sobre el libro organizada bajo una sola variable.
- Reutilización: Una vez que creas un object, puedes reutilizarlo en todo tu código. Esto simplifica la gestión de datos y funcionalidades comunes.
El object user puede pasarse a diferentes funciones como displayUserInfo sin necesidad de redefinir la información del usuario.
- Flexibilidad: Los objetos en JavaScript son muy flexibles. Puedes agregar nuevas propiedades, cambiar valores de propiedades existentes o eliminar propiedades según sea necesario.
- Funcionalidad: Los objetos también pueden contener funciones. Estas funciones (conocidas como métodos) pueden realizar acciones usando los datos almacenados en el object.
El object person tiene un método greeting que usa sus propios datos para producir un saludo. Puede que te preguntes sobre la palabra clave this en este ejemplo, sobre la que puedes encontrar más información en nuestro artículo sobre la palabra clave this en JavaScript.
- Prototipos: Cada object de JavaScript tiene un prototipo. Un prototipo es un object plantilla del que el object hereda métodos y propiedades. Esto permite crear potentes modelos de herencia.
Aquí, dog hereda de animal, por lo que tiene acceso a la propiedad isAlive definida en animal, además de su propio método bark.
Acceso y modificación de propiedades
Los objetos te permiten acceder y modificar sus propiedades usando la notación de punto o la notación de corchetes.
Acceso a propiedades
user.name accede a la propiedad name usando la notación de punto, que es directa y fácil de leer. user["age"] usa la notación de corchetes, útil cuando el nombre de la propiedad está almacenado en una variable o no es un identificador válido.
También puedes recuperar todas las claves o valores de un object usando Object.keys() y Object.values():
Estos métodos son útiles para iterar sobre las propiedades de un object o convertirlas en arrays. Para un análisis más detallado de la extracción de datos, incluido Object.entries(), consulta Object.keys, values, entries.
Verificar si una propiedad existe
Para comprobar si una propiedad existe, usa el operador in. Es más fiable que comparar con undefined, porque una propiedad puede contener legítimamente el valor undefined:
El operador in devuelve true siempre que la clave esté presente, incluso si su valor es undefined. La comprobación === undefined no puede distinguir una propiedad inexistente de una que se estableció explícitamente como undefined.
Modificación de propiedades
También puedes cambiar las propiedades de un object o agregar nuevas:
El ejemplo muestra cómo agregar una nueva propiedad boolean (isAdmin), cambiar el valor de una propiedad existente (name) y eliminar una propiedad (age). Esto demuestra la naturaleza mutable de los objetos de JavaScript.
Let vs Const con objetos
Let
Usar let permite reasignar el object a un nuevo object. Esta flexibilidad es útil cuando se necesita reemplazar el object completo.
Const
Con const, puedes modificar las propiedades del object pero no puedes asignar un nuevo object a la variable. Esto garantiza que la referencia al object permanezca constante.
Desestructuración de objetos y operador rest
Desestructuración
La desestructuración te permite extraer propiedades de un object en variables separadas:
Esta sintaxis extrae las propiedades firstName, lastName y age del object person en variables individuales, simplificando el acceso a estas propiedades.
Operador rest
El operador rest (...) se usa para recopilar las propiedades restantes que no han sido extraídas:
Después de extraer age, el operador rest recoge las propiedades restantes en un nuevo object nameDetails, que incluye solo firstName y lastName.
Atributos y métodos avanzados de propiedades
Getters y setters
Los getters y setters son funciones que controlan cómo accedes y estableces las propiedades de un object:
La propiedad fullName está controlada por un getter y un setter. El getter devuelve el nombre completo combinando firstName y lastName. El setter toma un nombre completo, lo divide en dos partes y las asigna a firstName y lastName, respectivamente.
Más allá de los getters y setters, cada propiedad también tiene atributos ocultos como writable, enumerable y configurable. Para aprender a inspeccionar y ajustar estos atributos, consulta Indicadores y descriptores de propiedades.
Conclusión
Los objetos de JavaScript proporcionan una forma estructurada, eficiente y potente de gestionar y manipular datos, lo cual es esencial para crear aplicaciones web interactivas y dinámicas. Comprender cómo utilizar los objetos de manera efectiva es fundamental para cualquier persona que desee avanzar en sus habilidades con JavaScript.