Objetos Javascript

Definiendo Objetos JavaScript

Generalmente, JavaScript es conocido como un lenguaje de Programación Orientada a Objetos. Por lo tanto, en JavaScript, los objetos son los tipos de datos y formas más importantes. Son completamente diferentes de los tipos de datos primitivos en JavaScript. Como se mencionó en el capítulo “Tipos de datos”, hay siete tipos de datos en JavaScript, seis de los cuales se llaman “primitivos” ya que sus valores incluyen una sola cosa (puede ser un número, una cadena, etc.).

A diferencia de los tipos de datos, utilizamos objetos para almacenar colecciones con clave de datos diferentes y entidades más complicadas. En JavaScript, los objetos se incluyen en todos los aspectos del lenguaje, por lo que debes aprenderlos tan pronto como comiences a estudiar el lenguaje.

Los objetos se crean con corchetes de figura {…} y deben tener una lista de propiedades. La propiedad se conoce como “clave: valor”, en el que el clave o el nombre de la propiedad es una cadena y el valor puede ser cualquier cosa.

Puedes crear un objeto vacío ejecutando una de las siguientes sintaxis:

let user = new Object(); // "object constructor" syntax
let user = {}; // "object literal" syntax

Por regla general, se utilizan corchetes de figura {…}. Esta declaración se llama literal de objeto.

Propiedades y Literales

Puedes introducir instantáneamente propiedades en esos corchetes como pares de “clave: valor”, así:

Javascript create object

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; console.log(site);

site tiene una propiedad: el nombre "name" y el valor "W3Docs".

Los valores de las propiedades se pueden acceder utilizando la notación de punto, de la siguiente manera:

Javascript get property values of the object

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; // get property values of the object: console.log(site.name); // W3Docs

Puede tener cualquier tipo de valor. Por ejemplo:

Javascript object add a property

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; site.haveAdmin = true; console.log(site);

El operador delete se utiliza para eliminar una propiedad. Por ejemplo:

Javascript object delete a property

let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" haveAdmin: true }; delete site.name; console.log(site);

Los nombres de propiedades Multiword también se pueden usar. Pero deben estar entre comillas así:

Javascript object multiword a property

