Propiedades del objeto JavaScript

Descubra todo lo que necesita saber sobre las propiedades de objetos de JavaScript

Objetos JavaScripttienen propiedades, que están compuestas por una etiqueta asociada a un valor.

La sintaxis literal del objeto que vimos:

const car = {

}

vamos a definir propiedades como esta:

const car = {
  color: 'blue'
}

aquí tenemos uncarobjeto con una propiedad llamadacolor, con valorblue.

Las etiquetas pueden ser cualquier cadena. Observe que no usé comillas alrededorcolor, pero si quisiera incluir un carácter no válido como nombre de variable en el nombre de la propiedad, habría tenido que:

const car = {
  color: 'blue',
  'the color': 'blue'
}

Esto significa espacios, guiones y más caracteres especiales.

Como ves, separamos cada propiedad con una coma.

Recuperar el valor de una propiedad

Podemos recuperar el valor de una propiedad usando 2 sintaxis diferentes.

El primero esnotación de puntos:

car.color //'blue'

El segundo, que es obligatorio para las propiedades con nombres no válidos, es utilizar corchetes:

car['the color'] //'blue'

Si accede a una propiedad inexistente, obtieneundefined:

car.brand //undefined

Una buena forma de verificar el valor de una propiedad pero por defecto a un valor predefinido es usar el||operador:

const brand = car.brand || 'ford'

Como se dijo, los objetos pueden tener objetos anidados como propiedades:

const car = {
  brand: {
    name: 'Ford'
  },
  color: 'blue'
}

Puede acceder a la marca utilizando

car.brand.name

o

car['brand']['name']

o incluso mezclando:

car.brand['name']
car['brand'].name

Establecer el valor de una propiedad

Como vio anteriormente, puede establecer el valor de una propiedad cuando define el objeto.

Pero siempre puedes actualizarlo más adelante:

const car = {
  color: 'blue'
}

car.color = ‘yellow’ car[‘color’] = ‘red’

Y también puede agregar nuevas propiedades a un objeto:

car.model = 'Fiesta'

car.model //‘Fiesta’

Cómo quitar una propiedad

Dado el objeto

const car = {
  color: 'blue',
  brand: 'Ford'
}

puede eliminar una propiedad de este objeto usando

delete car.brand

Delete a property from an object in JavaScript

Funciona también expresado como:

delete car['brand']
delete car.brand
delete newCar['brand']

Establecer una propiedad como indefinida

Si necesita realizar esta operación de una manera muy optimizada, por ejemplo, cuando está operando en una gran cantidad de objetos en bucles, otra opción es establecer la propiedad enundefined.

Por su naturaleza, la realización dedeletees unmucho mas lentoque una simple reasignación aundefined, más de 50 veces más lento.

Sin embargo, tenga en cuenta que la propiedad no se elimina del objeto. Su valor se borra, pero sigue ahí si itera el objeto:

Iterate over the object

Usandodeletesigue siendo muy rápido, solo debe investigar este tipo de problemas de rendimiento si tiene una muy buena razón para hacerlo, de lo contrario, siempre es preferible tener una semántica y una funcionalidad más claras.

Eliminar una propiedad sin mutar el objeto

Si le preocupa la mutabilidad, puede crear un objeto completamente nuevo copiando todas las propiedades del antiguo, excepto la que desea eliminar:

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys(car).reduce((object, key) => { if (key !== prop) { object[key] = car[key] } return object }, {})

Create a new object without mutating the original

Cómo contar el número de propiedades en un objeto JavaScript

Utilizar elObject.keys(), pasando el objeto que desea inspeccionar, para obtener una matriz de todas las propiedades enumerables (propias) del objeto.

Luego calcule la longitud de esa matriz marcando ellengthpropiedad:

const car = {
  color: 'Blue',
  brand: 'Ford',
  model: 'Fiesta'
}

Object.keys(car).length

Dije propiedades enumerables. Esto significa que su indicador enumerable interno se establece en verdadero, que es el valor predeterminado.Verificar MDNpara obtener más información sobre este tema.

Cómo comprobar si una propiedad de un objeto JavaScript no está definida

En un programa JavaScript, la forma correcta de comprobar si una propiedad de un objeto no está definida es utilizar eltypeofoperador.

typeofdevuelve una cadena que indica el tipo de operando. Se usa sin paréntesis, pasándole cualquier valor que desee verificar:

const list = []
const count = 2

typeof list //“object” typeof count //“number” typeof “test” //“string” typeof color //“undefined”

Si el valor no está definido,typeofdevuelve el 'indefinido'cuerda.

Ahora suponga que tiene uncarobjeto, con una sola propiedad:

const car = {
  model: 'Fiesta'
}

Así es como se comprueba si elcolorla propiedad se define en este objeto:

if (typeof car.color === 'undefined') {
  // color is undefined
}

Propiedades dinámicas

Al definir una propiedad, su etiqueta puede ser una expresión si se incluye entre corchetes:

const car = {
  ['c' + 'o' + 'lor']: 'blue'
}

car.color //‘blue’

Sintaxis más simple para incluir variables como propiedades de objeto

En lugar de hacer

const something = 'y'
const x = {
  something: something
}

puedes hacerlo de esta manera simplificada:

const something = 'y'
const x = {
  something
}

Más tutoriales de js: