Los objetos en Javascript son una parte esencial de su ecosistema. Son, en esencia, información estructurada que todas las páginas web usan para mostrarte datos en infinidad de formatos. Tu lista de notificaciones, los datos de esas zapatillas que estuviste viendo en aquella tienda online o tu lista de vídeos favoritos se resuelven, todos ellos, a través de objetos.
Estas informaciones estructuradas a las que llamamos objetos no son más que variables a las que asignamos, entre llaves, una colección de propiedades (características del objeto) y/o métodos (capacidades del objeto, acciones que puede realizar), aunque como veremos en este artículo tanto unos como otros son las denominadas claves del objeto.
Tal es la importancia de los objetos en Javascript, que casi la totalidad de su núcleo se compone de ellos. Podemos atender a dos tipos de objetos: los que están definidos de forma estándar (como el objeto window, el document o los objetos de fecha) y los personalizados. Estos últimos los podemos crear y diseñar libremente, determinando así tanto su nombre como sus propiedades y sus métodos.
Estos objetos son los denominados objetos de notación literal, más conocidos como objetos literales. Este nombre se debe a que los valores de cada propiedad o método son indicados de forma, valga la redundancia, literal. Comprender de forma sólida cómo trabajar con estos objetos es imprescindible para adentrarte en el paradigma de la Programación Orientada a Objetos, una parte tan esencial como divertida en nuestro lenguaje.
¡Vamos allá!
Declaración de un objeto literal
Declarar un objeto literal supone crearlo, normalmente, sobre una variable. La estructura de un objeto literal está limitada por llaves, donde se encapsulan las claves asignándoles un valor literal, en un formato clave : valor.
Veamos un ejemplo de un objeto almacenado en la constante person, con una clave name de valor Laura:
const person = {
name: `Laura`
}Los valores que asociamos a cada clave pueden ser datos de cualquier tipo: strings (es decir, textos como Laura en el anterior ejemplo), booleanos, numéricos, otros objetos… Es según el valor que le asociemos a cada clave, que denominamos a esa clave propiedad (cuando le asociamos como valor cualquier tipo de dato, excepto una función) o método (cuando asociamos como valor una función).
Veamos el mismo ejemplo de antes, dotándolo ahora de un método:
const person = {
name: `Laura`,
shout: function() {
console.log(`¡Laura está gritando!`)
}
}Este objeto tiene por tanto dos claves: name y shout. Los valores asociados a cada una de ellas nos permiten reconocerlas como una propiedad (name) y un método (shout). ¡Sencillo!
Pero, ¿cómo podemos extraer los datos contenidos en un objeto para usarlos más adelante? Pues bien, accedámoslo.
Acceso a un objeto literal
Como ya hemos visto, dentro de los objetos podemos encontrar claves con valores, denominándose métodos cuando estos valores sean funciones, y propiedades cuando sean cualquier otro tipo de dato.
Podemos acceder a las propiedades de un objeto literal con tres objetivos:
Extraer valores.
Actualizar valores.
Incluir nuevas claves con sus correspondientes valores.
En los tres casos haremos uso de la denominada notación del punto, que nos permitirá indicar sobre qué clave acceder.
Vamos allá:
Para extraer un valor de un objeto, basta con acceder a la clave donde se encuentra. Esta técnica se conoce también como un acceso getter (de obtener):
const thePersonName = person.name
console.log(thePersonName) // Logueará el valor LauraPara actualizar un valor de un objeto (setter) también realizaremos una asignación, pero esta vez sobre la clave cuyo valor deseamos actualizar:
person.name = `Marina`
console.log(person.name) // Logueará el valor Marina Para incluir una nueva clave con su correspondiente valor, podemos hacerlo desde fuera del objeto tal y como haríamos para actualizar el valor de una de las claves existentes. La diferencia es que haremos la asignación sobre una clave que no existía previamente en el objeto:
person.age = 30
console.log(person.age) // Logueará el valor 30 Asimismo, además de acceder a las propiedades de un objeto podemos acceder a sus métodos con el objetivo de invocarlos, haciendo así que se ejecuten las instrucciones declaradas dentro de la función que corresponda con la clave indicada:
person.shout() // Logueará el valor ¡Laura está gritando! La palabra clave this
Es común necesitar acceder a valores de propiedades desde los métodos de un mismo objeto. Por ejemplo, nuestro objeto inicial presenta un problema importante: su método shout() siempre muestra el mismo mensaje: ¡Laura está gritando!
Vamos a pensar: ¿Qué mostrará el console.log() asociado al método que invocamos al final de este código?
const person = {
name: `Laura`,
shout: function() {
console.log(`¡Laura está gritando!`)
}
}
person.name = `Sergio`
person.shout()Efectivamente, a pesar de que la clave name del objeto ya no es Laura sino Sergio, seguiremos viendo en la consola ¡Laura está gritando!. Es aquí donde entra en juego la palabra clave this, con la que podemos acceder a valores de otras propiedades del mismo objeto.
Un pequeño cambio en la declaración del objeto evitará la situación anterior:
const person = {
name: `Laura`,
shout: function() {
console.log(`${this.name} está gritando!`)
}
}
person.name = `Sergio`
person.shout() // Logueará el valor ¡Sergio está gritando! De esta forma garantizamos la reusabilidad de nuestro objeto, que siempre hará uso del valor actual de la propiedad name cuando su método shout() sea invocado.
Con esta información ya puedes adentrarte en el mundo de los objetos de Javascript creando, por ejemplo, un objeto person con tus propios datos, o uno bajo el nombre car que recoja las características de tu modelo de coche favorito. ¡A por ello!
