Objetos en JavaScript

Imagina que tienes un automóvil y deseas realizar un seguimiento de su color, marca, modelo y kilometraje. Podrías crear una variable para cada una de estas propiedades:

const carColor = 'rojo'
const carMake = 'Tesla'
const carModel = 'Cybertruck'
const carMileage = 30

¿Pero qué pasaría si tuvieras 10 coches? Tendrías que crear 4 variables para cada coche, lo que te daría 40 variables en total. ¿Y si quisieras añadir una nueva propiedad como el tipo de combustible que utiliza el coche? Tendrías que crear diez nuevas variables. A medida que sigas creando variables, será más difícil saber cuáles están relacionadas entre sí o a qué coches pertenecen.

Con los objetos de JavaScript, puedes agrupar datos relacionados en una sola variable. Entonces, en lugar de crear cuatro variables diferentes para tu primer automóvil, puedes crear una que almacene las cuatro propiedades. Y si deseas agregar una nueva propiedad, puedes hacerlo sin crear una nueva variable. Así es como se vería usar un objeto para almacenar los datos de tu automóvil:

const myCar = {
    color: 'rojo',
    make: 'Tesla',
    model: 'Cybertruck',
    mileage: 30,
}

En el ejemplo anterior, creamos una variable llamada myCar y le asignamos un objeto. Reconocerás los objetos por las llaves que los rodean, seguidas de una lista de pares clave-valor. Cada par clave-valor es una propiedad del objeto. En nuestro ejemplo, la primera propiedad es el color del coche. Su clave es el color y el valor, 'rojo'. A diferencia de una declaración de variable, la clave y el valor están separados por dos puntos y una coma separa cada propiedad.

Para acceder a una propiedad de un objeto, puede utilizar la notación de puntos o la notación de corchetes. La notación de puntos es la forma más común de acceder a las propiedades. Primero, escribe el nombre del objeto, seguido de un punto y luego el nombre de la propiedad. Así es como usarías la notación de puntos para acceder al valor de la propiedad de color:

console.log(myCar.color)
// Salida: 'rojo'

Y así es como usarías la notación entre corchetes:

console.log(myCar['color'])

La notación entre corchetes es útil cuando deseas acceder a una propiedad cuyo nombre está almacenado en una variable. Por ejemplo, creemos una variable llamada propertyName y le asignaremos la cadena 'color':

const propertyName = 'color'
console.log(myCar[propertyName])
// Salida: 'rojo'

Reglas y pautas para la creación de objetos

Al crear objetos, hay algunas cosas a tener en cuenta:

Los nombres de propiedad de un objeto deben ser únicos

Varias propiedades pueden tener el mismo valor, pero si intentas crear una propiedad con el mismo nombre que una propiedad existente, la nueva propiedad anulará la anterior. Además, si un objeto tiene varias propiedades con el mismo nombre, sólo se utilizará la última.

const myFavoriteBook = {
    title: 'El Hobbit',
    title: 'El Señor de los Anillos',
}
 
console.log(myFavoriteBook.title)
// Salida: 'El señor de los Anillos'

Los nombres de las propiedades deben ser cadenas

Cuando utilizas un nombre que no es una cadena como nombre de propiedad, se convertirá en una cadena. Por ejemplo, el siguiente código creará una propiedad denominada '1':

const myFavoriteColors = {
    1: "violeta"
}
 
console.log(myFavoriteColors.1)
// Salida: SyntaxError

Intentar acceder a la clave 1 usando la notación de puntos generará un error de sintaxis porque el número 1 no es una clave válida y se ha convertido a la cadena '1'. En este caso, puedes utilizar la notación entre corchetes para acceder:

console.log(myFavoriteColors['1'])
// Salida: 'violeta'

Los identificadores de JavaScript no válidos deben estar entre comillas

Las claves de objeto pueden ser cualquier cadena, incluida una cadena vacía. Sin embargo, si la clave es una cadena que no es un identificador de JavaScript válido, debe estar entre comillas. Por ejemplo, agregar espacios a una clave generará un error de sintaxis:

const myFavoriteMeal = {
    plate type: "Cerámica"
}
// Salida: SyntaxError

Pero encerrar la clave entre comillas la convertirá en un nombre de propiedad válido:

const myFavoriteMeal = {
    "plate type": "Cerámica"
    "": "Válido pero no recomendado"
}
 
