Javascript pour les programmeurs python


Différences syntaxiques

Variables

Déclaration dune variable

Contrairement à la situation de python où il ny a rien de spécial à faire pour créer une variable si ce nest lui affecter une valeur, les variables en javascript doivent être introduites par un mot clé parmi les 3 suivants:

  • var parmet de créer une variable globale. Lusage de var est fortement déconseillé de nos jours, il date dune époque où les deux mots clés suivants nexistaient pas encore (avant la versions javascript de 2015).
  • let permet de créer une variable. Cela correspond dailleurs à la tournure mathématique (anglaise) pour dire Soit \(x\) la variable qui
  • const permet de créer une constante: javascript interdira dattribuer une autre valeur à la constante par la suite (mais attention, si la valeur est elle-même modifiable par exemple un tableau , le contenu pourra néanmoins être modifié).

Quelques exemples:


let x = 2;
console.log(x);
x = 3;
console.log(x);

const pi = 3.1415927;
console.log(pi);
pi = 3; // C'est marqué dans la Bible, Livre des Rois, 7, 23.
// javascript déclenche une erreur à la ligne précédente.

Variables locales à un bloc

Attention: La création dune variable par let ou const est locale au bloc dans laquelle elle a été crée. Le programme suivant (pourtant a priori naturel) ne fonctionne donc pas:

const age = 42;
if (age > 65) {
    const retraité = true;
} else {
    const retraité = false;
}

console.log(retraité); // La constante retraité n'existe pas en dehors du bloc où elle a été créée...

Il faut donc procéder comme suit:

let retraité; // vaudra undefined par défaut
const age = 42;
if (age > 65) {
    retraité = true;
} else {
    retraité = false;
}

console.log(retraité); 
// Ici ça fonctionne parce que la variable a été créée AVANT le if, 
// elle existe donc même après (dans le bloc englobant, qui n'existe pas ici).

Oui, mais la variable retraité nest plus une constante. Et si on veut vraiment une constante, tout en gardant le if ?

Cest possible en javascript à laide dune syntaxe très particulière héritée de lantique langage C:

const age = 42;
const retraité = (age > 65) ? true : false;
console.log(retraité);

La syntaxe condition ? <valeur si vraie> : <valeur si fausse> est une sorte de if simplifié, que lon peut incorporer dans une expression.

En python, on pourrait écrire (mais ce nest pas couramment utilisé en pratique, le code est moins lisible):

retraité = True if age > 42 else False

Conditionnelles

Écrire une condition

Les connecteurs logiques (et, ou et non) existent bien évidemment tout autant en javascript quen python, mais ils utilisent une syntaxe particulière, héritée du langage C (qui a environ une cinquantaine dannée dexistence).

Python Javascript
et and &&
ou or ||
non not !

La manière de combiner ces différents connecteurs est mis à part la syntaxe strictement identique quen python: on utilise des parenthèses lorsque cela est nécessaire.

Les opérateurs de comparaisons sont quasiment identiques au cas de python, à une différence notable près: le symbole dégalité (ou de différence) utilise un triple === en javascript. Le double == existe aussi, mais il réalise parfois une conversion implicite de types de données, ce qui nest souvent pas souhaitable.

Python Javascript
égalité == ===
différence != !==
comparaisons <, >, <=, >= <, >, <=, >=

Voici en quoi le test dégalité diffère de celui de python:

1 === '1' // vaut false, comme 1 == '1' en python
1 == '1' // vaut true parce que '1' est implicitement converti en 1

Python neffectue jamais de conversions implicites, ce qui rend le code source beaucoup moins ambigü.

Un exemple:

Voici la condition pour tester si une année \(n\) est bissextile:

En python tout dabord:

n = 2021

if (n % 4 == 0 and n % 100 != 0) or (n % 400 == 0):
    print("L'année {} est bissextile".format(n))
else:
    print("L'année {} n'est pas bissextile".format(n))

Et la version javascript:

let n = 2021;

if ((n % 4 === 0 && n % 100 !== 0) || (n % 400 === 0)) {
    console.log(`L'année ${n} est bissextile`);
} else {
    console.log(`L'année ${n} n'est pas bissextile`);
}

