Syntaxe Javascript

Manipulation d’un objet / tableau JS

Création et accès

On utilisera un objet pour organiser de données “complexes” à l’intérieur d’une variable.

// Création d'un objet mélangeant plusieurs types de données
const monObjet = {
    propriete1: 'valeur',
    propriete2: 5,
    propriete3: [1, 2, 3],
    methode1: () => console.log('saluer'),
    "une-propriete": 'la propriété peut être créée sous forme de string si elle contient des caractères spéciaux'
};

// Accès et modification d'une propriété
console.log(monObjet.propriete2); // affiche 5 dans la console
monObjet.propriete4 = 'test';  // ajoute propriete4 à l'objet

// Accès dynamique à une propriété
const maPropriete = 'propriete5';
monObjet[maPropriete] = 'test'; // ajoute propriete5 à l'objet

// L'accès dynamique permet un peu plus de flexibilité
cont numero = 6;
const prefixeProp = 'propriete';
monObjet[prefixeProp + numero] = 'test'; // ajouter propriete6 à l'objet

// On peut aussi utiliser une propriété dynamique à la création
const propDynamique = 'unePropriete';
const monObjet = {
    [propDynamique] : 666  // crée une objet avec la propriété unePropriete contenant la valeur 666
};

Décomposition d’un objet

On peut utiliser la décomposition d’objets afin de créer des variables rapidement à partir des différentes propriétés de l’objet

// Décomposition d'un objet
const monObjet = {
  prenom: "John",
  nom: "Doe",
  age: 66,
  enfants: ["Lucienne", "Roberte"],
};
// On peut récupérer les valeurs de la façon normale:
const monPrenom = monObjet.prenom;
const monNom = monObjet.nom;

// On peut aussi décomposer l'objet
const { prenom, nom } = monObjet; // crée une variable prenom contenant 'John' et une variable nom contenant 'Doe'

// On peut également utiliser l'opérateur ... pour récuper les propriétés non décomposées à l'intérieur d'un nouvel objet
const { prenom, nom, ...autres } = monObjet; // la variable autres est un objet contenant les propriétés age et enfants

// un objet passé en paramètre à une fonction peut également être décompose pour plus de clarté
const maFonction = ({ prenom, nom }) => {
  console.log(prenom + " " + nom);
};

maFonction(monObjet);

C’est de cette syntaxe que provient la récupération des props dans une composante:

const MaComposante = ({prop1, prop2}) => {
  // On décompose l'objet plutôt que de le récupérer directement
  return (
    <div>{prop1} {prop2}</div>
  );
}

Décomposition d’un tableau

On peut utiliser la même logique pour récupérer rapidement les valeurs d’un tableau dans des variables:

const monTableau = ["Denise", "Lucienne", "Roberte", "Donalda", "Brigitte"];
const [prenom1, prenom2, ...autresPrenoms]; // prenom1 = 'Denise', prenom2 = 'Lucienne', autresPrenoms = ['Roberte', 'Donalda', 'Brigitte']

Importation / Exportation de modules

On travaille avec les modules JS afin d’encapsuler les définitions de variables/fonctions/classes. On évite ainsi de polluer l’espace publique d’une page web. Seul ce qui est exporté pourra être importé et utilisé dans d’autres scripts.

const uneVariable = "un string";

export default uneVariable;

import UnNomAuChoix from "./file1.js";
console.log(UnNomAuChoix); //affiche 'un string dans la console';

Les exportations portant la mention defaut (maximum d’un default par module) peuvent être importées sous n’importe quel nom de variable.

export const uneFonction = (param1, param2) => param1 + param2;

export UneClasse {
  constructor() {
      console.log('Une instance a été créée');
  }
}

export const unBool = true;

const unArray = [0,1,2];
export default unArray;

import {uneFonction, UneClasse, unBool} from './file1.js';
const uneInstance = new UneClasse(); //affiche 'Une instance a été créée dans la console'

//ou

import {uneFonction as fonction, UneClasse, unBool as unBooleen} from './file2.js';
console.log(unBooleen); //affiche true dans la console

//ou

import * as fromFile1 from './file1.js';
console.log(fromFile1.uneFonction(2,5)); //affiche 7 dans la console
console.log(fromFile1.default.length); //affiche 3 dans la console

Il peut aussi être nécessaire d’importer un fichier pour s’assurer que celui-ci fasse partie du projet. C’est pour cette raison qu’il est nécessaire d’importer les fichiers CSS:

import './Composante.css';

const Composante = () => {
// [...]
};