console.log(myFavoriteMeal["plate type"])
// Salida: "Cerámica"
 
console.log(myFavoriteMeal[""])
// Salida: "Válido pero no recomendado"

Observa que utilizamos notación entre corchetes para acceder a la propiedad. No puedes usar la notación de puntos cuando la clave contiene espacios u otros caracteres no válidos:

const myFavoriteCar = {
    'engine*type': 'Eléctrico',
}
 
console.log(myFavoriteCar.engine * type)
// Salida: NaN
 
console.log(myFavoriteCar['engine*type'])
// Salida: "Eléctrico"

Los nombres de las propiedades distinguen entre mayúsculas y minúsculas

Recuerde que JavaScript es un lenguaje que distingue entre mayúsculas y minúsculas. Esto también se aplica a las propiedades de los objetos. Por ejemplo, el siguiente código creará dos propiedades, una denominada 'title' y otra llamada 'Title':

const myFavoriteMovie = {
    title: 'Titanic',
    Title: 'El Rey León',
}
 
console.log(myFavoriteMovie.title)
// Salida: "Titanic"
 
console.log(myFavoriteMovie.Title)
// Salida: "El Rey León"

Al igual que con las variables, es una buena práctica utilizar camelCase para los nombres de propiedades para que el estilo de tu código sea consistente y fácil de leer.

Los valores de propiedad pueden ser cualquier expresión JavaScript válida

El valor de una propiedad puede ser cualquier expresión JavaScript válida, incluida una función. Cuando una función se usa como valor de propiedad, se llama método, razón por la cual hemos estado usando el término "método" cuando nos referimos a funciones incorporadas de JavaScript como console.log(). Creemos un objeto con un método llamado sayHello:

const person = {
    name: 'Esdocu',
    sayHello: function () {
        console.log('¡Hola! Mi nombre es ' + this.name)
    },
}
 
person.sayHello()
// Salida: ¡Hola! Mi nombre es Esdocu

En el ejemplo anterior, creamos un objeto llamado person con una propiedad name y un método llamado sayHello. El método sayHello usa la palabra clave this para acceder a la propiedad name del objeto. Cuando utilizas la palabra clave this dentro de un método, se refiere al objeto en el que se llama el método. En este caso, se refiere al objeto person.

También puedes usar una función de flecha como método, pero la palabra clave this no funcionará de la misma manera, sino que su valor estará determinado por el contexto en el que se llama al método:

const person2 = {
    name: 'Linda Chima',
    sayHello: () => {
        console.log('¡Hola! Mi nombre es ' + this.name)
    },
}
 
person2.sayHello()
// Salida: ¡Hola! Mi nombre es undefined

La palabra clave this no funciona de la misma manera que el primer ejemplo porque se usa en una función de flecha. En este caso, esto se refiere al objeto global, que no tiene una propiedad name. Esto puede resultar confuso, por lo que que estos casos es mejor evitar las funciones de flecha.

Agregar, modificar y eliminar propiedades

Puedes agregar nuevas propiedades a un objeto usando notación de puntos o corchetes. Creemos un nuevo objeto llamado estudiante y agreguemos una nueva propiedad, gender:

const student = {
    name: 'Juan',
    age: 17,
}
 
student.gender = 'Masculino'
 
console.log(student)
// Salida: { name: "Juan", age: 17, gender: "Masculino" }

A continuación se explica cómo utilizar la notación entre corchetes para agregar una nueva propiedad:

student['grade'] = 12
 
console.log(student)
// Salida: { name: "Juan", age: 17, gender: "Masculino", grade:12}

También puedes utilizar la notación de puntos y corchetes para modificar una propiedad existente:

student.age = 18
student['grade'] = 13
 
console.log(student.age) // Salida: 18
console.log(student.grade) // Salida: 13

JavaScript tiene un método Object.defineProperty() para agregar una nueva propiedad a un objeto. El método Object.defineProperty() es una forma de definir o modificar una propiedad en un objeto. Se utiliza para controlar el comportamiento de una propiedad y hacerla de solo lectura (no se puede modificar), no enumerable (no se puede iterar) o no configurable (no se puede eliminar ni modificar). A continuación se explica cómo usarlo para agregar una nueva propiedad a un objeto:

Object.defineProperty(student, 'school', { 
    value: 'Universidad Nacional',
    writable: false,
    enumerable: true,
    configurable: true,
})
 
