Acceso a la propiedad de JavaScript: ¿notación de punto vs. paréntesis?

Aparte del hecho obvio de que la primera forma podría usar una variable y no solo un literal de cadena, ¿hay alguna razón para usar una sobre la otra? De ser así, ¿en qué casos?

En codigo:

// Given:
var foo = {'bar': 'baz'};

// Then
var x = foo['bar'];

// vs. 
var x = foo.bar;

Contexto: he escrito un generador de código que produce estas expresiones y me pregunto cuál es preferible.

(Procedente de aquí )

La notación de corchetes permite el uso de caracteres que no se pueden usar con la notación de puntos:

var foo = myForm.foo[]; // incorrect syntax
var foo = myForm["foo[]"]; // correct syntax

incluidos caracteres no ASCII (UTF-8), como en myForm["ダ"]( más ejemplos ).

En segundo lugar, la notación de corchetes es útil cuando se trata de nombres de propiedades que varían de manera predecible:

for (var i = 0; i < 10; i++) {
  someFunction(myForm["myControlNumber" + i]);
}

Redondeo:

• La notación de puntos es más rápida de escribir y más clara de leer.
• La notación de corchetes permite el acceso a propiedades que contienen caracteres especiales y la selección de propiedades usando variables

Otro ejemplo de caracteres que no se pueden usar con notación de puntos son los nombres de propiedades que contienen un punto .

Por ejemplo, una respuesta json podría contener una propiedad llamada bar.Baz.

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax

La notación de paréntesis le permite acceder a las propiedades por nombre almacenado en una variable:

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

obj.x No funcionaría en este caso.

Las dos formas más comunes de acceder a las propiedades en JavaScript son con un punto y entre corchetes. Ambos value.x and value[x]acceden a una propiedad en valor, pero no necesariamente la misma propiedad. La diferencia está en cómo se interpreta x. Cuando se usa un punto, la parte que sigue al punto debe ser un nombre de variable válido y nombra directamente la propiedad. Cuando se utilizan corchetes, la expresión entre corchetes se evalúa para obtener el nombre de la propiedad. Mientras que value.x obtiene la propiedad del valor llamado "x", el valor [x] intenta evaluar la expresión x y utiliza el resultado como el nombre de la propiedad.

Entonces, si sabe que la propiedad que le interesa se llama “longitud”, usted dice value.length. Si desea extraer la propiedad nombrada por el valor contenido en la variable i, diga value[i]. Y debido a que los nombres de propiedades pueden ser cualquier cadena, si desea acceder a una propiedad llamada “2”o “John Doe”, debe utilizar corchetes: value[2] or value["John Doe"]. Este es el caso a pesar de que conoce el nombre preciso de la propiedad de antemano, porque ninguno de los dos “2” nor “John Doe”es un nombre de variable válido y, por lo tanto, no se puede acceder a él mediante la notación de puntos.

En caso de matrices

Los elementos en una matriz se almacenan en propiedades. Debido a que los nombres de estas propiedades son números y, a menudo, necesitamos obtener su nombre de una variable, tenemos que usar la sintaxis de paréntesis para acceder a ellos. La propiedad de longitud de una matriz nos dice cuántos elementos contiene. Este nombre de propiedad es un nombre de variable válido, y conocemos su nombre de antemano, por lo que para encontrar la longitud de una matriz, normalmente escribe array.lengthporque es más fácil de escribir que array["length"].

La notación de puntos no funciona con algunas palabras clave (como newy class) en Internet Explorer 8.

Tenía este código:

//app.users is a hash
app.users.new = {
  // some code
}

Y esto desencadena el temido "identificador esperado" (al menos en IE8 en Windows XP, no he probado otros entornos). La solución simple para eso es cambiar a la notación de paréntesis:

app.users['new'] = {
  // some code
}

Tenga cuidado al usar estas anotaciones: por ej. si queremos acceder a una función presente en el padre de una ventana. En IE:

window['parent']['func']

no es equivalente a

window.['parent.func']

Podemos usar:

window['parent']['func'] 

o

window.parent.func 

para acceder a ella

En términos generales, hacen el mismo trabajo.
Sin embargo, la notación de corchetes te da la oportunidad de hacer cosas que no puedes hacer con la notación de puntos, como

var x = elem["foo[]"]; // can't do elem.foo[];

Esto se puede extender a cualquier propiedad que contenga caracteres especiales.

Debe usar corchetes si los nombres de las propiedades tienen caracteres especiales:

var foo = {
    "Hello, world!": true,
}
foo["Hello, world!"] = false;

Aparte de eso, supongo que es solo cuestión de gustos. En mi humilde opinión, la notación de puntos es más corta y hace que sea más obvio que es una propiedad en lugar de un elemento de matriz (aunque, por supuesto, JavaScript no tiene matrices asociativas de todos modos).

Debe usar la notación de corchetes cuando:

1. El nombre de la propiedad es número.

   var ob = {
     1: 'One',
     7 : 'Seven'
   }
   ob.7  // SyntaxError
   ob[7] // "Seven"
   

2. El nombre de la propiedad tiene un carácter especial.

   var ob = {
     'This is one': 1,
     'This is seven': 7,
   }  
   ob.'This is one'  // SyntaxError
   ob['This is one'] // 1

3. El nombre de la propiedad se asigna a una variable y desea acceder al valor de la propiedad mediante esta variable.

   var ob = {
     'One': 1,
     'Seven': 7,
   }
   
   var _Seven = 'Seven';
   ob._Seven  // undefined
   ob[_Seven] // 7

La notación de corchetes puede usar variables, por lo que es útil en dos casos en los que la notación de puntos no funcionará:

1) Cuando los nombres de las propiedades se determinan dinámicamente (cuando los nombres exactos no se conocen hasta el tiempo de ejecución).

2) Cuando se usa un bucle for..in para recorrer todas las propiedades de un objeto.

fuente: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Caso donde la []notación es útil:

Si el objeto es dinámico y puede haber algunos valores aleatorios de teclas como numbery []o cualquier otro carácter especial, por ejemplo -

var a = { 1 : 3 };

Ahora, si intenta acceder como a.1lo hará a través de un error, porque está esperando una cadena allí.

La notación de puntos siempre es preferible. Si está utilizando algún IDE o editor de texto "más inteligente", mostrará nombres indefinidos de ese objeto. Use la notación de corchetes solo cuando tenga el nombre con guiones similares o algo similar no válido. Y también si el nombre se almacena en una variable.

Permítanme agregar un caso de uso más de la notación de corchetes. Si desea acceder a una propiedad, digamos x-proxyen un objeto, -se interpretará incorrectamente. También hay otros casos como espacio, punto, etc., donde la operación de puntos no lo ayudará. Además, si tiene la clave en una variable, entonces la única forma de acceder al valor de la clave en un objeto es mediante notación de paréntesis. Espero que tengas más contexto.

Un ejemplo donde la notación de puntos falla

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "😎":'😴',
   "a[]":[ 
      2,
      2
   ]
};

// correct
console.log(json['value:']);
console.log(json['help"']);
console.log(json["help\""]);
console.log(json['hello\'']);
console.log(json["hello'"]);
console.log(json["data+"]);
console.log(json["😎"]);
console.log(json["a[]"]);

// wrong
console.log(json.value:);
console.log(json.help");
console.log(json.hello');
console.log(json.data+);
console.log(json.😎);
console.log(json.a[]);

Los nombres de propiedad no deberían interferir con las reglas de sintaxis de javascript para que pueda acceder a ellos como json.property_name