variables & constantes

définition

Une variable ou une constante permet de stocker de l'information en mémoire. c'est une "boite" reservée avec une emplacement dédiée fixe.

var : le mot clé historique pour les variables,
let : une evolution de var,
const : pour les constantes.

var sName; var iAge;

Comme beaucoup de chose en javascript, vous avez la possibilité d'utiliser une notation "chainée", c'est à dire sur une même ligne.

var sName, var iAge;

A la limite nous pourrons parler de :

Variables mobiles
variables constantes

var

Rapellez vous... les débuts chaotiques de JS. Donc var c'est, selon les grands principes de la programmation, du grand n'importe quoi.

ordre : osef !
redeclaration : ca marche
global : ce qui peut se reveler dangeureux (cf plus loin) ou au contraire tres pratique ("un grand pouvoir impose une grande responsabilité !")

// je peux affecter une variable avant de la déclarer sName = "Frédéric"; var sName; // sName est globale est sera donc accessible de partout dans mon code ! // Je peux redeclarer ma variable sans que cela genre JS var sName = "Phredd"; // notez qu'ici je declare ma variable sName et lui donne une valeur en une seule ligne.

let

Les évolutions JS ont introduit le mot reservé 'let' afin d'etendre les possibilités de JS. var n'est pas foncierement mauvais, simplement ce n'est souvent pas l'option la plus adapté (php à vécu un peu le meme historique). Par defaut, je vous recommande d'utiliser let au lieu de var. let a les propriétés inverses de var. Je ne les liste pas et vous donne seulement des exemples.

// je dois affecter une variable avant de la déclarer let sName; sName = "Frédéric"; let sName = "Frédéric"; // sName est deja déclaré, JS plantera. // sName est local à mon block de code (cf plus loin).

const

const ressemble beaucoup à var à l'exception que sa valeur ne peux pas changer : elle est constante.

Je n'aime pas la notion de "variable constante". Une chose est soit variable, soit contante dans le temps, mais pas les deux. Cette notion trainera peut etre encore dans les cours RBean. Normalement j'ai convaincu Laurie qui doit changer les contenus.

const sCHRISTMAS = 'december 25th'; const sCHRISTMAS = '25 décembre'; // provoquera une erreur JS

notion de portée

Il est indispensable de bien comprendre la notion de « portée » des variables lorsqu’on travaille avec les fonctions en JavaScript (ou tout autre language de programmation).

La « portée » d’une variable désigne l’espace du script dans laquelle elle va être accessible. En effet, toutes nos variables ne sont pas automatiquement disponibles à n’importe quel endroit dans un script et on ne va donc pas toujours pouvoir les utiliser.

En JavaScript, il n’existe que deux espaces de portée différents : l’espace global et l’espace local. Pour rester très simple, l’espace global désigne l’entièreté d’un script à l’exception de l’intérieur de nos fonctions. L’espace local désigne, à l’inverse, l’espace dans une fonction.

Ici, vous devez bien retenir la chose suivante : une variable définie dans l’espace global d’un script va être accessible à travers tout le script, même depuis une fonction. En revanche, une variable définie dans une fonction n’est accessible que dans cette même fonction et ne peut pas être manipulée depuis l’espace global du script.

Cette notion de portée est une notion qu’on retrouve dans de nombreux langages informatiques. La portée permet de « protéger » certains codes et certaines variables en les rendant inaccessibles depuis l’extérieur. Cela permet de renforcer la sécurité d’un script et sa stabilité dans le cas où on ne voudrait pas qu’un utilisateur puisse modifier la valeur d’une variable depuis l’extérieur pour des raisons de cohérence et de logique du script.

{script} var sName = 'Frédéric'; let sAge = 45; {block} console.log(sName); // Affiche Frédéric console.log(sAge); // Affiche undefined var sName = 'Phredd'; // meme variable console.log(sName); // Affiche Phredd console.log(sAge); // Affiche undefined let sAge = 22; // nouvelle variable, local a {block} {/block} {fonction} console.log(sName); // Affiche Frédéric console.log(sAge); // Affiche undefined var sName = 'Phredd'; // meme variable let sAge = 22; // nouvelle variable, local a {fonction} {/fonction} console.log(sName); // Affiche Phredd, si je suis rentré dans {block] et./ou dans {fonction} sinon Frédéric console.log(sAge); // 45, les affectations, local, de sAge dans {block} et {fonction} n'affecte pas la variable sAge definie dans {script} {/script}

Vous aurez noté que certain 'let' provoqueront une erreur "already defined". Mais c'etait pour l'exemple.

types

Integer

une valeur entiere sur laquelle nous pourrons appliquer des operateurs arithmétiques .

let iAge = 22;

Float

une valeur décimale sur laquelle nous pourrons également appliquer des operateurs arithmétiques .

let fPrice = 9.99;

String

une chaine de caractères alphanumerique et speciaux. Ici pas de calcul possible ce qui ne nous empechera pas de pouvoir réaliser des operations.

