Quelle différence entre obj.prop et obj['prop'] ?

En JavaScript, il existe deux syntaxes pour accéder à une propriété d’objet, obj.prop et obj['prop']. Quelle différence entre les deux et quand les utiliser ?

Syntaxe obj.prop

Cette syntaxe est facile à lire et à écrire. C’est celle que vous devez utiliser de préférence.

De plus, on la retrouve dans de nombreux (tous ?) langages objet.

const user = {
  name: 'Pierre',
  email: 'pierre@site.com'
};

const email = user.email;
user.email = 'other@site.com';

Syntaxe obj['prop']

La syntaxe “crochets” est pratique quand le nom de la propriété à laquelle on veut accéder se trouve dans une variable.

const user = {
  name: 'Pierre',
  email: 'pierre@site.com'
};
const prop = 'email';  // Propriété à laquelle on veut accéder

const email = user[prop];
user[prop] = 'other@site.com';

On utilise notamment cette syntaxe quand on veut itérer sur les propriétés d’un objet avec for…in :

const obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {  // `prop` vaudra successivement "a", puis "b", puis "c"
  const value = obj[prop];
}

Quelle syntaxe utiliser en TypeScript ?

En TypeScript, la syntaxe obj.prop peut déclencher une erreur si le compilateur ne reconnaît pas la propriété prop sur l’objet obj.

Ainsi, le code suivant déclenchera une erreur :

const user = {
  name: 'Pierre',
  email: 'pierre@site.com'
};

const age = user.age;  // ERREUR, la propriété `age` n'existe pas sur l'objet `user`

Pourtant, le même code avec la syntaxe obj['prop'] ne plante pas, car il n’y a pas de contrôle type quand on accède à une propriété d’objet avec la syntaxe crochets :

const user = {
  name: 'Pierre',
  email: 'pierre@site.com'
};

const age = user['age'];  // OK, car pas de contrôle de type

L’exemple est un peu bizarre (pourquoi vouloir accéder à une propriété qui n’existe pas…), mais dans la pratique il arrive qu’on veuille accéder à des propriétés sur des objets dont le compilateur ne connaît pas le type (typiquement, des objets “anonymes” renvoyés par le backend) et dans ce cas la syntaxe crochets est bien utile.



Ressources supplémentaires

Informations

Tags : javascript

Dernière mise à jour :

Auteur : AngularChef

Qualité : Pas finalisé