Notación punto o corchetes en JavaScript

Dos de las formas más comunes de acceder a las propiedades de un objeto son la notación punto y la notación corchetes.

Cada método tiene sus ventajas y desventajas, así que vamos a ver cuando usar cada una de ellos 👇

Notación punto

La notación punto es la forma más común de acceder a las propiedades de un objeto. Se utiliza el nombre del objeto seguido de un punto y luego el nombre de la propiedad.

objeto.propiedad

Por ejemplo,

const estudiante = {
  nombre: "Luis",
  edad: 30
};

Para acceder a la propiedad nombre:

estudiante.nombre; // "Luis"

Notación corchetes

La notación corchetes permite acceder a las propiedades de un objeto utilizando una cadena (string) dentro de corchetes.

objeto[propiedad]

Esta forma es algo menos cómoda, pero es útil en ciertos casos. Por ejemplo cuando el nombre de la propiedad contiene caracteres no válidos para la notación punto.

Vamos a verlo también con un ejemplo. Para acceder a la propiedad nombre usando la notación corchetes haríamos,

estudiante["nombre"]; // "Luis"

Cuando usar notación corchetes

En general vamos a usar la notación punto principalmente. Usaremos los corchetes cuando tengamos un caso en el que no podemos usarla.

Vamos a verlos.

const persona = {
"nombre completo": "Ana Pérez"
};

persona["nombre completo"]); // "Ana Pérez"

persona.nombre completo   // ❌ No puedo hacer eso, por el espacio 

const propiedad = "edad";

persona[propiedad]; // 21

persona.¿?¿?¿? // ❌ No sabríamos que poner ahí

const indice = 2; // imagina que lo seleciona el usuario
const propiedades = ["nombre", "edad", "profesion"];

persona[propiedades[indice]];