Propiedades de objetos de JavaScript

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

Los objetos JavaScript tienen propiedades, que están compuestas por una etiqueta asociada a un valor.

La sintaxis literal del objeto que vimos:

const car = {}

nos permite definir propiedades como esta:

const car = {  color: 'blue'}

Aquí tenemos un carobjeto con una propiedad llamada color, con valor blue.

Las etiquetas pueden ser cualquier cadena. Observe que no usé comillas alrededor de color, pero si hubiera querido 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.

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

La primera es la notación de puntos :

car.color //'blue'

El segundo, que es obligatorio para propiedades con nombres inválidos, es utilizar corchetes:

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

Si accedes a una propiedad inexistente, obtienes undefined:

car.brand //undefined

Una buena forma de comprobar el valor de una propiedad pero que tiene como valor predeterminado un valor predefinido es utilizar 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 al nombre de la marca utilizando

car.brand.name

o

car['brand']['name']

o incluso mezclando:

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

Como viste arriba, puedes establecer el valor de una propiedad cuando defines el objeto.

Pero siempre puedes actualizarlo más tarde:

const car = {  color: 'blue'}car.color = 'yellow'car['color'] = 'red'

También puedes agregar nuevas propiedades a un objeto:

car.model = 'Fiesta'car.model //'Fiesta'

Dado el objeto

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

Puedes eliminar una propiedad de este objeto usando

delete car.brand

Funciona también expresado como:

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

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 en undefined.

Debido a su naturaleza, el rendimiento de deletees mucho más lento que una simple reasignación a undefined, 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 estando allí si itera el objeto:

El uso deleteaún es muy rápido, solo debes considerar este tipo de problemas de rendimiento si tienes una muy buena razón para hacerlo, de lo contrario, siempre es preferible tener una semántica y una funcionalidad más claras.

Si la mutabilidad es una preocupación, 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}, {})

Utilice el Object.keys()método, pasando el objeto que desea inspeccionar, para obtener una matriz de todas las propiedades enumerables (propias) del objeto.

Luego calcula la longitud de esa matriz comprobando la lengthpropiedad:

const car = {  color: 'Blue',  brand: 'Ford',  model: 'Fiesta'}Object.keys(car).length

Dije propiedades enumerables. Esto significa que su indicador de enumerabilidad interno está configurado como verdadero, que es el valor predeterminado. Consulte MDN para obtener más información sobre este tema.

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

typeofDevuelve una cadena que indica el tipo del operando. Se utiliza sin paréntesis, pasándole cualquier valor que se desee comprobar:

const list = []const count = 2typeof list //"object"typeof count //"number"typeof "test" //"string"typeof color //"undefined"

Si el valor no está definido, devuelve la cadenatypeof ‘indefinida’ .

Ahora supongamos que tienes un carobjeto, con solo una propiedad:

const car = {  model: 'Fiesta'}

Así es como se comprueba si la colorpropiedad está definida 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 sencilla 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}

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Cómo generar un número aleatorio entre dos números en JavaScript
2. Cómo esperar el evento DOM listo en JavaScript simple
3. Cómo determinar si una fecha es hoy en JavaScript
4. Cómo contar el número de propiedades en un objeto JavaScript