Objet JavaScript

Un objet JavaScript est un ensemble de données et/ou de fonctionnalités liées entre elles.

Les fonctions contenues dans un objet sont appelées méthodes.

Les objets sont référencés (pointés) en mémoire.

Les valeurs dans un objet peuvent être des Strings, des nombres, des booléens, des tableaux (Arrays), d’autres objets.

Lorsque vous stockez des valeurs dans un objet JavaScript, les valeurs primitives sont stockées directement en tant que valeurs, tandis que les tableaux, les objets et d’autres types de données sont stockés en tant que références aux données réelles.

Le stockage par référence permet d’économiser de l’espace mémoire et faciliter la manipulation.

// Sélectionne l'élément #app dans le DOM
const appElement = document.querySelector('#app');

// Crée et ajoute le contenu HTML à l'élément #app
appElement.innerHTML = `
  <h1>Calculatrice simple</h1>
  <div id="resultat">Le résultat est : </div>
`;

// Objet calculatrice
//const pour éviter de le réassigner à un autre objet

const calculatrice = {
  valeur1: 10,
  valeur2: 5,

  additionner: () => calculatrice.valeur1 + calculatrice.valeur2,
  soustraire: () => calculatrice.valeur1 - calculatrice.valeur2,
  multiplier: () => calculatrice.valeur1 * calculatrice.valeur2,

  afficherResultat: (operateur) => {
    const operateurs = {
      '+': calculatrice.additionner(),
      '-': calculatrice.soustraire(),
      '*': calculatrice.multiplier(),
    };

    const resultat = operateurs[operateur] !== undefined ? operateurs[operateur] : "Opérateur non valide";

    // Affiche le résultat dans la console du navigateur
    console.log("Le résultat est : " + resultat);

    // Affiche le résultat dans le DOM
    document.querySelector("#resultat").innerHTML = `Le résultat est : ${resultat}`;
  },
};

// Appeler la méthode afficherResultat avec l'opérateur "+"
calculatrice.afficherResultat("+"); // Affiche "Le résultat est : 15"

// Appeler la méthode afficherResultat avec l'opérateur "-"
calculatrice.afficherResultat("-"); // Affiche "Le résultat est : 5"

// Appeler la méthode afficherResultat avec l'opérateur "*"
calculatrice.afficherResultat("*"); // Affiche "Le résultat est : 50"

Concaténation de 2 objets

/* La méthode Object.assign() est une méthode JavaScript qui est utilisée pour copier les valeurs de toutes les propriétés énumérables de un ou plusieurs objets source vers un objet cible. Elle renvoie ensuite l'objet cible.*/

const objet1 = { a: 1, b: 2 };
const objet2 = { b: 3, c: 4 };

const resultatSansSpread = Object.assign({}, objet1, objet2);
console.log(resultatSansSpread);

/* avec l'opérateur de propagation spread */

const objet1 = { a: 1, b: 2 };
const objet2 = { b: 3, c: 4 };

const resultatAvecSpread = { ...objet1, ...objet2 };
console.log(resultatAvecSpread);

Voir aussi Objet