let user = { site: "W3Docs", "teaches JS": true // multiword property name must be quoted }; console.log(user);

Finalice la última propiedad de la lista con una coma:

Javascript objects

let site = { name: "W3Docs", haveAdmin: true, } console.log(site);

Corchetes Cuadrados

El acceso por punto no funciona para propiedades de varias palabras. Aquí hay un ejemplo:

// this would give a syntax error
site.teaches JS = true

El punto necesita la clave para ser un identificador de variable válido. Eso significa sin limitaciones, como espacios, etc.

Puedes utilizar una alternativa notación de corchetes cuadrados. Funcionará con cualquier cadena. Por ejemplo:

Javascript objects with square bracket

let site = {}; // set site["teaches JS"] = true; // get console.log(site["teaches JS"]); // true // delete delete site["teaches JS"]; console.log(site);

Con la ayuda de los corchetes cuadrados, puedes mantener el nombre de la propiedad como resultado de cualquier expresión así:

Javascript objects

let site = {}; let key = "teaches JS"; // same as site["teaches JS"] = true; site[key] = true; console.log(site);

En este caso, la variable key puede medirse en tiempo de ejecución o basarse en la entrada del usuario. Luego puedes usarlo para acceder a la propiedad de la siguiente manera:

Javascript object properties

let site = { name: "W3Docs", }; let key = prompt("What do you want to know about the site?", "name"); console.log(site[key]); // If enter "name", you will see W3Docs

Tenga en cuenta que no puedes utilizar la notación de punto de la misma manera:

Javascript objects can’t use the dot notation

let site = { name: "W3Docs" }; let key = "name"; console.log(site.key) // undefined

Propiedades Calculadas

También se utilizan corchetes cuadrados en un literal de objeto. Se conoce como propiedades calculadas.

Aquí hay un ejemplo:

Javascript the object's property name is taken from the variable

let car = prompt("Which car do you like?", "bmw"); let color = { [car]: "white", // the property's name is taken from the variable car }; console.log(color.bmw); // white, if car="bmw"

También puedes utilizar expresiones más complicadas en corchetes cuadrados, así:

Javascript object's more complicated expressions in square brackets

let car = 'bmw'; let carColor = { [car + 'Color']: 'white' // carColor.bmwColor = 'white' }; console.log(carColor.bmwColor); // white

Entonces, cuando el nombre de la propiedad es simple y conocido, puedes usar puntos. Y cuando necesites algo más complicado, entonces recurre a los corchetes cuadrados.

Notación Abreviada para el Valor de la Propiedad

En el código real, a menudo se utilizan variables existentes como valores del nombre de la propiedad.

Aquí hay un ejemplo:

Javascript object's property name values

function makeCar(name, model) { return { name: name, model: model, // ...other properties }; } let car = makeCar("BMW", "M5"); console.log(car.name); // BMW

function makeCar(name, model) {
  return {
    name, // same as name: name
    model // same as model: model
    // ...
  };
}

Se pueden utilizar tanto propiedades normales como formas abreviadas en el marco del mismo proyecto. Se verá así:

Javascript objects

let car = { name, // same as name:name model: "M5" }; console.log(car);

El bucle “for...in”

El bucle “for...in” loop es una forma única de un bucle. Es totalmente diferente del for(;;).

La sintaxis es la siguiente:

for (key in object) {
  // executes the body for each key among object properties
}

Vamos a ver un ejemplo, donde se muestran todas las propiedades de car:

Javascript objects for in loop

let car = { name: "Mercedes", model: "C-Class Cabriolet", toDrive: true }; for (let key in car) { // keys console.log(key); // name, model, toDrive // values for the keys console.log(car[key]); // Mercedes, C-Class Cabriolet, true }

Tenga en cuenta que todas las construcciones de “for” dan la oportunidad de declarar la variable de bucle en el bucle. Por ejemplo, let key en el ejemplo dado anteriormente. También se puede utilizar otro nombre de variable en lugar de la key.

Comprobación de Existencia

Una de las ventajas más significativas de los objetos es que da acceso a cualquier propiedad. No ocurrirá ningún error, en caso de que la propiedad no exista. Si accedes a una propiedad inexistente, se te devolverá a undefined. Esto brinda una oportunidad única para verificar si la propiedad existe o no:

Javascript objects property is undefined

let car = {}; console.log(car.noSuchProperty === undefined); // true means "no such property"

También puedes utilizar un operador único "in" para comprobar la existencia de una propiedad. Para ejecutarlo, utiliza la siguiente sintaxis:

"key" in object

Copiar por Referencia

Una de las principales diferencias objetos a través de primitivos es que pueden almacenarse y copiarse por referencia.

Puedes asignar/copiar valores primitivos (cadenas, números, booleanos) como un valor entero. Solo mira este ejemplo:

Javascript primitive copy by value

let message = "Welcome to W3Docs!"; let phrase = message; console.log(phrase);

En consecuencia, tendrás dos variables independientes; cada una de ellas almacenará la cadena “¡Bienvenido a W3Docs!”.

Los objetos no funcionan así.

Una variable almacenará no el objeto sino su “dirección en memoria”. En otras palabras, solo almacena una referencia a él.

Por ejemplo:

Javascript object

let car = { name: "BMW" }; console.log(car);

Donde está el objeto en la memoria, y la variable car contiene una referencia a él. Cada vez que copias una variable de objeto, duplicas la referencia, pero el objeto no se copia.

Por ejemplo:

Javascript copy an object variable by reference

let car = { name: "BMW" }; let sportCar = car; // copy the reference console.log(sportCar);

Comparando por Referencia

En JavaScript, dos objetos se pueden considerar iguales solo en caso de que sean el mismo objeto.

Por ejemplo, dos variables son iguales cuando hacen referencia al mismo objeto:

Javascript objects comparing

let obj1 = {}; let obj2 = obj1; // copy the reference console.log(obj1 == obj2); // true, both variables reference the same object console.log(obj1 === obj2); // true

En el siguiente caso, los dos objetos independientes no pueden considerarse iguales, aunque ambos estén vacíos:

Javascript objects comparing

let obj1 = {}; let obj2 = {}; // two independent objects console.log(obj1 == obj2); // false

Const objeto

Un objeto que se proclama const puede ser modificado. Aquí hay un ejemplo:

Javascript const objects

const car = { name: "BMW" }; car.model = "M5"; // (*) console.log(car.model); // M5

Puede pensar que el (*) dará un error, pero no hay ningún error aquí. Te preguntarás por qué. La razón es que const solo puede corregir el valor de car. Solo causará un error al intentar establecer car en algo distinto a esto:

Javascript const objects

const car = { name: "BMW" }; // Error (can't reassign car) car = { name: "Mercedes" }; console.log(car);

Clon y Fusionar, Object.assign

Copiar una variable de objeto significa crear otra referencia al mismo objeto.

¿Pero qué hacer cuando necesitas duplicar el objeto?

Por supuesto, puedes clonarlo, pero no es un trabajo fácil, ya que JavaScript no tiene un método incorporado. Entonces, cada vez que necesites hacer eso, crea un nuevo objeto replicando su estructura e iterando sobre las propiedades y copiándolas en el nivel primitivo. El ejemplo es el siguiente:

Javascript objects clone

El método Object.assign se utiliza para eso, también. Solo necesitas utilizar la siguiente sintaxis:

Object.assign(dest, [src1, src2, src3...])

También se puede utilizar para fusionar varios objetos:

Javascript objects merging

En JavaScript, los objetos son mucho más poderosos de lo que puede parecer a primera vista. Este es un tema extenso, y aprenderás más sobre él en los próximos capítulos.

Hora del Cuestionario: ¡Pon a Prueba Tus Habilidades!

¿Listo para desafiar lo que has aprendido? Sumérgete en nuestros cuestionarios interactivos para una comprensión más profunda y una forma divertida de reforzar tu conocimiento.