Digitalgarage – Didier Grand - Création web et stratégie digitale

En JavaScript, accéder à des propriétés profondément imbriquées dans un objet peut être compliqué, surtout si certaines de ces propriétés ne sont pas définies. Par exemple, imaginons que nous ayons un objet utilisateur avec plusieurs niveaux de propriétés. Si une propriété intermédiaire est absente, une tentative d’accès peut générer une erreur. Dans cet article, je vais vous montrer comment contourner ce problème en créant une fonction JavaScript pour accéder en toute sécurité aux propriétés imbriquées.

Exemple de Problème

Imaginons que nous ayons deux objets représentant des utilisateurs : john et jane. Voici leurs structures :

const john = {
  profile: {
    name: { firstName: 'John', lastName: 'Doe' },
    age: 20,
    gender: 'Male',
  },
};

const jane = {
  profile: {
    age: 19,
    gender: 'Female',
  },
};

Nous avons une fonction getFirstName pour obtenir le prénom de l’utilisateur :

function getFirstName(user) {
  return user.profile.name.firstName;
}

Appeler getFirstName(john) fonctionne bien et renvoie "John". Cependant, getFirstName(jane) provoque une erreur, car jane.profile ne contient pas de propriété name.

Solution avec une Fonction Personnalisée

Pour éviter ce genre d’erreurs, la bibliothèque Lodash propose une méthode _.get qui permet d’accéder aux propriétés de manière sécurisée. Nous allons créer notre propre version simplifiée de cette fonction.

Notre fonction get doit prendre les paramètres suivants :

object : L’objet dans lequel nous voulons accéder à une propriété.
path : Le chemin de la propriété, sous forme de chaîne (ex : "profile.name.firstName") ou de tableau (ex : ["profile", "name", "firstName"]).
defaultValue (optionnel) : La valeur à retourner si la propriété n’existe pas.

Avant l’existence de l’opérateur de chaînage optionnel (?.), il était parfois difficile d’accéder à des propriétés profondément imbriquées dans d’énormes objets JavaScript lorsque certaines des propriétés intermédiaires pouvaient ne pas être présentes.

const john = {
  profile: {
    name: { firstName: 'John', lastName: 'Doe' },
    age: 20,
    gender: 'Male',
  },
};
const jane = {
  profile: {
    age: 19,
    gender: 'Female',
  },
};

function getFirstName(user) {
  return user.profile.name.firstName;
}

L’exécution de getFirstName(john) fonctionne mais getFirstName(jane) génèrera une erreur car la propriété name n’existe pas pour jane.profile.

Méthode Get de Lodash
La méthode _.get de Lodash a été créée comme solution pour de tels cas d’utilisation.

Écrivons notre propre version en tant que fonction get. La fonction récupère la valeur au chemin de l’objet. Si la valeur résolue n’est pas définie, la valeur par défaut est renvoyée à sa place. La signature de la fonction est la suivante :

get(object, path, [defaultValue]);
object : l’objet à interroger.
path : le chemin de la propriété à obtenir. Il peut s’agir d’une chaîne avec . comme séparateur entre les champs ou d’un tableau de chaînes de chemin.
defaultValue : paramètre facultatif. La valeur renvoyée si la valeur résolue n’est pas définie.

Exemples:

get(john, 'profile.name.firstName'); // 'John'
get(john, 'profile.gender'); // 'Male'
get(jane, 'profile.name.firstName'); // undefined

Les tableaux sont également accessibles si des indices numériques sont fournis.

get({ a: [{ b: { c: 3 } }] }, 'a.0.b.c'); // 3

Il n’est pas nécessaire de prendre en charge une syntaxe ressemblant à get(object, ‘a[0].b.c’).

Exercice Pratique : Accéder aux propriétés imbriquées dans des objets en JavaScript

Exemple de Problème

Solution avec une Fonction Personnalisée