Discussion autour des boucles

Amélioration du code

La structuration de valeurs dans un tableau, nécessite une boucle pour réaliser un parcours des valeurs.

Exemple : 

Affichons simplement les éléments d'un tableau :

let array = [1, 2, 3];
for (let i = 0; i < array.length; i++) {
  let current = array[i];
  console.log(current); // affichage
}


Imaginons l'affichage des valeurs comme une action.

for (let i = 0; i < array.length; i++) {
  let current = array[i];
  actionAffichage(current); // affichage
}

Affichage positif

Pour afficher les valeurs positives, il est facile de créer une condition ; la fonction précédente devient.

for (let i = 0; i < array.length; i++) {
  let current = array[i];
  if (current>0) actionAffichage(current);
}

ou

for (let i = 0; i < array.length; i++) {
  let current = array[i];
  actionAffichagePositif(current);
}

Affichage Négatif

Pour afficher les valeurs négatives, il est facile de créer une condition ; la fonction précédente devient.

for (let i = 0; i < array.length; i++) {
  let current = array[i];
  actionAffichageNégatif(current);
}

Bilans

Pour chaque type d'affichage, il est nécessaire de redéfinir la boucle.

Améliorations

Nous allons encapsuler le code de la boucle dans une fonction forEach.

Il nous reste à réfléchir sur le passage des actions (positif, négatif ...) comme paramètres.

Ainsi,  "afficher quelque chose" peut être vu comme une fonction.
Les fonctions étant des variables et comme les variables peuvent être passées en paramètres, on peut passer "afficher quelque chose" à une fonction.

Ainsi, la fonction "afficher quelque chose" sera passée en paramètre à la fonction forEach.

Résumé des codes

Affichage	function affVal(v){    console.log(`val tab : ${v}`) }
Affichage Positif	function AffPositif(v){    if (v>0) console.log(` val positif : ${v} `); }
Boucle sur le tableau	function forEach(array, fx) {   for (var i = 0; i < array.length; i++)//for of     fx(array[i]); }
Appel	forEach(T, AffPositif);
Appel anonyme	forEach(T, function (v){   console.log(`-> tab : ${v}`); });

En Action

Fichier code

JS Bin on jsbin.com

Pour aller plus loin !

forEach(filtre(T, EstPositif),affVal)

Définir la fonction "filtre" qui prend en paramètre également une fonction permettant de ne concerner que certaines valeurs du tableau.

Ainsi la fonction affVal ne fait plus qu'afficher, elle ne filtre pas les valeurs. 

Série d'articles

Les pointeurs

• notations
• rappels
• test
• clonage

Série d'articles sur :

• paramètres
• fonction en argument
• Découvrir les closures

New ES6

Les fonctions fléchées

• this et les fonctions fléchées
• portée
• Exemple de fonctions récursives

Cas du dom

• perte du contexte
• ES6

Différence entre fonction expression et fonction déclaration !

Voici deux déclarations de fonction.

1. Fonction déclaration : message
2. Fonction expression : mes

console.log(typeof message);// function
console.log(typeof mes); // undefined

// 1
function message(){
  console.log("hi");
}

// 2
var mes = function (){
  console.log("hi");
};

Nous allons étudier les différences de ces deux déclarations.

Portée

La fonction message est disponible dès que le programme est chargé, alors que la fonction mes ne sera disponible qu'après son affectation. 

Le test typeof des types en début de programme le démontre.

Autrement dit en début de programme, vous pouvez utiliser message mais pas mes ! 

Syntaxe

Une autre différence est la présence du point virgule lors de la définition de mes ; il s'agit en effet d'une affectation, il faut donc mettre un point virgule.

Argument

Un des intérêt d'utiliser l'affectation est que la fonction peut être passée en argument d'une autre fonction.

wellcome( mes ); // affiche "hi"

function wellcome ( textFx ){
  textFx ();
}

intérêt

Un autre intérêt est le dynamisme de l'affectation. 

En voici un exemple :

let mes,
    AM = true;

if ( AM ) {
    mes = function (){
      console.log("good morning");
    };
}

else { //pm
   mes = function (){
      console.log("good afternoon");
   };
}

wellcome ( mes );
function wellcome ( text ){
  text ();

}



JS Bin on jsbin.com