Objetos de JavaScript
Introducción a los objetos en 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 varios elementos. Cada elemento dentro de esta caja se almacena en un pequeño compartimento etiquetado con un nombre (lo llamamos nombre de propiedad), y el elemento en sí es el valor. Por ejemplo, si tenemos una caja que representa un libro, podría tener compartimentos etiquetados como "título", "autor" y "número de páginas", con cada compartimento conteniendo la información respectiva sobre el libro.
Creación de objetos
Usando literales de objeto
Este es un método directo donde defines el objeto y sus propiedades directamente usando llaves {}:
En este ejemplo, user es un objeto que tiene dos propiedades: name y age. Puedes ver inmediatamente qué contiene el objeto, lo que hace que este método sea muy transparente y fácil de usar.
Usando la sintaxis new Object()
Alternativamente, puedes comenzar con un objeto vacío y luego agregar propiedades una por una:
Este método implica primero crear un objeto vacío (user) y luego agregar propiedades (name y age). Es útil cuando las propiedades del objeto dependen de lógica condicional o cuando las propiedades se determinan en tiempo de ejecución.
¿Por qué son importantes los objetos?
Ahora que hemos introducido los objetos en JavaScript, podrías preguntarte sobre su importancia práctica. Exploraremos por qué dominar los objetos en JavaScript es esencial para cualquiera que comience su camino en el desarrollo web.
- Organización: Los objetos te ayudan a mantener los datos relacionados juntos, haciendo que tu código sea más limpio y fácil de entender. En lugar de tener muchas variables separadas, puedes agrupar los datos relacionados en un solo objeto.
Este objeto book mantiene toda la información relacionada con el libro ordenadamente organizada bajo una sola variable.
- Reutilización: Una vez que creas un objeto, puedes reutilizarlo en todo tu código. Esto simplifica la gestión de datos y funcionalidad comunes.
El objeto user se puede pasar 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 los valores de las 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 utilizando los datos almacenados en el objeto.
El objeto person tiene un método greeting que utiliza sus propios datos para generar un saludo. Es posible que te preguntes sobre la palabra clave this en este ejemplo, para lo cual puedes encontrar más información en nuestro artículo sobre la palabra clave this en JavaScript.
- Prototipos: Cada objeto en JavaScript tiene un prototipo. Un prototipo es un objeto plantilla del cual el objeto hereda métodos y propiedades. Esto permite modelos de herencia potentes.
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 notación de punto o notación de corchetes.
Acceso a propiedades
user.name accede a la propiedad name usando notación de punto, que es directa y fácil de leer. user["age"] usa notación de corchetes, lo cual es beneficioso 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 objeto usando Object.keys() y Object.values():
Estos métodos son útiles para iterar sobre las propiedades de un objeto o convertirlas en arrays.
Modificación de propiedades
También puedes cambiar las propiedades de un objeto o agregar nuevas:
El ejemplo muestra cómo agregar una nueva propiedad booleana (isAdmin), cambiar el valor de una propiedad existente (name) y eliminar una propiedad (age). Esto demuestra la naturaleza mutable de los objetos en JavaScript.
Let vs Const con objetos
Let
Usar let permite reasignar el objeto a un nuevo objeto. Esta flexibilidad es útil cuando todo el objeto necesita ser reemplazado.
Const
Con const, puedes modificar las propiedades del objeto, pero no puedes asignar un nuevo objeto a la variable. Esto asegura que la referencia al objeto permanezca constante.
Desestructuración de objetos y operador rest
Desestructuración
La desestructuración te permite extraer propiedades de un objeto en variables separadas:
Esta sintaxis extrae las propiedades firstName, lastName y age del objeto person en variables individuales, simplificando el acceso a estas propiedades.
Operador rest
El operador rest (...) se utiliza para recopilar las propiedades restantes que no han sido extraídas:
Después de extraer age, el operador rest recopila las propiedades restantes en un nuevo objeto 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 objeto:
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.
Conclusión
Los objetos en JavaScript proporcionan una manera estructurada, eficiente y poderosa 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 crucial para cualquiera que busque avanzar en sus habilidades de JavaScript.
Práctica
What are the ways to create an object in JavaScript?