console.log(student)

Salida:

{
    name: "Juan",
    age: 18,
    gender: "Masculino",
    grade: 13,
    school: "Universidad Nacional"
}

El primer argumento es el objeto sobre el que agregar la propiedad. El segundo argumento es el nombre de la propiedad. El tercer argumento es un objeto que contiene los atributos de la propiedad. El atributo value es obligatorio y especifica el valor de la propiedad. Los atributos writable, enumerable y configurable son opcionales. Por defecto serán false si no los especificas. Observa que configuramos el atributo writable de la propiedad en falso, por lo que cambiar su valor no funcionará:

student.school = 'Havard University'
 
console.log(student.school)
// Salida: "Universidad Nacional"

Para eliminar una propiedad, puedes utilizar la palabra clave delete:

delete student.school
 
console.log(student.school)
// Salida: undefined

Intentemos usar Object.defineProperty() para agregar una nueva propiedad al objeto de estudiante que no se puede eliminar:

Object.defineProperty(student, 'language', {
    value: 'Inglés',
    writable: true,
    enumerable: true,
    configurable: false,
})
 
console.log(student.language)
// Salida: "Inglés"
 
delete student.language
 
console.log(student.language)
// Salida: "Inglés"

El atributo configurable está establecido en falso, por lo que la propiedad language no se puede eliminar.

Object.prototype

En JavaScript, cada objeto tiene un prototipo. Cuando creas un objeto, hereda un prototipo, que es un objeto que contiene otras propiedades y métodos integrados que puedes usar en el objeto principal. Por ejemplo, cada objeto tiene un método toString() que devuelve una representación de cadena del objeto, aunque no lo agregues tú mismo:

const computerInfo = {
    brand: 'Apple',
    model: 'MacBook Pro',
    color: 'Silver',
}
 
console.log(computerInfo.toString())
// Salida: [object Object]

La representación de cadena de un objeto es [object Object]. Si deseas obtener una representación de cadena de un objeto que contiene las propiedades del objeto, puedes utilizar el método integrado JSON.stringify():

JSON.stringify(computerInfo)
// Salida: '{"brand":"Apple","model":"MacBook Pro", "color":"Silver"}'

Para acceder a todas las propiedades y métodos del prototipo de un objeto, puedes utilizar el método integrado Object.getPrototypeOf():

Object.getPrototypeOf(computerInfo)
 
// Salida: {propertyIsEnumerable: f, toString: f, ...}

El método Object.getPrototypeOf() devuelve un objeto que contiene todas las propiedades y métodos del prototipo del objeto. También puedes usarlo para agregar nuevas propiedades y métodos al prototipo de un objeto:

Object.getPrototypeOf(computerInfo).isExpensive = true
 
console.log(computerInfo.isExpensive)
// Salida: true

Métodos de Object

Hay otros métodos disponibles en el objeto Object integrado que puedes utilizar para agregar, modificar y recuperar datos de cualquier objeto. Ya has visto el método Object.defineProperty(). Exploremos algunos otros métodos útiles.

Object.keys()

El método Object.keys() devuelve un array de los nombres de propiedades enumerables de un objeto determinado. Consigamos las claves del objeto computerInfo:

Object.keys(computerInfo)
 
// Salida: ["brand", "model", "color"]

Object.values()

El método Object.values() devuelve un array de los valores de propiedad enumerables de un objeto determinado:

Object.values(computerInfo)
 
// Salida: ["Apple", "MacBook Pro", "Silver"]

Object.entries()

El método Object.entries() devuelve un array de pares de propiedades enumerables [clave, valor] de un objeto determinado:

Object.entries(computerInfo) 2
// Salida: [["brand", "Apple"], ["model", "MacBook Pro"],
// ["color", "Silver"]]

En el valor de retorno, cada elemento es un array que contiene el nombre y el valor de la propiedad.

Object.assign()

El método Object.assign() copia todas las propiedades propias enumerables de uno o más objetos de origen a un objeto de destino. Devuelve el objeto de destino modificado. Creemos un nuevo objeto llamado newComputerInfo y copiemos en él las propiedades del objeto computerInfo:

const newComputerInfo = Object.assign({}, computerInfo)
 
console.log(newComputerInfo)
// Salida: {brand: "Apple", model: "MacBook Pro", color: "Silver"}

Object.freeze()

