#1 Découvrez l'ES6 [variables]

Salut à toi qui t'apprête à lire ces fabuleuses lignes!


L'es6 n'est pas un framework, mais plutôt une nouvelle syntaxe du JavaScript autoriser par beaucoup de navigateur (es6: ECMAScript 6).

Je vais lister les nouveautés de l'es6 en plusieurs tutoriel, ici je vais parler des variables.


LES VARIABLES

En JavaScript, on définit les variables comme ceci:


var uneVariable= "Une valeur";


Grâce à l'es6, on a 2 nouvelles manière de le faire:


  • Retour sur var


Le mot-clé var est utilisé pour définir des variables globales, donc utilisable dans tout le code, voici un exemple pour vous aidez à comprendre:


var variable;
function fonction() {
  variable = "JavaScript";
}


fonction();


console.log(variable);
// Retourne "JavaScript"


  • let, place au local


Le mot clé let, permet de définir des variables locales, donc utilisable uniquement dans un bloque de code, un exemple:


for (var a = 0; a <= 9; a++) {
  if (a == 5) {
    let o = "Bonjour";
    console.log(o);// Retourne Bonjour
  } 
}


Ça retourne bien "Bonjour" maintenant exécuter ce code là:


for (var a = 0; a <= 9; a++) {
  if (a == 5) {
    let o = "Bonjour";
  } 
  console.log(o);// Une erreur
}


Normalement, vous deviez avoir une erreur, c'est parce que la variable "o" ne peut être utilisé que dans le bloc if et même les sous blocs sont pris en compte:


for (var a = 0; a <= 9; a++) {
  if (a == 5) { // On va l'appelé if1.0
    let o = "Bonjour";
    if (o == "Bonjour") {// On va l'appelé if2.0
      console.log(o);// Retourne Bonjour
    }
  }
}


Le code marche parce que if2.0 fait partie de if1.0


D'ailleurs on va optimiser un peu le code:


for (let a = 0; a <= 9; a++) { // let à la place de var
  if (a == 5) {
    let o = "Bonjour";
    if (o == "Bonjour") { 
      console.log(o);// Retourne Bonjour
    }
  }
}


Avec ça, plus besoin de définir plusieurs compteur ayant des noms différent. La preuve, ajoutez console.log(a) en dehors de la boucle, là vous tomber sur une belle erreur 😁.


Là vous vous demandez surement: "En quoi c'est utile?", imaginons que vous travaillez sur un énorme projet, vous avez plusieurs boucles, plusieurs variable, plusieurs fonction, ça sera difficile de ne pas répéter le même nom de variable et aussi de se rappeler que l'on a déjà défini la variable.


  • Les constantes


Une constante, c'est une variable locale avec une valeur par défaut (elle reste constante😆), donc lorsque vous lui donnez une valeur, vous ne pouvez plus la changer, sinon vous aurez une belle erreur 😂. Elle se définit avec le mot-clé const, voici un exemple:


const CONSTANTE= "valeur";

console.log(CONSTANTE);// Retourne valeur

CONSTANTE= "une autre valeur";// Retourne une erreur, on ne peut pas modifier une constante

const UNE_NOUVELLE_CONSTANTE; // Retourne une erreur, une constante doit être définit


Elle peut être utile pour vous disciplinez à ne pas modifier une variable 😂😂, mais plus sérieusement on l'utilise pour les variables qui ne vont pas être modifier (comme les clé d'API). Et par convention, on les écrit en majuscule.

620 vues
11 août 2020 à 19:39 (Édité)
Cette pub permet au site de vivre ...

3 commentaires

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !

Salut @nodewin et bienvenue !


Très bon tutoriel 😉

Penses juste à mettre des espaces entre les blocs de codes (j'ai réédité).😉

Je mets ton tuto en favoris 🙃


A + ✌

L'es6 a beaucoup de nouveauté, donc je vais en publié une tout les jours.

J'espère que vous aimez le contenu 😃😃.


Je compte faire plusieurs tutoriels sur le JavaScript avancé notamment sur React.

Et peut-être du développement mobile avec React-Native.


Surtout n'hésitez pas à poser des questions et me faire des remarques😉😉

Cette pub permet au site de vivre ...