Notación de puntos vs corchetes en el acceso a objetos de JavaScript.

Podemos acceder a la propiedad de un objeto mediante

• Notación de puntos
• Notación de corchetes

Esta es la forma más popular y más utilizada de acceder a la propiedad de un objeto. Esto hace que el código sea más legible. La notación de puntos es la más utilizada.

Sintaxis: obj.property_name

var user = {name : "Mark"};user.name ; // "Mark"

Cuándo no usar la notación dot

Considera que estamos teniendo un nombre de propiedad como 123

var obj = {
'123' : 123
};

En el caso anterior si no podemos acceder usando

obj.123; 

Así que, si el nombre de la propiedad no es un identifier válido, entonces no podemos acceder a su valor usando la notación ..

¿Qué es un identificador?

Un identificador es una secuencia de caracteres en el código que identifica un variable, function, o property. Generalmente nombre de función o variable o nombre de propiedad de Objeto

¿Qué es un Identificador válido?

En este caso, podemos utilizar la notación de corchetes

var obj = {
'123' : 123
};obj; // 123

Nota

En JavaScript $ , y _ son identificadores válidos. por lo que podemos acceder a esas propiedades utilizando la notación ..

var obj = {
$ : 10,
_ : 20
}obj.$; // 10obj._; // 20

Notación de corchetes

La notación de corchetes se utiliza cuando el nombre de la propiedad es un identificador no válido (comienza con un número, contiene símbolos).

var obj = {
test-123 : "test"
}// in this case we cannot use dot notationobj; // "test"

Si el nombre de la propiedad es number entonces no necesitamos envolver el nombre de la propiedad dentro de single /double quotes en la creación de objetos. Pero en la notación de corchetes, si el nombre de la propiedad es whole number , entonces no necesitamos envolver el nombre dentro de single /double quotes . Pero si el nombre de la propiedad es double , entonces necesitamos envolver el nombre de la propiedad dentro de single /double quotes .

Ejemplo 1: número entero

var obj = {
123456 : 10
}obj;

Ejemplo 2: Doble

var obj = {
123.456 : 10
}obj; // undefinedobj; // 10

Ejemplo 3: Uso de un número no válido

var obj = {
123.123.123 : 10 // throws invalid number error
}For this case use single/double quotesvar obj = {
'123.123.123' : 10
}

Ejemplo 4: Uso de símbolos especiales

var obj = {
'123-test' : "test" 
}obj; // error(test is not defined)obj; // "test"

Uso de variable como nombre de propiedad

Ejemplo 1:

var test = "test";var obj = {
test : "Test success"
}obj // "Test success"

Ejemplo 2 :

var obj = {
name : "Mark"
age : 20
}var name = "age";obj; // Mark
obj; // 20

Ejemplo 3: Ejemplo real de uso de la notación de corchetes

También podemos usar objeto como nombre de la propiedad, pero eso se convertirá en

var a = {};var b = {};var c = {};c = 10;c ; {: 10}c = 20; // this will replace old c; {: 20}

También podemos tener empty string como nombre de la propiedad

var obj= {};var emptyString = "";obj = "10";obj; // 10