Hay varias formas de acceder a las propiedades de los objetos en JavaScript. Pero los dos más comunes son la notación de punto y la notación de corchetes.

Explicaré la diferencia entre estos dos enfoques en este artículo.

Con la notación de punto y de corchetes puedes:

  • Acceder al valor de una propiedad por su clave.
  • Modificar el valor de una propiedad existente por su clave.
  • Agregar una nueva propiedad a un objeto.

Pero estas dos formas acceden a las propiedades de manera diferente y existen diferentes escenarios en los que una es mejor que la otra.

Notación de punto

La notación de punto implica el uso de un punto . y una clave para acceder a una propiedad. Aquí esta la sintaxis:

objeto.clave

Tienes el punto y luego la clave de la propiedad a la que se desea acceder. Esta expresión devolverá el valor de la propiedad. Veamos un ejemplo:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const resultado = objeto.nombre
// hola mundo

Al usar el punto y la clave nombre, .nombre obtenemos "hola mundo", que es el valor de la propiedad nombre.

También puede usar esta notación para modificar una propiedad existente:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

objeto.edad = 100

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 100,
//   lenguaje: "javascript"
// }

En este ejemplo modificamos la propiedad edad.

Además, es posible agregar una nueva propiedad siguiendo este enfoque:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

objeto.localizacion = "Mercurio"

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 80,
//   lenguaje: "javascript",
//   localizacion: "Mercurio"
// }

Aquí agregamos la propiedad localizacion.

Este enfoque tiene limitaciones que veremos pronto. A continuación, comprendamos como funciona el enfoque de notación entre corchetes.

Existe una versión en video (en inglés) sobre este tema si usted esta interesado.

Notación de Corchetes

El enfoque de notación de corchetes implica el uso de corchetes, en los que se tiene una expresión que se evalúa como un valor. Ese valor sirve como clave para acceder a la propiedad. La sintaxis es la siguiente:

objeto[expresion]

La expresión entre corchetes se evalúa como una clave para la propiedad a la que dese acceder y esta expresión devolverá el valor de la propiedad. Veamos un ejemplo:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const resultado = objeto["nombre"]
// hola mundo

Al usar corchetes y la expresión de cadena "nombre", ["nombre"], obtenemos hola mundo que es el valor de la propiedad nombre.

También se puede usar este enfoque para modificar una propiedad existente:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

objeto["edad"] = 100

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 100,
//   lenguaje: "javascript"
// }

En este ejemplo modificamos la propiedad edad usando la expresión "edad" como cadena.

Es posible agregar una nueva propiedad usando corchetes de la siguiente manera:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

objeto["localizacion"] = "Mercurio"

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 80,
//   lenguaje: "javascript",
//   localizacion: "Mercurio"
// }

Acá agregamos una nueva propiedad al objeto llamada localizacion usando la expresión [localizacion] como cadena.

Diferencias entre la Notación de Punto y la Notación de Corchetes

La notación de punto solo permite claves estáticas, mientras que la notación de corchetes acepta claves dinámicas. La clave estática significa que la clave se escribe directamente, mientras que la clave dinámica significa que la clave se evalúa a partir de una expresión.

Veamos algunos ejemplos

Usando ambos enfoques para acceder a las propiedades

Empecemos por la notación de punto:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "lenguaje"

const resultado = objeto.miClave
// undefined

En este ejemplo asignamos el valor "lenguaje" a la variable miClave. Lo que se esperaría es que cuando usamos la notación de punto, como objeto.miClave, miClave se reemplace por lenguaje. Entonces se leería como objeto.lenguaje y devolvería javascript.

Pero eso no es lo que sucede. En cambio, el resultado es undefined.

La razón de esto es que la notación de punto solo acepta claves estáticas. Entonces, cuando hacemos objeto.miClave, JavaScript busca la propiedad con la clave miClave en la variable objeto. Pero esa propiedad no existe, por lo que devolvemos undefined.

La notación de corchetes, por otro lado, permite claves dinámicas. Como esta notación acepta expresiones, puede utilizar cualquier expresión que se evalúe como un valor. Podría ser:

  • hola + Eyy evalúa a la clave holaEyy.
  • returnClave() que se evalúa como clave.
  • isVerdad ? "claveVerdad" : "claveFalso" evalúa como claveVerdad o como claveFalso para la clave.
  • variable evalúa según el valor de la variable para la clave.

Por lo tanto usando el ejemplo anterior, podemos tener lo siguiente:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "lenguaje"

const resultado = objeto[miClave]
// javascript

La expresión que pasamos entre corchetes es miClave, que es una variable. Esta expresión se evalúa como lenguaje, que es el valor de la variable. Usando este valor, los corchetes pueden obtener el valor de la propiedad que es javascript.

Pero si pasa una expresión de cadena como miClave quedará como undefined:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "lenguaje"

const resultado = objeto["miClave"]
// undefined

Esto se debe a que la expresión de cadena miClave se evalúa como el valor miClave que sirve como clave para acceder a la propiedad. Como no hay una clave miClave en objeto, el valor devuelto será undefined.

Usando ambos enfoques para modificar propiedades

Empecemos con la notación de punto:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "edad"

objeto.miClave = 100

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 80,
//   lenguaje: "javascript",
//   miClave: 100
// }

Tenemos miClave con el valor "edad". Al intentar hacer objeto.miClave = 100 para modificar la propiedad edad, no funcionará. Esto se debe a que la notación de puntos acepta una clave estatática. Entonces objeto.miClave toma miClave como clave. Como miClave no existe en la declaración del objeto esta declaración se agrega. Entonces, objeto tiene una nueva clave, miClave con el valor de 100.

El comportamiento es diferente con la notación de corchetes:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "edad"

objeto[miClave] = 100

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 100,
//   lenguaje: "javascript"
// }

En lugar de agregar una nueva propiedad miClave a objeto, el enfoque entre corchetes modifica la propiedad edad. La razón es que pasamos miClave como expresión entre corchetes. Esta expresión como variable, se evalúa como edad que es el valor de la variable. Usando edad como clave, este enfoque modifica el valor de la propiedad edad a 100.

Y si quisiéramos agregar una nueva propiedad usando corchetes, entonces podemos pasar una expresión que devuelva una nueva clave que no existe, por ejemplo:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "localizacion"

objeto[miClave] = "Mercurio"

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 100,
//   lenguaje: "javascript",
//   localizacion: "Mercurio"
// }

La variable miClave contiene un nuevo valor: localizacion. Al pasar esto entre corchetes y asignar un valor de "Mercurio" ahora tenemos una nueva propiedad con par clave-valor localizacion y Mercurio.

¿Debería usar notación de punto o de corchetes?

Hasta ahora, hemos visto cómo funciona cada notación, usando diferentes ejemplos para acceder/modificar propiedades existentes y para agregar nuevas propiedades. Entonces, ¿cuál debería utilizar al escribir código JavaScript?

El principal factor que te ayudará a tomar una decisión es la clave de la propiedad a la que deseas acceder. Si es una clave estática, utilice la notación de punto. Pero si es una clave dinámica (evaluada a partir de una expresión durante el tiempo de ejecución), use la notación de corchetes.

La notación de punto es útil cuando conoce la propiedad de antemano. Simplemente haga objecto.clave para leer/modificar una propiedad existente o para agregar una nueva propiedad.

La notación de corchetes es útil cuando desea acceder dinámicamente a una propiedad. La clave de esta propiedad podría provenir de expresiones como obtenterClave(), "my" + "clave" o claveVariable.

Espero que hayas podido comprender el artículo.

Por favor comparte si te resultó útil.