On montre aussi ici le mécanisme dinterpolation de chaînes de caractères: le classique format avec python, et pour javascript une chaîne de caractère introduite avec des backquotes ` (touches Alt Gr + 7 sur un clavier français) dans lesquelles il est possible de mettre nimporte quelle expression javascript avec la syntaxe ${ ... }.

Notons quun mécanisme similaire existe dans les toutes dernières versions de python (à partir de la version 3.6): on pourrait écrire

n = 2021

if (n % 4 == 0 and n % 100 != 0) or (n % 400 == 0):
    print(f"L'année {n} est bissextile")
else:
    print(f"L'année {n} n'est pas bissextile")

Cest plus pratique et lisible que format, mais ne fonctionnera pas sur des versions plus anciennes de python (et notamment pas sur le python 3.5 installé au labo dinfo du lycée Carnot).

Syntaxe dune conditionnelle

En javascript, le mécanisme est sémantiquement identique à celui de python, même si la syntaxe diffère.

if (condition) {
    // Code à exécuter si la condition vaut true
} else {
    // Code à exécuter si la condition vaut false
}

Quelles sont les différences notables:

  • Les parenthèses autour de la condition sont obligatoires en javascript.
  • Les blocs de code ne sont pas déterminés par lindentation (qui est purement cosmétique, à usage des lecteurs humains) mais par les accolades ‘{ }’

Comme en python, la partie else est facultative.

Conditions multiples

Il ny a pas dinstruction elif en javascript, car elle est parfaitement inutile (en effet, puisque rien nest imposé en terme dindentation, on peut présenter une suite de else if de manière linéaire, comme en python avec elif):

if (âge < 14) {
    console.log('Enfant');
} else if (âge < 24) {
    console.log('Adolescent(e)');
} else if (âge < 64) {
    console.log('Adulte');
} else {
    console.log('Aîné(e)s');
}

Boucles while

Les boucles tant que fonctionnent à lidentique en javascript et en python, la seule différence étant que les parenthèses sont indispensables autour de la condition (et que lon utilise des accolades pour marquer le bloc dinstructions à répéter, évidemment):

let i = 0;
while (i < 100) {
    console.log(`Itération n°${i+1}`);
    i += 1:
}

Boucles for

La boucle pour, quelle que soit le langage, est juste un raccourci syntaxique pour représenter la boucle suivante:

<initialisation>
TANT QUE <condition> FAIRE
    ... // instructions
    <incrémentation>
FIN TANT QUE

La syntaxe javascript reprend ces trois éléments de manière explicite. On écrira:

for (<initialisation> ; <condition> ; <incrémentation>) {
    ... // instructions
}

Voici un exemple, où on reprend la boucle while précédente:

for (let i = 0; i < 100; i += 1) {
    console.log(`Itération n°${i+1}`);
}

Cette boucle for est strictement équivalent à la boucle while correspondante.

Notons que les parenthèses sont obligatoires, ainsi que les deux point-virgules, même si lune ou plusieurs des trois composantes sont vides.

On peut (par exemple) obtenir une boucle infinie de la manière suivante:

for (;;) {
    ... // instructions
}

Mais dans ce cas, il est plus lisible dutiliser:

while (true) {
    ... // instructions
}

Fonctions

Comme en python, une fonction est une valeur comme une autre (ou presque), que lon peut affecter à une variable. Il existe plusieurs manières (plus ou moins) équivalentes pour définir une fonction:

  • Par une définition explicite utilisant le mot clé function, plus ou moins équivalent au def de python:
    function carré(x) {
        return x*x;
    }
  • Toujours à laide de function, mais en créant la fonction de manière anonyme dans un premier temps, pour ensuite laffecter à une variable:
    const carré = function(x) {
        return x*x;
    }
  • À laide dune syntaxe apparue en 2015, qui ressemble à sy méprendre à lexpression \(x\longmapsto x^2\) utilisée en mathématiques (on parle de fonctions fléchées en javascript). Cette syntaxe est très utilisée lorsque lon a besoin dune fonction à passer en paramètre à une autre fonction (par exemple pour un gestionnaire dévénements, mais pas uniquement):
    const carré = (x) => {
        return x*x;
    }

Littéralement, on vient de dire à javascript: carré est la fonction qui a × associe x*x.

Structures de données

En javascript, on dispose de tableaux (qui se comportent aussi comme des listes, tout comme en python), de dictionnaires (appelés objets en réalité, mais cest sans importance dans un premier temps), mais pas de tuples. Il faudra donc utiliser des tableaux à la place des tuples.

Heureusement pour nous, la syntaxe et lutilisation de ces structures ressemble énormément à celle de python.

Les tableaux/listes

Voici quelques exemples dutilisation dun tableau en javascript:

const t = ["pomme", "poire", "cerise", "ananas", "banane"];

// Accès à un élément par son indice, démarrant à zéro comme en python:
console.log(t[0]); // affiche pomme
console.log(t[4]); // affiche banane

// Longueur d'un tableau
console.log(t.length) // Affiche 5

// Accéder à tous les éléments d'un tableau
for (let indice = 0; indice < t.length; indice += 1) {
    console.log(`L'élément d'indice ${indice} est ${t[indice]}.`);
}

// Une boucle ressemblant à la syntaxe "for élément in tableau:" de python, et qui
// comporte le même désavantage: on n'a pas d'accès aisé à l'indice:
t.forEach((élément) => {
    console.log(élément);
});

Notons que la fonction forEach prend pour unique paramètre une fonction qui prend pour paramètre les éléments successifs du tableau. Les fonctions fléchées sont généralement utilisées dans ce cas, mais on peut très bien mettre le nom dune fonction définie précédemment:

function affichage(élément) {
    console.log(élément);
}

t.forEach(affichage); // Appelle affichage pour chaque élément du tableau

Tout comme en python, les tableaux de javascript sont dynamiques et peuvent changer de forme (par ajout ou suppression déléments) en cours de vie:

const L = [];

// append (python) devient push (javascript)
L.push("pomme");
L.push("poire");
L.push("cerise");
L.push("ananas");
L.push("banane");

// La fonction pop retire (et renvoie la valeur) le dernier élément. Commen en python
console.log(L.pop()); // affiche banane
console.log(L); // affiche ["pomme", "poire", "cerise", "ananas"]

// La fonction shift ajoute un élément en _début_ de tableau
L.shift("banane");
console.log(L); // affiche ["banane", "pomme", "poire", "cerise", "ananas"]

// La fonction unshift fonctionne comme pop, mais en début de liste:
console.log(L.unshift()); // affiche "banane"

Ces fonctions permettent de simuler facilement une pile ou une file (pour les élèves de Terminale). Une pile/file sera une simple liste, et on aura alors:

  • Pour les piles: les valeurs entrent et sortent du même côté (cest plus efficace en fin de liste quen début de liste pour des questions dimplémentations):

    Pile Javascript
    empiler(valeur) p.push(valeur)
    dépiler() p.pop()
    la pile est-elle vide ? p.length === 0
  • Pour les files: les valeurs entrent dun côté et sortent de lautre:

    File Javascript
    enfiler(valeur) f.shift(valeur)
    défiler() f.pop()
    la file est-elle vide ? f.length === 0

    On aurait aussi pu utiliser f.push(valeur) pour enfiler et f.unshift() pour défiler, cest équivalent. Lessentiel est de ne pas changer en cours dutilisation de la file.

Les dictionnaires

On peut définir un objet ressemblant à sy méprendre à un dictionnaire python à laide dune syntaxe très similaire:


const d = { 'nom': 'Snow', 'prénom': 'Jon', 'profession': 'Commandant' };

console.log(d['prénom']); // affiche Jon

// Les guillemets sont facultatifs en javascript (sauf s'il y a des espaces).
// La syntaxe alternative suivante est très plaisante:

console.log(d.prénom); // affiche Jon

// On peut tester si une clé est dans le dictionnaire
console.log('nom' in d); // affiche true
console.log('âge' in d); // affiche false

// Les dictionnaires sont modifiables
d['profession'] = 'Garde de la nuit';

// ... mais on pourrait aussi écrire:
d.profession = 'Garde de la nuit';

// Boucler sur toutes les clés d'un dictionnaire:
for(let clé in d) {
    console.log(clé, d[clé]);
}
// Notons que la syntaxe d.clé ne fonctionnerait pas ici, car elle 
// équivaut à d['clé'] qui n'existe pas...

// Une syntaxe plus moderne (ne fonctionne pas dans le vieux navigateurs):
Object.entries(d).forEach([clé, valeur] => {
    console.log(clé, valeur);
});

La dernière syntaxe ressemble à léquivalent python suivant:

for clé, valeur in d.items():
    print(clé, valeur)