Portée des variables en Javascript (Variable scope)

Cacher des variables

En javascript toutes les variables déclarées dans une fonction ne sont visibles que dans cette fonction.

function maFonction() {
  var variableCachee = "une variable cachée";
}

alert(variableCachee); // Retourne une erreur car la variable est inaccessible à l'extérieur de la fonction.

/////////////////
//Autre exemple//
/////////////////

// Variable globale
var x = 0;

(function() {

  // Variable privée
  var x = 1;
  alert(x); // Renvoi 1

})();

alert(x); // Renvoie 0

En utilisant la technique de la fonction sans nom il est possible de "cacher" des variables pour qu'elles soient invisibles dans le reste du code javascript.

(function() {

  // Variable "cachées"
  var varChache1 = 1;
  var varChache2 = 1;
  var varChache3 = 1;
  

})();

alert(varChache1); // retourne une erreur car la variable est seulement accessible à l'intérieur de la fonction sans nom

* La fonction sans nom est immédiatement exécutée grâce au 2 parenthèses à la fin "();".

 

La variable this

En javascript la variable this est relative à chaque fonction.

function maFonction() {
  
  this.variable = "Ceci est une variable";

  function autreFonction() {

    alert(this.variable); //Retourne une erreur car this est maintenant relatif à autreFonction

  }
  

}

Une bonne pratique pour avoir accès au this d'une fonction parente est de l'attribuée à une autre variable.

function maFonction() {

  //On attribue la variable this à une autre variable nommé self
  var self = this;
  
  self.variable = "Ceci est une variable";

  function autreFonction() {

    alert(self.variable); //Retourne "Ceci est une variable"

  }
  

}

Si vous utilisez jQuery, cette technique est souvent utile car la variable this fait souvent référence à l'élément en cours.

$("#bouton").click(function() {

  //On attribue l'élément en cours à une variable pour pouvoir l'utiliser dans les fonctions suivantes
  var bouton = $(this);
  
  bouton.val("Chargement...");

  //On fait par exemple une requète AJAX
  $.get("/contact.php",function(data) {

    //La variable «bouton», déclarée plus haut, nous permet d'accéder à l'élément «bouton» même à l'intérieur d'une autre fonction.
    bouton.val("Terminé");

  });
  

}