Instruction
Les applications JavaScript sont composées de plusieurs instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et on peut avoir plusieurs instructions sur une seule ligne si chaque instruction est séparée de la suivante par un point-virgule.
Les instructions de contrôle du flux
Diagramme d'activité
Lors de la création d'un programme, il est régulièrement nécessaire de faire des choix qui vont influencer le déroulement du parcours dans lequel est engagé l'utilisateur. Les diagrammes d'activité UML (ou de flux) sont souvent ceux utilisés pour démontrer la logique d'un algorithme. C'est à partir de ces flux que les structures de contrôle les plus adaptées seront choisies.
On peut visualiser ces parcours via des diagrammes de flux. Ces choix s'opèrent dans le code à l'aide de "structures" de contrôle ou instructions dont voici les principales
Condition if ...else
Cette instruction exécute une instruction si une condition donnée est vérifiée. Si la condition n'est pas vérifiée une autre instruction pourra être exécutée
let i = 2; if(i > 2) { console.log("i est supérieur à 2"); }else { console.log("i est inférieur ou égal à 2"); } /* == ceci est une comparaison */ if(i == 2){ console.log("i est égal à 2"); }
Bloc
Une instruction de bloc est utilisée pour regrouper zéro ou plusieurs instructions. Un bloc est délimité par une paire d'accolades.
break
Cette instruction termine la boucle ou l'instruction switch
ou l'instruction label
en cours et continue l'exécution sur l'instruction suivant l'instruction terminée.
continue
Cette instruction termine l'exécution des instructions dans la boucle courante, ou la boucle avec une étiquette correspondante, et continue l'exécution de la boucle dans l'itération suivante.
switch
Cette instruction permet d'évaluer une expression et de faire correspondre le résultat de cette expression avec différents cas et d'exécuter les instructions associées aux cas qui ont chacun un identifiant.
L'instruction switch évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.
const expr = 'Papayas'; switch (expr) { case 'Oranges': console.log('Oranges are $0.59 a pound.'); break; case 'Mangoes': case 'Papayas': console.log('Mangoes and papayas are $2.79 a pound.'); // Expected output: "Mangoes and papayas are $2.79 a pound." break; default: console.log(`Sorry, we are out of ${expr}.`); }
Que se passe-t-il si on oublie un break ?
Si on omet une instruction break, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction switch ou jusqu'à une instruction break. Par exemple :
var toto = 0; switch (toto) { case -1: console.log('moins un'); break; case 0: // toto vaut 0 donc ce cas correspond console.log(0); // NOTE : le break aurait du être placé ici case 1: // pas de break pour 'case 0:' les instructions de ce cas sont // exécutées aussi console.log(1); break; // on a un break a ce niveau donc les instructions // des cas suivants ne seront pas exécutées case 2: console.log(2); break; default: console.log('default'); }
throw
Cette instruction lève une exception.
try...catch
Cette instruction permet de spécifier un ensemble d'instructions à tenter, et de préciser le traitement à effectuer dans le cas où une exception est produite.
Déclarations
var
Cette instruction permet de déclarer une variable, éventuellement en fournissant une valeur pour permettant de l'initialiser.
let
Cette instruction permet de déclarer une variable locale dans une portée d'un bloc et éventuellement d'initialiser sa valeur.
const
Cette instruction déclare une constante en lecture seule.
Fonctions et classes
function
Cette instruction déclare une fonction avec les paramètres donnés.
return
Cette instruction spécifie la valeur de retour renvoyée par une fonction.
class
Déclare une classe.
Itérations
for
for(let i = 0; i < 10; i ++) { console.log(i); }
while
Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.
let i = 0; while(i < 10) { console.log(2*i+1); i++; }
boucle do ... while
Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette boucle sera exécutée au moins une fois.
boucle for ... in
const jc = { nom: "Dusse", prenom: "Jean-Claude", sePresenter: function(){ console.log("Bonjour, je m'appelle " + this.prenom + " " + this.nom); } } for(let key in jc) { console.log(key + " : " + jc[key]); } // LES OBJETS EN JS SE COMPORTENT COMME DES TABLEAUX ASSOCIATIFS (améliorés !) console.log(jc.nom); console.log(jc["nom"]); console.log(jc.sePresenter()); console.log(jc["sePresenter"]());
Parcours d'un tableau à index avec la boucle for
// Tableau littéral à index var personnages = ["Harry","Hermione","Ron","Voldemore"]; let taille = personnages.length; for(var i = 0; i < personnages.length; i ++) { console.log(personnages[i]); }
Parcours d'un tableau à index avec la boucle for ... of
const fruits = ["Cerise", "Pomme"]; for(let elt of fruits) { console.log(elt); }
Autres
debugger
Cette instruction appelle une fonctionnalité de débogage. Si aucune fonctionnalité de débogage n'est disponible, l'instruction n'a aucun effet.
export
Cette instruction permet à un script signé de fournir des propriétés, fonctions et des objets à d'autres scripts (signés ou non).
import
Cette instruction permet à un script d'importer des propriétés, fonctions ou objets depuis un script qui les exporte.
label
Cette instruction fournit un identifiant auquel il est possible de se référer en utilisant une instruction break ou continue.
Expression
Une expression peut être vue comme une unité de code valide qui est résolue en une valeur. Il existe deux types d'expressions, celles qui ont des effets de bord (par exemple l'affectation d'une valeur) et celles qui sont purement évaluées.
L'expression x = 7 fait partie de la première catégorie. Elle utilise l'opérateur = afin d'affecter la valeur sept à la variable x. L'expression elle-même est évaluée avec la valeur 7.
L'expression 3 + 4
fait partie de la deuxième catégorie. Elle utilise l'opérateur +
afin d'ajouter 3
et 4
pour produire une valeur : 7
. Toutefois, si cette valeur n'est pas utilisée au sein d'une structure plus importante (par exemple avec une déclaration de variable comme const z = 3 + 4
), elle sera immédiatement écartée (il s'agit généralement dans ce cas d'une erreur de programmation, car l'évaluation ne produira aucun effet).
Comme les exemples précédents ont permis de montrer, toutes les expressions complexes sont formées avec des opérateurs, tels que =
ou +
.
Une expression ne doit pas contenir de mot-clés comme if, var, etc
Expression VS Statement (instructions)
Les expressions produisent une valeur qui peut être transmise à une fonction. Les instructions ne produisent pas de valeur et ne peuvent donc pas être utilisées comme arguments de fonction.
Zoom sur quelques opérateurs remarquables
Chaînage optionnel (optional chaining) (?.)
L'opérateur ?. fonctionne de manière similaire à l'opérateur de chaînage ., à ceci près qu'au lieu de causer une erreur si une référence est null ou undefined, l'expression se court-circuite avec undefined pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne undefined si la fonction donnée n'existe pas.
Ex :
obj.last?.toUpperCase()
Opérateur OR (||)
let i = j || 12;
L'opérateur OR va retourner l'opérande de droite si celle de gauche est "falsy" (false, "", 0, undefined)
Comparaison
Cas des types primitifs
Dans le cas des types primitifs, js va comparer les valeurs (avec ou sans transtypage)
let i = 2; // type : number let j = "2"; // type : string if(i==j){// le == fait du transtypage console.log("i est égal à j"); } if(i===j){// le === ne fait pas de transtypage console.log("i est égal à j"); }else { console.log("i n'est pas égal à j"); }
A votre avis que va afficher le code ci dessus ?
"i n'est pas égal à j"
Cas des types objet
Dans le cas des objets, js va comparer non pas les valeurs mais les références. Plus d'infos
let i = 2; let j = i; if (i === j) console.log('i et j identiques'); let p1 = {"name": "Bob"}; let p2 = {"name": "Bob"}; let p3 = p1; if (p1 == p2) console.log('p1 et p2 identiques'); if (p1 == p3) console.log('p1 et p3 identiques');
A votre avis que va afficher le code ci dessus ?
p1 et p3 identiques
Incrémentation
Référence : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Increment
L'opérateur d'incrémentation (++
) permet d'incrémenter (c'est-à-dire d'ajouter un) à son opérande et de renvoyer une valeur qui est le résultat avant ou après la modification.
Utilisé comme suffixe (l'opérateur étant placé après l'opérande), comme dans x++, l'opérateur incrémentera la valeur et renverra la valeur avant l'incrément.
Utilisé comme préfixe (l'opérateur étant placé avant l'opérande), comme dans ++x, l'opérateur incrémentera la valeur et renverra la valeur après l'incrément.
let x = 3; const y = x++; console.log(`x:${x}, y:${y}`); // Expected output: "x:4, y:3" let a = 3; const b = ++a; console.log(`a:${a}, b:${b}`); // Expected output: "a:4, b:4"
Voir le détail des autres opérateurs :
- Opérateurs d'affectation
- Opérateurs de comparaison
- Opérateurs arithmétiques
- Opérateurs binaires
- Opérateurs logiques
- Opérateurs pour les grands entiers
- Opérateurs pour les chaînes de caractères
- Opérateur conditionnel (ternaire)
- Opérateur virgule
- Opérateurs unaires
- Opérateurs relationnels