concaténer deux string (les coller)
chercher un mot dans une phrase
supprimer une partie du texte
recupérer la premiere lettre
...

Alors que les valeurs numeriques s'écrivent tres simplement, pour une chaine de caractère nous aurons besoins d'un delimiteur afin de voir où commence et termine la chaine.

Les 3 séparateurs disponible

les doubles quotes (shift + 3)
les simples quotes (shift + 4)
le backtick (alt + 7 - qui vous en ajoutera 2 pour le prix d'un !)

// notez que j'aime aligner mes '='. Mais c'est très personnel, et peu courrant... let sGenre = 'M.'; let sFirstName = 'Frédéric"; let sLastName = 'Mazaudier'; console.log("Bonjour " + sGenre + " " + sFirstName + " " + sLastName); console.log('Bonjour ' + sGenre + ' ' + sFirstName + ' ' + sLastName); console.log(`Bonjour ${sGenre} ${sFirstName} ${sLastName}`);

l'utilisation de l'un ou l'autre des séparateurs est question de :

préference personnelle
situation

ex :

si la string contient une apostrophe, alors les doubles quotes seront plus commode
si vous codez en php, alors vous favoriserait les simples cotes (en php, les " sont plus "lourde" car se comporte un peu comme `` en JS)
...

Caractères spéciaux:

\ : Echapper un caractere génant
\n : retour à la ligne (\r, \r\n)
\t : affiche une tabulation

15:13:52,203 console.log('\tJe m\'appelle Fred\n'); 15:13:52,232 Je m'appele Fred

Bolean

true,
false.

mais aussi :

0 => false
toute valeur numerique hors O => true
une chaine => true
une chaine vide => false
toute expression traduisible en true/false (ex : iAge<19).

array

des tableaux qui contiennent une liste de valeur, de meme type ou pas.

let aDummy = ['Frédéric', 45, false]; let aiAge = [40, 23, 53, 12,]; let afPrice = [1.99, 10.0, 123];

rmq :

Le dernier élement du tableau n'a pas besoin du séparateur ','.
Mettre la virgule finale est une bonne habitude, cela evite les oublis si vous devez ajouter un nouvelle element
Vous aurez souvent à manipuler les array !
Il existe des matrices, ou array d'arrau

let aaData = [aDummy, aiAge, afPrice]; // Nom de variables mal choisi car pas assez precis...

object

Au centre de la POO, les objects simplifies la vie du developpeur par rapport au developpement procedural. Mais nous verrons cela plus en details dans un chapitre dédié. Pour le moment contentons nous d'identifier ce type de varibles.

var oCar = { sType : "Mercedes", sModel : "207D", sColor : "unspeakable but beautifull !" fPrice : null, iKm : 180000, fnStart : function() { console.log('vroooooooooooooooom'), };

Cas particuliers

null
undefined

JSON

Javascript utitlise un format de fichier appelé le JSON (JavaScript Object Notation), une sorte de XML mais moins verbeux.

var aBuy = [ { "name" : "kiwis", "qty" : 3, "price" : 3.12, }, { "name" : "mangue", "qty" : 1, "price" : 6.00, }, ];

mais dis moi ?

Je vous ai dit que JS etait un language non typé mais cela ne l'empeche pas d'avoir quelques types en reserves.

Dans un language typé, chacune de vos variables devra etre affecté à un type de donnée. Cela permet d'eviter des erreurs de logiques dans le code.

L'absence de typage donne a JS une certaine souplesse qui peut devenir génante à l'heure du debuggage... C'est une des missions rempli par TypeScript (une surchage JS, un peu comme sass/less pour css)

ex :

var sName = 'Frédéric'; sName = 45;

C'est pour cela, j'utilise quelques conventions personnelles pour ne pas me perdre sur le sens d'une variable !

Conventions

universelles ou presque :

in english
camelCase pour les variables, (et les fonctions)
snake_case et majuscule pour les constantes
PascalCase pour les classes,
significatif : évitez "var dummy = 'truc'.
n'ayez pas peur de faire long et unique

ou au contraire très personnelle !

volé a Alan Jardine, createur d'une excellente librairie dataTable, je prefixe mes variables, mes constantes, et meme mes fonctions par une ou deux lettres representant leur type :

iAge : pour un integer,
fPrice : pour un float,
sName : pour une string,
aiAge : pour un array d'integer,
asName : pour un array de string,
oPerson : pour un objet,
fnDoThingVeryImportant : pour une fonction

c'est bien pratique et libère un peu de mémoire. ce qui me permet de me concentrer sur d'autres aspect du code.

Cela rend les erreurs plus flagrantes :

iAge = 'omg'; if(sName < 4) fnDoThingVeryImportant();

Au milieu d'un gros script, je n'ai pas besoin de me souvenir d'une variable pour voir d'un coup d'oeil le type de valeur attendue

Connaitre le type d'une variable

console.log(typeof 42); // Expected output: "number" console.log(typeof 'blubber'); // Expected output: "string" console.log(typeof true); // Expected output: "boolean" console.log(typeof undeclaredVariable); // Expected output: "undefined"