Introduction à JavaScript

JavaScript est un langage interprété et dynamiquement typé, créé en 1995 par Brendan Eich. Aujourd’hui standardisé sous le nom ECMAScript, la version moderne (ES6/ES2015 et après) est celle qu’on utilise dans ce cours.

Caractéristiques en bref

• Sensible à la casse (nom ≠ Nom ≠ NOM)
• Points-virgules optionnels (mais recommandés pour la lisibilité)
• Commentaires : // pour une ligne, /* */ pour un bloc
• Affichage avec console.log() et pour cas spécifique console.warn(), console.error()

// Premier programme
console.log("Bienvenue au cours IFT3225!");

Comparaison syntaxique rapide

Paradigme

JavaScript est multi-paradigme : on peut écrire du code impératif, orienté objet, ou fonctionnel.

Un langage construit autour des objets

En JavaScript, presque tout est un objet — ou se comporte comme tel. Un tableau est un objet, une fonction est un objet, et même les valeurs primitives (chaînes, nombres) sont temporairement « emballées » en objets quand on appelle une méthode dessus ("allo".toUpperCase()).

Un objet, dans sa forme la plus simple, est une collection de paires clé-valeur :

const etudiant = {
  nom: "Alice",
  age: 25,
  saluer() {
    return `Bonjour, je suis ${this.nom}`;
  }
};
 
console.log(etudiant.nom);        // "Alice"
console.log(etudiant.saluer());   // "Bonjour, je suis Alice"

• saluer est une fonction à l’intérieur d’un objet — une méthode.
• this désigne l’objet lui-même.

Variables et types de données

Déclaration de variables

JavaScript offre trois mots-clés. Dans la pratique moderne, on n’en utilise que deux :

const PI = 3.14159;         // constante — ne peut pas être réassignée
let compteur = 0;           // variable — peut changer de valeur

// var est l'ancienne syntaxe — on l'évite (portée problématique)

Règle simple : utiliser const par défaut, let seulement quand la valeur doit changer.

Types primitifs

let nom = "Alice";            // string (guillemets simples ou doubles)
let age = 25;                 // number (pas de distinction int/float)
let estInscrit = true;        // boolean
let moyenne = null;           // null — absence intentionnelle de valeur
let prenom;                   // undefined — valeur pas encore assignée

En Python, on distingue int et float. En Java, on a int, long, float, double. En JavaScript, tout est number.

Types structurels

Tableau (array)

const fruits = ["pomme", "banane", "kiwi"];
fruits.push("mangue");          // ajouter à la fin
console.log(fruits[0]);         // "pomme"
console.log(fruits.length);     // 4

Objet

const etudiant = {
  nom: "Alice",
  age: 25,
  cours: ["IFT3225", "IFT3150"]
};
console.log(etudiant.nom);        // "Alice"
console.log(etudiant["age"]);     // 25 (notation alternative)

Template literals (interpolation de chaînes)

const nom = "Alice";
const age = 25;
console.log(`${nom} a ${age} ans`);   // backticks (`) obligatoires

Vérifier le type

typeof "allo"    // "string"
typeof 42        // "number"
typeof true      // "boolean"
typeof null      // "object"  ← bug historique de JS !
typeof undefined // "undefined"
Array.isArray([1, 2, 3])  // true

Conditions

const note = 78;

if (note >= 90) {
  console.log("A");
} else if (note >= 75) {
  console.log("B");
} else if (note >= 60) {
  console.log("C");
} else {
  console.log("Échec");
}

Égalité stricte vs faible

C’est une particularité importante de JavaScript :

5 == "5"     // true  — conversion automatique (coercition) ⚠️
5 === "5"    // false — types différents, pas de conversion

null == undefined   // true
null === undefined  // false

Règle absolue : toujours utiliser === et !==. L’opérateur == a des règles de conversion surprenantes qui mènent à des bugs subtils.

Opérateur ternaire

const statut = note >= 60 ? "Réussite" : "Échec";

Équivalent Python : statut = "Réussite" if note >= 60 else "Échec"

Opérateurs logiques

Boucles

for classique

for (let i = 0; i < 5; i++) {
  console.log(i);  // 0, 1, 2, 3, 4
}

for...of — itérer sur les éléments

const cours = ["IFT3225", "IFT2255", "IFT3150"];

for (const c of cours) {
  console.log(c);
}

C’est l’équivalent du for c in cours: de Python ou du for (String c : cours) de Java.

while

let n = 3;
while (n > 0) {
  console.log(n);
  n--;
}

Méthodes fonctionnelles sur les tableaux

Ces méthodes sont très idiomatiques en JavaScript moderne. Elles prennent une fonction en argument et retournent un nouveau tableau (sauf forEach).

const nombres = [1, 2, 3, 4, 5];

// forEach — exécuter une action pour chaque élément
nombres.forEach(n => console.log(n));

// map — transformer chaque élément
const doubles = nombres.map(n => n * 2);        // [2, 4, 6, 8, 10]

// filter — garder les éléments qui satisfont une condition
const pairs = nombres.filter(n => n % 2 === 0);  // [2, 4]

// find — trouver le premier élément qui satisfait une condition
const premier = nombres.find(n => n > 3);         // 4

// reduce — réduire à une seule valeur
const somme = nombres.reduce((acc, n) => acc + n, 0);  // 15

Fonctions

Déclaration classique

function saluer(nom) {
  return `Bonjour, ${nom}!`;
}

saluer("Alice");  // "Bonjour, Alice!"

Fonction fléchée (arrow function) — syntaxe moderne

const saluer = (nom) => {
  return `Bonjour, ${nom}!`;
};

// Version courte (retour implicite, une seule expression)
const saluer = (nom) => `Bonjour, ${nom}!`;

Les fonctions fléchées sont le style privilégié en JavaScript moderne, surtout pour les callbacks et les fonctions courtes.

Paramètres par défaut

const calculerTaxe = (prix, taux = 0.14975) => {
  return prix * (1 + taux);
};

calculerTaxe(100);          // 114.975 (TPS+TVQ du Québec)
calculerTaxe(100, 0.05);    // 105 (taux personnalisé)

Les fonctions sont des valeurs

En JavaScript, les fonctions sont des citoyens de première classe — on peut les stocker dans des variables, les passer en argument, et les retourner depuis d’autres fonctions.

const nombres = [3, 1, 4, 1, 5, 9];

// Passer une fonction en argument
nombres.sort((a, b) => a - b);     // tri croissant

// Stocker dans une variable
const operation = (a, b) => a + b;
console.log(operation(2, 3));       // 5

Déstructuration dans les paramètres

Un patron courant quand une fonction reçoit un objet :

// Sans déstructuration
const afficher = (etudiant) => {
  console.log(etudiant.nom, etudiant.age);
};

// Avec déstructuration
const afficher = ({ nom, age }) => {
  console.log(nom, age);
};

afficher({ nom: "Alice", age: 25 });