Partie 1 / Blogs / Perficient

Les objets constituent un élément essentiel de la manipulation des données dans JavaScript, le langage qui gère Internet. Les développeurs peuvent facilement organiser et organiser les données à l’aide d’objets JavaScript, qui sont des conteneurs polyvalents. Ensemble, nous démêlerons des objets et examinerons de nombreuses techniques essentielles qui simplifient nos interactions avec eux.

Comprendre les objets en JavaScript

Un objet en JavaScript est un ensemble de paires clé-valeur, où les clés sont des chaînes et les valeurs sont des types de données JavaScript valides. Ces objets combinent des caractéristiques et des fonctions associées en une seule entité, en commençant par la création d’un objet simple via un objet littéral.

La façon de créer un objet en JavaScript consiste à utiliser des accolades {}.

Voici un exemple simple :

//JavaScript
const object = {};
console.log(object);
console.log("The type of object is: " + typeof object);

Sortir:

Un exemple d’objet contenant clé et valeur paires:

//JavaScript
const person ={
    name:'Sarah Maas',
    age: 37,
    profession: 'Author'
}

console.log(person);

Sortir:

Dans cet exemple, les clés sont nom, âgeet professionet les valeurs sont respectivement « Sarah Maas », « 37 » et « Auteur ».

Comment accéder à un objet

Les deux notations utilisées en JavaScript pour accéder aux méthodes et propriétés d’un objet sont la notation par points et la notation par crochets.

Notation par points :

Syntaxe:

object.property

Exemple:

//JavaScript
const person = {
    name:'Sarah Maas',
    age: 37,
    profession: 'Author'
}

console.log(person.name);

console.log(person.age);

Sortir:

Notation entre parenthèses :

Syntaxe:

object['property'] or object[expression]

Exemple:

//JavaScript
const person = {
  name: 'Sarah Maas',
  age: 37,
  profession: 'Author',
};
const propertyName="name";
console.log(person[propertyName]);
console.log(person["age"]);

Sortir:

Notation par points est la méthode la plus simple et la plus populaire pour accéder aux propriétés. Lorsque le nom du bien auquel vous souhaitez accéder vous est connu et constitue un identifiant valide, vous l’utilisez.

La notation par points est insuffisante pour les propriétés multi-mots, ce qui provoque des erreurs. Pour accéder aux objets à l’aide de la notation par points, suivez les règles habituelles de déclaration d’une variable, car les noms de propriétés de chaîne de plusieurs mots ne sont pas pris en charge.

//JavaScript
// Using camelCase
const myObject = { userName: "Percy Jacson" };
console.log(myObject.userName);

// Using snake_case
const anotherObject = { user_name: "Harry Potter" };
console.log(anotherObject.user_name);

// Using square bracket notation
const yetAnotherObject = { "user name": "Bob Smith" };
console.log(yetAnotherObject["user name"]);

Sortir:

//JavaScript
const objectWithMultiwords ={user name: "Lucas Martin"};
console.log(objectWithMultiwords.user name);

Ce que contient un objet

Dans les objets JavaScript, vous pouvez avoir des variables, appelées propriétés, et des fonctions, appelées méthodes. Les propriétés stockent les données et les méthodes utilisent les données stockées pour effectuer des actions au sein de l’objet.

1. Propriétés: Ce sont des variables qui font partie d’un objet. La notation par points (object.property) ou la notation par crochet (object.property)[‘property’]) sont utilisés pour accéder aux propriétés.
   

   //JavaScript
   const myObject1 = {
     name: 'Lily',
     age: 30,
     city: 'New York'
   };
   
   console.log(myObject1.name); // Accessing property using dot notation
   console.log(myObject1['age']); // Accessing property using bracket notation

2. Méthodes: Ce sont des fonctions associées à un objet. Ils peuvent effectuer des actions en utilisant les propriétés de l’objet. Les méthodes sont appelées en utilisant la notation par points (méthode())
   Syntaxe:

const objectName = {

property1: value1,

property2: value2,

methodName: function() {

// method code

}
};

Exemple:

//JavaScript
const myObject2 = {
  userName: 'Lily',
  age: 30,
  city : 'New York',
  access: true,
  showDetails(){
    console.log( this.access ? `My name is ${this.userName} and I live in ${this.city} city` : "You don't have")
  }
};
myObject2.showDetails() // calling the method

Dans l’exemple ci-dessus, afficher les détails est une méthode de l’objet myObject2. Il utilise le nom d’utilisateur et les propriétés de la ville pour effectuer une action (enregistrer un message sur la console).

Sortir:

Exemple de méthode objet avec paramètres :

//JavaScript
const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

console.log(calculator.add(5, 3)); // Output: 8
console.log(calculator.subtract(10, 4)); // Output: 6

Sortir:

Pourquoi utilisons-nous Ce Mot-clé dans les objets ?

Pour faire référence à l’objet actuel dans une méthode ou une fonction, utilisez le mot-clé « this » en JavaScript. Selon la manière dont une fonction est appelée, la valeur du mot-clé ‘this’ change. C’est un moyen pour une fonction de référencer l’objet auquel elle appartient ou sur lequel elle est invoquée.

Passons par un exemple pour illustrer l’utilisation de ceci dans un objet :

//JavaScript
const car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2022,
  displayInfo: function() {
    console.log(`This ${this.brand} ${this.model} was manufactured in ${this.year}.`);
  }
};
// Calling the method using the object
car.displayInfo();

Dans cet exemple, displayInfo est une méthode de l’objet voiture. À l’intérieur de displayInfo méthode, cela fait référence à l’objet voiture lui-même. Alors, quand nous appelons le voiture.displayInfo(), il imprime :

Sortir:

Si nous n’a pas utilisez ceci et référencez directement les propriétés sans cela, le code ressemblerait à ceci :

Exemple:

//JavaScript 
const carWithoutThis = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2022,
  displayInfo: function() {
    console.log('Without using "This" Keyword : This ' + carWithoutThis.brand + ' ' + carWithoutThis.model + ' was manufactured in ' + carWithoutThis.year + '.');
  }
};

// Calling the method using the object
carWithoutThis.displayInfo();

Sortir:

Cependant, en utilisant ce rend le code plus flexible. Si vous décidez ultérieurement de changer le nom de l’objet de voitureSansCela vers autre chose, vous n’aurez pas besoin de mettre à jour chaque référence aux propriétés de l’objet à l’intérieur de la méthode.

Il s’agit d’une référence à l’objet actuel, déterminée par des appels de fonction, et est utile dans les méthodes objet pour accéder et manipuler ses propriétés.

Ce mot-clé avec la méthode objet fonction flèche :

Les fonctions fléchées n’ont pas leur propre contexte, donc son utilisation dans une fonction fléchée au sein d’un objet peut entraîner un comportement inattendu.

Exemple:

//JavaScript
const car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2022,
  displayInfo : () => {
    console.log(`This ${this.brand} ${this.model} was manufactured in ${this.year}.`);
  }
};
car.displayInfo();

Sortir:

Conclusion

Les objets JavaScript agissent comme des organisateurs pratiques, simplifiant le processus de stockage et de recherche d’informations dans votre code. Explorez la prochaine partie de notre blog, « La puissance des objets en JavaScript que vous ne connaissiez pas, partie 2 », où nous révélons des secrets sur ces méthodes utiles et partageons des conseils intéressants dans mon profil. Que vous soyez débutant ou désireux d’apprendre des astuces avancées, ce blog est votre guide incontournable pour devenir sans effort un pro de JavaScript. Lancez-vous, découvrez le monde des objets JavaScript et améliorez votre codage avec organisation et puissance !