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 claveholaEyy
.returnClave()
que se evalúa como clave.isVerdad ? "claveVerdad" : "claveFalso"
evalúa comoclaveVerdad
o comoclaveFalso
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.