El método Object.freeze() congela un objeto para que no pueda modificarse. Congelemos el objeto computerInfo e intentemos modificarlo:

Object.freeze(computerInfo)
 
computerInfo.brand = 'Dell'
 
console.log(computerInfo.brand)
// Salida: "Apple"

La propiedad brand del objeto computerInfo no se puede modificar porque está congelada.

Object.seal()

El método Object.seal() sella un objeto, evitando que se le agreguen nuevas propiedades y marcando todas las propiedades existentes como no configurables. Sellemos el objeto computerInfo e intentemos agregarle una nueva propiedad:

Object.seal(computerInfo)
 
computerInfo.price = 200000
 
console.log(computerInfo.price)
// Salida: undefined

Estos son los métodos más comunes en el objeto Object, pero puedes encontrar más en la documentación de MDN (opens in a new tab).

Comprender cómo utilizar estos métodos es esencial para dominar los objetos en JavaScript. Así que asegúrate de seguir practicando hasta que te sientas cómodo con ellos.

Te encontrarás usando mucho objetos. Son una parte importante de JavaScript y es casi imposible crear aplicaciones sin agrupar datos relacionados en objetos. Ayudan a que tu código esté organizado, sea fácil de leer y mantenible.

Desestructuración de objetos

La desestructuración de objetos es otra forma de acceder a las propiedades de un objeto. Con la desestructuración, podemos extraer valores de un objeto y asignarlos a variables con el mismo nombre que las propiedades del objeto. Se hace encerrando las propiedades entre llaves {} en el lado izquierdo del operador de asignación =.

Veamos un ejemplo. Primero, crearemos un objeto que almacene información sobre un asistente a una conferencia:

const attendee = {
    name: 'Juan Perez',
    age: 30,
    email: '[email protected]',
    ticketType: 'VIP',
}

Ahora, accedamos a las propiedades del objeto attendee usando la desestructuración:

const { name, age, email, ticketType } = attendee
console.log(name)
// Salida: "Juan Perez"
 
console.log(age)
// Salida: 30
 
console.log(email)
// Salida: "[email protected]"
 
console.log(ticketType)
// Salida: "VIP"

No tenemos que desestructurar todas las propiedades del objeto a la vez. Podemos desestructurar solo las propiedades que necesitamos:

const { name } = attendee

También podemos asignar valores preterminados a las variables en caso de que el objeto no tenga la propiedad:

const { name, isPaid = false } = attendee
 
console.log(isPaid)
// Salida: false

Podemos asignar un nombre diferente a la variable usando dos puntos : y el nuevo nombre después del nombre de la propiedad. Esto es útil cuando queremos evitar conflictos de nombres:

const { name: attendeeName } = attendee
 
console.log(attendeeName)
// Salida: "Juan Perez"

Arrays de desestructuración

También podemos desestructurar arrays de manera similar. Creemos un array que almacene los nombres de los asistentes a una conferencia:

const attendeeNames = [
    'Juan Perez',
    'Ramón Pereira',
    'María Gutierrez',
    'Rita Martinez',
]

Para desestructurar el array, encerramos los elementos entre corchetes [] en el lado izquierdo del operador de asignación =. Dado que los elementos de un array no tienen nombre, solo podemos desestructurarlos en el orden en que aparecen en el array. Entonces el primer elemento de el array se asignará a la primera variable, el segundo elemento a la segunda variable, y así sucesivamente. Desestructuramos el array de nombres de asistentes:

const [
    firstAttendee,
    secondAttendee,
    thirdAttendee,
    fourthAttendee,
] = attendeeNames
 
console.log(firstAttendee)
// Salida: "Juan Perez"
 
console.log(thirdAttendee)
// Salida: "María Gutierrez"

También podemos desestructurar solo los elementos que necesitamos omitiendo los elementos que no necesitamos con comas. Saltemos el segundo elemento de el array:

const [firstAttendee, , thirdAttendee] = attendeeNames

La desestructuración de objetos y arrays puede hacer que el código sea más legible y conciso al simplificar el proceso de extraer valores de objetos y arrays y asignarlos a variables. Dicho esto, el uso o no de la desestructuración de objetos y arrays depende del caso de uso específico y de las preferencias personales. En algunos casos, puede ser innecesario, pero en la mayoría de los casos en los que reutilizas propiedades de objetos o las asignas a variables, es una buena idea considerar la desestructuración.