Création et utilisation des objets en Javascript

Création et utilisation des objets en Javascript

Les objets en Javascript sont des éléments très importants à maîtriser afin de coder correctement en JS.  

Comme vue dans l'article sur les types de données en Javascript, un objet en JS est un type de donnée non-primitif qui permet de stocker des collections de données.
Dans cet article, nous allons voir ensemble l'utilité des objets, comment en créer et comment bien les utiliser.

Voici un exemple d'objet en javascript :

const monObjet = {
    nom: "jean",
    age: "26",
    ville: "Paris"
}

Sommaire :

La déclaration d'un objet Javascript

Pour déclarer un objet, voici la synthax :

const nom_objet = {
   cle1: valeur1,
   cle2: valeur2
}

Vous pouvez aussi bien utiliser la constante const que la variable let ou var pour déclarer votre objet javascript.

Ici, un objet nom_objet est défini. Chaque membre d'un objet est une paire clé-valeur séparée par des virgules et encadrée par des accolades {}.

Vous pouvez également définir un objet sur une seule ligne comme suit :

const objet = { nom: 'Jean', age: 26 };

En javascript l'ensemble clé valeur par exemple "nom" et "Jean" sont appelés propriétés. Un objet javascript est donc composé le plus souvent de plusieurs propriétés clé-valeur.

Vous pouvez également ajouter des propriétés à un objet ou modifier des propriétés existantes comme suit :

const objet = { nom: 'Jean', age: 26 };

objet.animal = "Chat"

// objet = {
//	nom: "Jean",
//  age: "26,
//	animal: "Chat
//}

objet.nom = "Michel"

// objet = {
//	nom: "Michel",
//  age: "26,
//	animal: "Chat
//}

Vous pouvez bien entendu aussi supprimer une propriété d'un objet grâce au mot-clé delete :

const objet = { nom: 'Jean', age: 26 };

delete objet.age

// objet = {
//	nom: "Michel"
//}

Vous pouvez également créer des objets en utilisant d'autres techniques comme avec l'instance objet directement ou avec une fonction Constructor.

Accéder aux propriétés d'un objet en javascript

Il existe différentes façons d'accéder aux propriétés d'un objet en JS.

En utilisant la notation par points

Vous pouvez accéder à la valeur d'un objet grâce à la clé de la propriété comme suit :

const objet = { 
    nom: 'Jean',
    age: 26 
};

console.log(objet.age) // affiche 26
console.log(objet.nom) // affiche Jean

De cette façon vous pouvez simplement utiliser les valeurs de votre objet dans votre code.

En utilisant la notation entre crochets

const objet = { 
    nom: 'Jean',
    age: 26 
};

console.log(objet[age]) // affiche 26
console.log(objet[nom]) // affiche Jean

La notation entre crochet donne exactement le même résultat que la notation par points.

Les objets imbriqués en javascript

Nous l'avons dit précédemment, un objet est un type de données très pratique notamment grâce à sa flexibilité.
Vous pouvez imbriquer des objets à l'infini en Javascript. (Bon pas trop non plus sinon vous n'y comprendrez plus grand chose)

Pour ce faire, faites comme cela :

const objet = { 
    nom: 'Jean',
    age: 26,
    animal: {
        type: "chat",
        nom: "Bilou",
        age: 5
    }
};

Pour accéder à la valeur Bilou par exemple, vous pouvez utiliser la notation par points comme suit :

const objet = { 
    nom: 'Jean',
    age: 26,
    animal: {
        type: "chat",
        nom: "Bilou",
        age: 5
    }
};

console.log(objet.animal.nom) // affichera Bilou

Rien de plus simple !

Méthodes imbriquées dans un objet javascript

Et oui, Javascript nous surprendra toujours, mais vous pouvez bel et bien imbriquer directement une fonction dans votre objet et celle-ci sera exécutée normalement lorsque vous l'appelerez.

const objet = {
    nom: 'Jean',
    age: 26,
    // utilisation d'une fonction en tant que valeur
    animal: function() { console.log('chat') }
}

objet.animal(); // chat

Ici, une fonction est utilisée comme valeur pour la clé animal. C'est pourquoi nous devons utiliser objet.animal() au lieu de objet.animal pour appeler la fonction à l'intérieur de l'objet.

Itérer sur un objet en javascript

Nous avons déjà vu précédemment comme itérer sur un array en JS mais vous pouvez bien faire de même sur un objet.

Pour ce faire, il faut utiliser la boucle for ... in comme suit :

for (variable in objet) {
    // votre code à exécuter
}

Prenons un exemple pour rendre ce concept plus concret :

const carottes = {"itemId": "1", "itemName": "carotte", "nbItems": 25};

for (const element in carottes) {
	console.log(`${element} => ${carottes[element]}`
}
// logs             
// itemId => 1
// itemName => carotte
// nbItems => 25

Ici, nous avons déclaré un objet carottes avec différentes propriétés.
La boucle for in permet d'accéder à la fois à la clé et à la valeur de chaque propriété en itérant très simplement.