You are on page 1of 99

Variables & Functions en JavaScript

Pour Débutant
J AVA S C R I P T (Programmation Internet) V O L . I I

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga


+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
diasfb@mail2world.com

Après le succès foudroyant du Vol I destiné à démontrer de fa-


ç on pragmatique et pratique la puissance du JavaScript à r é
soudre m ê me les probl è mes Math é matiques (*l’
algorithmique
analyse des nombres de Kaprekar, *le calcul du carr é d’
d’ un
nombre, *le carr é parfait, *les tests conditionnels, *quelques
diff é rences entre langage C et JavaScript, mais aussi *diff é
rents éditeurs de texte et leurs particularités), voici le VOL
II basé sur ECMAScript 2019 (= ES2019 ou ES10) et qui est premi
èrement destiné à enrichir mon mémento personnel mais aussi à
aider les autres dans leurs premiers pas dans ce langage.

Cette démarche saugrenue/surprenante, de commencer par le plus


complexe pour continuer par le plus simple, s’ explique par le
fait que nous voulions d’ abord faire l’ apologie du langage
=JavaScript (ex LiveScript, normalis é dans ECMASCRIPT)= avant
de nous lancer en douceur dans ses abysses et détails.

Cette série présentera de faç ons très élégante, les concepts


fondamentaux (de base, essentiels) permettant un engagement
progressif, plus profond et plus efficace dans ce langage.
C’
est aussi, une fois de plus, l’
occasion de remercier, honorer,
glorifier, adorer et aduler le Grand Dieu, tout Puissant Cr é
ateur de toutes choses qui existent (et celles qui n’ existent
pas encore mais qui existeront, visibles et cach é es, connues
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
et ignor é es, imaginables et insoupç onnables...) pour toutes
les merveilles qu’ Il a toujours accomplies depuis bien avant mê
me la cr é ation des univers, toutes les dimensions et tout ce
qui s’ y trouve y compris les intra- / extra-terrestres, les
entit é s biologicoïdes (fantô mes et esprits errants, sir è nes,
elfs, gnomes, lutins...), et les entit é s é th é riques non-
biologiques (extra-dimensionnels) qui lui doivent tous aussi
Respect et V é n é rations, et qui s’ il le veut, peut faire les
pierres l’ adorer en criant très fortement (Luc 19:40 Et Jésus
r é pondant, leur dit; Je vous dis que si ceux-ci se taisent,
les pierres mêmes crieront = chant des dû nes).

DIASOLUKA Nz. Luyalu


Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980) Informaticien-
amateur, Programmeur et WebMaster.

Variables & Functions - 2 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

INTRODUCTION :

Javascript (JS, à ne pas confondre avec JAVA d’Oracle - Sun Microsys-


tems ) initialement LiveScript, livré pour la 1ère fois avec Netscape 2
début 1996 est un langage de script léger (scripting language =
lightweight programming language) Orienté Objet (OOP) créé en
1995 par l’ingénieur Brendan Eich [aik] de Netscape (né 1961 à
Pittsburgh en Pennsylvany, co-fondateur du projet Mozilla, de la fon-
dation Mozilla et de la corporation Mozilla) et standardisé par l'or-
ganisme ECMA ( European Computer Manufacturers Association ) en
1996 et 1997 basé sur ECMAScript (ES) grâce aux spécifica-
tions ECMA-262 et ECMA-402. Il est régi par le TC39 (Technical
Committee 39, le Comité technique 39 qui fait évoluer JavaScript [en
5 stades : st0 : strawman – Soumission initiale des idées, st1 : propo-
sal – demande écrite formelle, st2: draft – version initiale de la fonc-
tionnalité avec deux implémentations expérimentales, st3: candidate
– la demande de la proposition est revissée avec les feedback des
fournisseurs des browsers, st4: finished – la proposition est prête
pour inclusion dans ECMASCRIPT puis JavaScript, TypeScript, les
browsers, Node.js…]).

Langage de Programmation Orienté Objet, il était initialement destiné


à dynamiser les pages Web c’est-à-dire les rendre interactives (dy-
namiques, conversationnelles, responsives, réactives à temps réel).

JavaScript est un interpréteur (compile à la volée), il exécute direc-


tement sans passer par la compilation qui génère un code objet in-
termédiaire (pour les anciens programmes de format .com) ou direc-
tement exécutable (programmes .exe).

Quelques implémentations de ECMAScript à ne pas confondre :

Variables & Functions - 3 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
1. JavaScript (enrichissement d'ECMAScript),
2. JScript (variante de Microsoft lancé avec Internet Explorer 3),
3. EcmaScript (version standardisée de JS, dont la première en
1997). Il est plutôt dit que « ECMAScript is based on several orig-
inating technologies, the most well-known being JavaScript
(Netscape) and JScript (Microsoft). The language was invented
by Brendan Eich at Netscape and first appeared in that compa-
ny's Navigator 2.0 browser. The development of the ECMAScript
Language Specification started in November 1996. The first edi-
tion of this Ecma Standard was adopted by the Ecma General As-
sembly of June 1997. » (https://tc39.github.io/ecma262).
4. ActionScript (variante d'Adobe).

JS est aujourd’hui l’outil par excellence pour manipuler/gérer tous


les aspects d’une page Web (éléments : balises, nodes de l’arbre hié-
rarchique [arborescence] HTML : DOM = Document Object Model =
un API (Application Programming Interfaces ) permettant d’accéder
à tous les noeuds [élément, chaîne, commentaire] d’une page WEB),
le style, les events (événements), lire et écrire les éléments HTML,
valider les entrées, éditer le texte de la page Web (ajouter, supprimer,
modifier/transformer), détecter le browser, créer les cookies, gérer
les likes...

JS n’est certes pas le seul langage pour ce faire, il y a aussi par


exemple le PHP, etc et le CSS avec ses «media queries», mais JS a été
parmi les premiers, le plus populaire et le plus facile à maîtriser
permettant même de manipuler dynamiquement les feuilles de style
CSS, il est aussi le plus facile à implémenter et à utiliser car contrai-
rement au PHP par exemple, JS ne tient pas compte de la plate -forme
(serveur ou client=utilisateur final souvent un internaute).

De plus, un programme PHP DOIT préalablement être converti (par


le browser) côté client en code JS avant de s’exécuter.
Variables & Functions - 4 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Un interpréteur JS est actuellement incorporé dans tout navigateur,


et s’exécute alors dans ce navigateur, mais JS peut aussi s’utiliser
dans d’autres environnements en dehors d’un navigateur (Serveur
Web : scripts ASP ; Plates-formes : projet Node.js ; bases de données :
MongoDB, Apache CouchDB (AdobeAcrobat) ; des consoles interac-
tives d'exécution comme le Rhino ...).

JS a débordé de ses premiers objectifs, il est même utilisé comme


tout langage évolué (C/C++...) dans l’élaboration de logiciels com-
plets et volumineux entièrement écrits en JS. Il y existe ainsi des logi-
ciels complets et volumineux entièrement écrits en JavaScript, parmi
lesquels des traitements de textes, des logiciels de gestion et toutes
sortes d’autres logiciels...

Entrons dans le but de notre sujet, le JavaScript norme ES10


(ECMAScript 2019).

Variables & Functions - 5 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

CHAPITRE 1 : Les COMMENTAIRES dans JavaScript

Si dans HTML les commentaires (textes inertes) se présentent sous une


seule forme comme suit :

<!-- Bloc de commenatires -->

JS quant à lui accepte quatre formes de commentaires :

1. Commentaire multiligne :

/*
lignes de commentaires */

2. Commentaires en ligne : :

2.a. Le double « slash »


// Commente jusqu’en fin de ligne.

2.b.
<!-- Commentaire en ligne

2.c.
-> commentaire en ligne

Attention :

Ne confondez pas l’opérateur JavaScript de commentaire en ligne « -> »,


l’opérateur de fonction fléchée « => » et l’opérateur de countdown
« jusqu’à » « --> » :

<script type="text/javascript"> "use strict";


function countdown(n) {
while (n --> 6) // "Tant que n-- > 6"
console.log(n+" --> "+Math.log(n));
Variables & Functions - 6 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
}
countdown(11)
</script>

10 --> 2.302585092994046 test.html:4:7


9 --> 2.1972245773362196 test.html:4:7
8 --> 2.0794415416798357 test.html:4:7
7 --> 1.9459101490553132 test.html:4:7
6 --> 1.791759469228055 test.html:4:7

En fait « --> » n’est pas un opérateur comme tel, mais simplement le com-
plexe [ opérateur de décrémentation « -- » espacé de son opérande (de
gauche) et suivi directement du signe supérieur à « > » ] donnant « -- > » :

Son similaire (aussi un peu truqué) :

<script type="text/javascript"> "use strict";


function countdown(n) {
while (n ++< 10) // Incrément APRÈS.
console.log(n+" ++< "+Math.log(n));
}
countdown(5)
</script>

6 ++< 1.791759469228055 test.html:4:7


7 ++< 1.9459101490553132 test.html:4:7
8 ++< 2.0794415416798357 test.html:4:7
9 ++< 2.1972245773362196 test.html:4:7
10 ++< 2.302585092994046 test.html:4:7

CHAPITRE 2 : Les VARIABLES dans JavaScript

Comme tout langage de Programmation, JS utilise des variables (identi-


fiants de cellules-mémoire) locales ou globales, des fonctions, et des ob-
jets (comportant des propriétés et méthodes= fonctions propres (intrin-
sèques, internes, intégrées / incorporées).

Les variables servent à associer un nom (identifiant) à un contenu d’une


Variables & Functions - 7 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
partie de la mémoire de l’ordinateur ; ça peut être une donnée (un nombre,
un littéral, un objet) ou un code exécutable (function).

Mots-réservés à éviter comme identifiant :

await, abstract, arguments, boolean, break, byte, case, catch, char, class,
const, continue, debugger, default, delete, do, double, else, enum, eval, ex-
port, extends, false, final, finally, float, for, function, goto, if, implements,
import, in, instanceof, int, interface, let, long, NaN, native, new, null, pack-
age, private, protected, public, return, short, static, super, switch, synchro-
nized, this, throw, throws, transient, true, try, typeof, var, void, volatile,
while, with, yield.

En mode « "use strict"; », les mots suivants sont aussi réservés :

implements package protected


interface private public

Le code et les données dans JS doivent impérativement être contenus dans


l’élément SCRIPT imbriqué dans l’élément HEAD ou BODY tous deux
dans l’élément HTML. Pour ne pas ralentir le chargement (load) de la page,
la tendance actuelle est de placer les scripts juste avant la balise de ferme-
ture </body>.

Syntaxe globale de l’élément SCRIPT pour du code local :

<html>
<head>
<script type="text/javascript" language="JavaScript">
...
</script>
</head>

<body>
...Éléments HTML...
<script language="JavaScript" type="text/javascript">
...
</script>
</body>

Variables & Functions - 8 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

<script language="JavaScript" type="text/javascript">


...
</script>
</html>

Toutes les balises ci-dessus sont recommandées, mais pour un tout petit
script, seul l’élément SCRIPT est indispensable.

Par exemple un fichier ne contenant que ce code exécutera sans encombre :

<script> "use strict";


alert("Hello World!")
</script>

Rappelons que nous avons utilisé ici l’instruction « alert » pour l’affichage.

Il existe d’autres alternatives pour l’affichage :

<div id='id'></div>

<script> "use strict";


document.write("document.write <br>");
document.writeln("document.writeln <br>");

document.getElementById('id').innerText+=
"document.getElementById('id').innerText ";

document.getElementById('id').innerHTML+=
"document.getElementById('id').innerHTML";

console.log("console.log");
console.dir("console.dir");
alert("alert")
print("print")
</script>

Variables & Functions - 9 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Syntaxe de l’élément SCRIPT pour du code [dans un fichier] externe :

<script language="JavaScript"
type="text/javascript" src=URL>
</script>

<script language="JavaScript"
type="text/javascript"
src="myOwnSubdirectory/myOwn2ndJavaScript.js">
</script>

URL est l’emplacement du fichier de script qui peut être local à votre poste
de travail ou dans un réseau (LAN ou WEB) selon la syntaxe :

src="http://www.server.com/scriptfile.js"
ou
src="directory/scriptfile.js">

Déclaration / définition de variable :

Une variable peut être déclarée ou non, initialisée (valeur par défaut) ou pas
(« undefined »)

Variables & Functions - 10 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Déclaration / définition de paramètres par défaut :

Un paramètre formel peut être déclaré ou non, initialisé (avec une valeur par
défaut ou implicite) ou pas (« undefined »).

<script type="text/javascript"> "use strict";


let seek = _ => 5 ;

let arithm = (oper1 , oper2 = seek()) =>


oper1 * oper2;

console.log(arithm(10, 2)); // 20
console.log(arithm(20)); // 100
</script>

Exécution :

23:24:31,287 20 test.html:7:3
23:24:31,289 100 test.html:8:3

Un paramètre par défaut est celui qui est TOUJOURS pris en considération
avec la valeur lui définie quand la fonction appelante ne lui a pas envoyé
d’argument correspondant, mais prend éventuellement la valeur de
l’argument lui envoyé par la fonction appelante.

<script type="text/javascript"> "use strict";


function ard(n,p=2){
return
Math.floor(((n*Math.pow(10,p+1))+5)/10)
/ Math.pow(10,p)
}

console.log(ard(Math.PI)) // 3.14
console.log(ard(Math.PI,2)) // 3.14
console.log(ard(Math.PI,0)) // 3
console.log(ard(Math.PI,-1)) // 0
console.log(ard(Math.PI,5)) // 3.14159
console.log((Math.PI).toFixed(5)) // 3.14159
console.log(ard(Math.PI,Math.E)) // 3.1411691558523307
Variables & Functions - 11 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
console.log((Math.PI).toFixed(Math.E)) // 3.14
</script>

Sans paramètres par défaut (initialisés) :

<script type="text/javascript">
E = Math.E; // Le mode strict déclaré plus loin
///////// function f(p=5) { "use strict";
// SyntaxError: "use strict" not allowed
// in function with default parameter
// test.html:3:20

"use strict"; // Activation mode strict, n’affecte pas E.

function f(p) { // paramètre simple.


const PI=Math.PI;
console.log(E+" & "+PI+" & "+p)
}
f(5); // Appel de la fonction avec argument.
</script>

Avec paramètre par défaut (initialisé), mais en mode standard !

N.B.: L’argument d’appel d’une fonction écrase la valeur par défaut du


paramètre formel de la fonction appelée.

<script type="text/javascript">
E = Math.E; // mode strict déclaré après
function f(p=(a)=>{with(i in a){
console.log(i+"VRAI DUMMY")}
}) {
const PI=Math.PI;
console.log(E+" & "+PI+" & **"+p+"**")
}
f(); // Argument écrase paramètre par défaut.

Variables & Functions - 12 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
f([5,[1,"txt",{}],"Bull"]);
</script>

Paramètre par défaut : pas supporté par les anciens navigateurs :

Opera 12 :

[10/02/2018 09:44:14] JavaScript -


file://localhost/K:/test.html
Inline script compilation
Syntax error at line 2 while loading: expected ')', got '='
function ard(n,p=2){
-----------------^

Acoo Browser Version 1.98 build 744 Unicode 2008 :

Ligne: 2
Car: 18
Erreur: ')' attendu
Code: 0
URL: file:///K:/test.html

Maelstrom Version 37.0.2.1 (5920655) 2018 :

Uncaught SyntaxError: Unexpected token = test.html:2

A. La définition d’un paramètre formel par défaut peut puiser sa valeur


dans un des paramètres qui le précède mais l’inverse n’est pas vrai :
Variables & Functions - 13 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

<script type="text/javascript"> "use strict";


let arithm = (oper1 = oper2 * 4 , oper2) =>
oper1 * oper2;

// ReferenceError: can't access lexical declaration


// `oper2' before initialization test.html:2:1

console.log(arithm(undefined, 20)); // 100


</script>

B. Syntaxe correcte de définition d’un paramètre par défaut :

<script type="text/javascript"> "use strict";


let arithm = (oper1 , oper2 = oper1/4) =>
oper1 * oper2;

console.log(arithm(10, 2)); // 20
console.log(arithm(20)); // 100
console.log(arithm(20, undefined)); // 100
console.log(arithm(20, null)); // 0
</script>

Exécution :

23:28:01,876 20 test.html:5:3
23:28:01,878 100 test.html:6:3
08:30:04,521 100 test.html:7:3
08:30:04,521 0 test.html:8:3

C. Un paramètre formel par défaut ne peut pas se référer à un autre pa-


ramètre formel déclaré après lui :

08:39:28,460 20 test.html:5:3
08:39:28,463 NaN test.html:6:3
08:39:28,463 NaN test.html:7:3
08:39:28,463 0 test.html:8:3

Variables & Functions - 14 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Déclaration explicite de variable non initialisée :

var v

Les codes exécutables dans JavaScript doivent impérativement être con-


tenus dans l’élément SCRIPT.

<script>
let l ;
alert(l) ;

var v ;
alert(v) ;

const c ;
alert(c) ;
</script>

Voici ce que JS affiche à son exécution :

Firefox :

Yandex :

Une constante doit obligatoirement être initialisée, puisque par la suite on


ne peut plus lui affcter une valeur. En corrigeant donc cette erreur de non
affectation d’une valeur lors de la définition de la constante, on peut avoir
les affichages suivants (alert() est une méthode (fonction) de l’objet win-
dow (donc espace global) ; elle affiche un pop-up [=fenêtre surgissante] à
l’écran) :

Variables & Functions - 15 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Initialisation de variable non explicitement déclarée (définition et décla-


ration implicite de variable, valable seulement en mode normal = sloppy
moce). Ici, on initialise la variable à la date en cours.

<script>
v=new Date() ;
Variables & Functions - 16 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
alert(v)
</script>

Avec Firefox :

Avec Yandex :

Avec document.write() :

Tue Dec 19 2017 18:20:49 GMT+0100 (Paris, Madrid)

Variables « clés-valeurs » (intuitif) ;

<script type="text/javascript"> "use strict";


// Les clés-vals dans l'objet o.
var o = {20:5, k:4, 30:7, no:0, 10:9};

for(var [cle , val] of Object.entries(o))


console.log("*"+cle+' ^ '+val);

Variables & Functions - 17 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
Object.entries(o).forEach(([cle , val]) =>
console.log(cle+' : '+val));
// forEach est une function d’itération.
</script>

*10 ^ 9 / 10 : 9 test.html:6:8 / 9:8


*20 ^ 5 / 20 : 5 test.html:6:8 / 9:8
*30 ^ 7 / 30 : 7 test.html:6:8 / 9:8
*k ^ 4 / k : 4 test.html:6:8 / 9:8
*no ^ 0 / no : 0 test.html:6:8 / 9:8

I. Le mode (variante) strict de JavaScript :

JavaScript standard est un langage hypercompliant (très peu rigoureux, plu-


tôt très tolérant). Pour le rendre plus rigoureux / exigeant, utilisez le pragma
/ directive « use strict »; » comme toute première directive/instruction
(donc au tout début) du boc du corps de la fonction après les « (){ » ou juste
après la balise <script>. Les détails sur « use strict; » sur :
https://developer.mozilla.org/en -
US/docs/Web/JavaScript/Reference/Strict_mode .

La portée du pragma / directive « use strict»; » est seulement dans la portée


lexicale « lexical scope ».

Donc, deux modes de fonctionnement du JavaStript : Le JavaScript stan-


dard (mode non strict = « sloppy mode ») et le JavaScript strict.

Le mode strict s'applique seulement à des scripts entiers ou à des fonctions


individuelles, mais pas à des blocs d'instructions (entourés d'accolades =
curly brackets {}). Les fonctions imbriquées d’une fonction en mode strict
sont elles aussi de mode strict.

Le mode strict est activé avec le pragma

"use strict";

Cette directive doit figurer juste après la balise d’ouverture <script> ou

Variables & Functions - 18 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
l’accolade ouvrante du corps d’une fonction, c’est-à-dire avant toute autre
instruction à part les commentaires.

Scope (contexte d’exécution), Domaine, Portée, Étendue, Visibilité, Ac-


cessibilité et durée de vie avec le mot-clé « var » :

<script type="text/javascript">
v=25;
function fct(){
// Déclaration/définition de fonction

v='...série d\'instructions...';
console.log("v="+v);
// v=...série d'instructions
var v=100;
// déclarée locale, APRÈS avoir été utilisée.
}

fct(); // Appel à la fonction


console.log("v="+v); /* v=25 */

// v=...série d'instructions... test.html:7:4


// v=25 test.html:14:2
</script>

La déclaration var :

En réalité le mot-clé var sert à déclarer une variable comme locale c’est-
à-dire « visible / accessible seulement dans le scope de sa déclaration ».

Le mot-clé var sert à deux choses :

1. Déclarer une variable locale « visible / accessible seulement dans le


scope (portée ou étendue, corps de la fonction) de sa déclaration » qui
est le domaine du bloc de la fonction dans laquelle la variable est décla-
rée, même pas par à une éventuelle fonction englobante. Dès que la
fonction est quittée, l’espace lui affecté (qu’elle pointe) est désalloué
(libéré) avec tout son contenu (code et données [variables locales]) :
Durée de vie = période d’exécution de la fonction.
Variables & Functions - 19 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Sans le mot-clé var, la variable est visible de partout (portée/visibilité


globale) dans le fichier en cours et dans d’autres fichiers.

2. Déclarer (créer un espace-mémoire de stockage pour) une variable


non initialisée « undefined ».

Déclarée comme var en dehors de toute fonction (mais dans un élément


SCRIPT), la variable est du scope WINDOW = globale (à ne pas con-
fondre avec WINDOWS).

<script type="text/javascript"> "use strict";


var a = 'colobome';
function f(){
var a = 'Locale';
console.log(a , window.a);
// Locale colobome
}

console.log(a , window.a);
// colobome colobome
f();
</script>

colobome colobome test.html:9:4


Locale colobome test.html:5:8

Déclarée dans une fonction, le scope de « var » se limite dans cette


fonction [et ses fonctions imbriquées].

<script>
function f() {
var v=new Date() ;
}

alert(v)
// Uncaught ReferenceError: v is not defined
</script>

Variables & Functions - 20 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
Ici, la fonction f() n’est pas invoquée et donc jamais exécutée. La variable
v n’est donc ni effectivement déclarée, ni définie ni initialisée. Elle est donc
invisible aussi bien dans le bloc de la fonction qu’en dehors de la fonction.

Même après appel/exécution de la fonction f() dans laquelle la variable dé-


clarée var (locale) a été définie, elle est toujours invisible en dehors [du
bloc] de cette fonction.

<script>
function f() {
var v=new Date() ;
}

f();
alert(v);
</script>

Exécution:

Uncaught ReferenceError: v is not defined at var.html:6


« var.html » est le nom de notre fichier JavaScript

Sans le mot-clé var, la variable v est globale et donc visible et accessible


de partout même dans une autre fonction (portée globale) :

<script>
function f() { v=new Date("11,Aug,1953") ; }
f(); // Appelée APRÈS définition.

fv(); // Appelée AVANT définition.


function fv(){ alert(v); }
</script>

Après suppression du mot-clé var, la variable « v » est maintenant vi-


sible de partout même dans une autre fonction.

Tue Aug 11 1953 00:00:00 GMT+0100 (Paris, Madrid)

Variables & Functions - 21 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
Lors du chargement d’un fichier, les objets sont parsés (analysés), particu-
lièrement les scopes des portées des variables. C’est à la fin du chargement
de tout le fichier (event = onload) que débute l’exécution des fonctions non
inline. Dans JS les déclarations de variable pouvant se faire n’importe où,
une redéclaration dans le même scope d’une variable globale en variable
locale avec var rend sa visibilité locale.

<script type="text/javascript">
j=11, m = -25, a=1953;

function fext(){
j=3957; // Jusqu'ici j est globale, = 11.
m=8; // m globale écrase -25 -> 8
var a=2017; // Déf variable a=2017 locale.
var j; // Force j en locale malgré déjà uti-
lisée.

function fint(){
var m=new Date(); // m locale à fint() = Date.
console.log("* Dans fint()")
console.log("m="+m+" j="+j+" a="+a)
} // Fin function fext(){

fint() ;

console.log("* Dans fext(), "+


"m="+m+" j="+j+" a="+a)
// Ds fext() et partout, m=8
}
// Fin function fext(){

fext();
// j et a = globales, m = modifiée ds fext(),

console.log("* Dans espace gobale: "+


" j="+j+" m="+m+" a="+a)
// 11 8 1953
</script>

Variables & Functions - 22 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
// * Dans fint() test.html:12:4
// m=Fri Oct 12 2018 08:56:25 GMT+0100 (Paris, Madrid) j=3957
a=2017 test.html:13:7
// * Dans fext(), m=8 j=3957 a=2017 test.html:18:4
// * Dans espace gobale: j=11 m=8 a=1953 test.html:27:2

Les blocs ordinaires n’ont pas de portée limitée. À la sortie d’une boucle,
les variables locales « var » du bloc de la boucle persistent :

<script type="text/javascript">
j=11, m = -25, a=1953;
for(k=0;k<5;k++){
var m=new Date(); // m locale à fimbriquee().
}

console.log("k="+k+" , m = "+m.toLocaleString());
// k=5 , m = 23/12/2017 à 02:12:19
</script>

Autre exemple :

<script>
for (k = 0; k <= 5; k++){
var f = function() {
return function(x){return k + x;};
}
if (k == 0) {fct1 = f(); };
if (k == 5) {fct2 = f(); };
}

console.log(fct1(3)); // 9
console.log(fct2(6)); // 12
</script>

XI. Particularités de const, let et var :

Alors que JS en sloppy mode (mode standard) autorise d’utiliser une


variable sans la déclarer au préalable, JS en mode strict ("use strict" ;)
n’accepte pas d’utiliser une variable non, déclarée (avant ou après sa
Variables & Functions - 23 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
première utilisation dans un scope donné).

En mode sloppy :

<script type="text/javascript">
d=Date(); console.log(d);
// Sat Feb 24 2018 22:21:20 GMT+0100 (Paris, Madrid)
</script>

En mode « use strict » :

<script type="text/javascript"> "use strict";


d=Date(); console.log(d);
//
// [YANDEX]
// Uncaught ReferenceError: d is not defined
//
// [FIREFOX]
// ReferenceError: assignment to undeclared variable d
</script>

Variable déclarée avec « var » après sa première utilisation :

<script type="text/javascript"> "use strict";


d=Date(); console.log(d);
var d;
// Sat Feb 24 2018 22:34:35 GMT+0100 (Paris, Madrid)
</script>

Contraire à « var », « let » n’admet pas de déclaration différée de va-


riable :

<script type="text/javascript"> "use strict";


d=Date(); console.log(d);
let d;
// ReferenceError: can't access lexical
// declaration `d' before initialization [FIREFOX]
//
// Uncaught ReferenceError:
Variables & Functions - 24 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
// d is not defined at test.html:2 [YANDEX]
// Uncaught ReferenceError: d is not defined [BAIDU]
</script>

De même contraire à « var », « let » n’admet pas de déclaration ni de


redéfinition de la même variable dans le même scope :

<script type="text/javascript"> "use strict";


var v;
var v;

let l;
let l;
/* FIERFOX : SyntaxError:
redeclaration of let l test.html:6:5
note: Previously declared at line 5, column 5

YANDEX :
Uncaught SyntaxError:
Identifier 'l' has already been declared */
</script>

Tandis que « const » exige l’initialisation pendant l’unique déclaration


(n’accepte ni une réaffectation ni une redéclaration dans la même portée
de bloc).

<script type="text/javascript"> "use strict";


d=Date(); console.log(d);
const d;
/* SyntaxError: missing = in const declaration [FIREFOX]
Uncaught SyntaxError:
Missing initializer in const declaration [YANDEX]
Uncaught SyntaxError: Unexpected token ; [BAIDU] */
</script>

Les valeurs des propriétés d’un objet const peuvent cependant être mo-
difiées :

<script type="text/javascript"> "use strict";


const obj = {id: 'dias'};
////// obj = {id: 'wille'};
// TypeError:
Variables & Functions - 25 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
// invalid assignment to const `obj' [FIREFOX]
// Uncaught TypeError:
// Assignment to constant variable.[YANDEX]

obj.id = 'wille';
console.log(obj); // Object { id: "wille" }
</script>

Dans les deux modes (sloppy et strict), une variable ou une expression
de fonction ne peuvent être déclarées qu’avec l’un des trois mots clés
suivants : const, let ou var, avec les spécificités suivantes :

1. « const » (définit une entité constante, identificateur qui ne peut être


redéfini) et « let » (définit une variable ou une expression de fonc-
tion) sont de portée (scope = domaine) bloc quel qu’il soit :

<script type="text/javascript"> "use strict";


{ let li=7 ; {console.log(li) /* 7 */} };
console.log(li)
// ReferenceError: li is not defined [FIREFOX]
// Uncaught ReferenceError: li is not defined [YANDEX]
</script>

<script type="text/javascript"> "use strict";


{ const ci=10 ; {console.log(ci) /* 10 */} };
console.log(ci)
// ReferenceError: ci is not defined [FIREFOX]
// Uncaught ReferenceError: ci is not defined [YANDEX]
</script>

2. Une entité « const » ne peut être redéclarée, redéfinie ou réaffectée :

<script type="text/javascript"> "use strict";


const cf=function(){console.log(Date())};
cf();
cf=function(){console.log(Math.PI)};
// YANDEX :
// Sat Feb 24 2018 22:52:09 GMT+0100 (Paris, Madrid)
// Uncaught TypeError: Assignment to constant variable.
// FIREFOX :
// Sat Feb 24 2018 22:54:29 GMT+0100 (Paris, Madrid)
// TypeError: invalid assignment to const `cf'

Variables & Functions - 26 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
// BAIDU :
// Sat Feb 24 2018 22:55:33 GMT+0100 (Paris, Madrid)
// Uncaught TypeError: Assignment to constant variable.
</script>

3. « var » est de scope bloc de fonction ou fichier :

<script type="text/javascript"> "use strict";


let lg=5; const cg=20 ;
{ // Bloc vraiment ordinaire.
var vb=15;
console.log(cg) // 20. Visible ds bloc imbriqué.
}
console.log(lg, cg, vb) // 5 20 15
// vb est visible en dehors du bloc ordin,
// mais ne le serait pas hors un bloc de fct,
// cfr ci-dessous.
const cf=function(){var vf=10;}
console.log(vf);
// Uncaught ReferenceError: vf is not defined [BAI-
DU/YANDEX]
// ReferenceError: vf is not defined [FIREFOX]
</script>

4. const DOIT être initialisé au même moment que sa déclaration,

<script type="text/javascript"> "use strict";


const c2;
// SyntaxError: missing = in const declaration [FIREFOX]
// Uncaught SyntaxError: Missing initializer in const dec-
laration [YANDEX]
// Uncaught SyntaxError: Unexpected token ; [BAIDU]
c2="const";
</script>

5. « var » et autres dans définition de fonction non expression :

En mode strict, une expression de fonction DOIT être précédée de var,


const ou let pour la définition / déclaration de fonction. Mais la défini-
Variables & Functions - 27 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
tion simple de fonction ne doit jamais commencer par ces mots clés.

<script type="text/javascript"> "use strict";


function f(){console.log(Math.SQRT2)};
f(); // 1.4142135623730951
</script>

<script type="text/javascript"> "use strict";


const function lf(){console.log(Math.SQRT2)};
// SyntaxError: missing variable name [FIREFOX]
// Uncaught SyntaxError: Unexpected token function [YAN-
DEX]
</script>

<script type="text/javascript"> "use strict";


var function vf(){console.log(Math.SQRT2)};
// SyntaxError: missing variable name [FIREFOX]
// Uncaught SyntaxError: Unexpected token function [YAN-
DEX]
</script>

<script type="text/javascript"> "use strict";


let function lf(){console.log(Math.SQRT2)};
// SyntaxError: let is a reserved identifier [FIREFOX]
// Uncaught SyntaxError: Unexpected strict mode reserved
word [YANDEX]
</script>

Si une const ne peut être ni redéclarée, ni redéfinie, ni réaffectée, la


valeur qu’elle renferme peut cependant être changée :

<script type="text/javascript"> "use strict";


const arr = ['A','B'];
const C = arr;
// arr et C ne peuvent être
// redéclarés, redéfinis, ou réaffectés.

console.log(C);
// Array [ "A", "B" ]

// Mais la valeur de arr ou de C peuvent changer


// Méthode directe via les éléments.
[ arr[0],arr[1] ] = ['X' , 'Z'];
console.log(C);
Variables & Functions - 28 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
// Array [ "X", "Z" ]

arr[0]= ["autre","array"] ;
arr[1] = {'X':'x' , 'Z':'z'};
console.dir(C);
console.dir(arr);
// […] , 0: "Zéro" , 1: "Un" , 2: "spl2" , 3: "PUSHÉ"
// length: 4

// Méthode directe via les méthodes...


arr.push('PUSHÉ');
arr.splice(1,1,"spl1","spl2");
console.log(C);
// Array [ […], "spl1", "spl2", "PUSHÉ" ]
// […], 0: "Zéro", 1: "Un", 2: "spl2", 3: "PUSHÉ"
// length: 4

// La valeur de arr ou de C peuvent aussi changer


// par Méthode indirecte (p.e. du sein d'une fonc-tion)
console.log("fct(C)= ",fct(C));
console.log("C=",C); // constante comme argument.
console.log("arr=",arr);
// Array [ "Zéro", "Un", "spl2", "PUSHÉ" ]
// […], 0: "Zéro", 1: "Un", 2: "spl2", 3: "PUSHÉ"
// length: 4

function fct(p){
p[0]="Zéro", p[1]="Un";
return p;
}
</script>

Note :

Une propriété d’un objet ou membre/élément d’Array ne peut se déclarer


avec var. Signalons que les indexes dans une Array sont juste des proprié-
tés énumerables avec comme noms, des entiers, et sont semblables aux
propriétés d'un objet en général.

Signalons aussi que chaque propriété d’un objet possède 4 attributs :

https://www.ecma-international.org/ecma-262/8.0/
Variables & Functions - 29 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
6.1.7.1 Property Attributes
Attributes are used in this specification to define and explain the state of Object proper-
ties. A data property associates a key value with the attributes listed in Table 2.
Table 2: Attributes Value Domain Description
of a Data Property
Attribute Name
[[Value]] Any ECMAScript The value retrieved by a get access of the
language type property.
[[Writable]] Boolean If false, attempts by ECMAScript code to
change the property's [[Value]] attribute
using [[Set]] will not succeed.
[[Enumerable]] Boolean If true, the property will be enumerated by a
for-in enumeration (see 13.7.5). Otherwise,
the property is said to be non-enumerable.
[[Configurable]] Boolean If false, attempts to delete the property,
change the property to be an accessor prop-
erty, or change its attributes (other than
[[Value]], or changing [[Writable]] to false)
will fail.

Illustration :

<script>
let ob={3:"Cataracte" , glc:"Glaucome" ,
"arr":["Cataracte" , "Glaucome"]};

console.log(
Object.getOwnPropertyDescriptors(ob)
);

/* Affiche
Object { 3: {…}, glc: {…}, arr: {…} }

3:{value: "Cataracte", writable: true, enumerable: true,


configurable: true}

arr:{value: Array(2), writable: true, enumerable: true,


configurable: true}

glc:{value: "Glaucome", writable: true, enumerable: true,


configurable: true}

Variables & Functions - 30 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

__proto__:Object
*/

/* let ob={3:"Cataracte" , glc:"Glaucome" ,


"arr":["Cataracte" , "Glaucome"]} */

console.log(
Object.getOwnPropertyDescriptors(ob[3])
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, 8: {…}, length: {…} }

0:{value: "C", writable: false, enumerable: true, configu-


rable: false}

1:{value: "a", writable: false, enumerable: true, configu-


rable: false}

2:{value: "t", writable: false, enumerable: true, configu-


rable: false}

3:{value: "a", writable: false, enumerable: true, configu-


rable: false}

4:{value: "r", writable: false, enumerable: true, configu-


rable: false}

5:{value: "a", writable: false, enumerable: true, configu-


rable: false}

6:{value: "c", writable: false, enumerable: true, configu-


rable: false}

7:{value: "t", writable: false, enumerable: true, configu-


rable: false}

8:{value: "e", writable: false, enumerable: true, configu-


rable: false}

length:{value: 9, writable: false, enumerable: false, con-


figurable: false}

Variables & Functions - 31 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
__proto__:Object
*/

/* let ob={3:"Cataracte" , glc:"Glaucome" ,


"arr":["Cataracte" , "Glaucome"]} */

console.log(
Object.getOwnPropertyDescriptors(ob["3"])
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, 8: {…}, length: {…} }

0:{value: "C", writable: false, enumerable: true, configu-


rable: false}

1:{value: "a", writable: false, enumerable: true, configu-


rable: false}

2:{value: "t", writable: false, enumerable: true, configu-


rable: false}

3:{value: "a", writable: false, enumerable: true, configu-


rable: false}

4:{value: "r", writable: false, enumerable: true, configu-


rable: false}

5:{value: "a", writable: false, enumerable: true, configu-


rable: false}

6:{value: "c", writable: false, enumerable: true, configu-


rable: false}

7:{value: "t", writable: false, enumerable: true, configu-


rable: false}

8:{value: "e", writable: false, enumerable: true, configu-


rable: false}

length:{value: 9, writable: false, enumerable: false, con-


figurable: false}

__proto__:Object
Variables & Functions - 32 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
*/

/* let ob={3:"Cataracte" , glc:"Glaucome" ,


"arr":["Cataracte" , "Glaucome"]} */

console.log(
Object.getOwnPropertyDescriptors(ob.glc)
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, length: {…} }

0:{value: "G", writable: false, enumerable: true, configu-


rable: false}

1:{value: "l", writable: false, enumerable: true, configu-


rable: false}

2:{value: "a", writable: false, enumerable: true, configu-


rable: false}

3:{value: "u", writable: false, enumerable: true, configu-


rable: false}

4:{value: "c", writable: false, enumerable: true, configu-


rable: false}

5:{value: "o", writable: false, enumerable: true, configu-


rable: false}

6:{value: "m", writable: false, enumerable: true, configu-


rable: false}

7:{value: "e", writable: false, enumerable: true, configu-


rable: false}

length:{value: 8, writable: false, enumerable: false, con-


figurable: false}

__proto__:Object
*/

/* let ob={3:"Cataracte" , glc:"Glaucome" ,


Variables & Functions - 33 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
"arr":["Cataracte" , "Glaucome"]} */

console.log(
Object.getOwnPropertyDescriptors(ob["glc"])
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, length: {…} }

0:{value: "G", writable: false, enumerable: true, configu-


rable: false}

1:{value: "l", writable: false, enumerable: true, configu-


rable: false}

2:{value: "a", writable: false, enumerable: true, configu-


rable: false}

3:{value: "u", writable: false, enumerable: true, configu-


rable: false}

4:{value: "c", writable: false, enumerable: true, configu-


rable: false}

5:{value: "o", writable: false, enumerable: true, configu-


rable: false}

6:{value: "m", writable: false, enumerable: true, configu-


rable: false}

7:{value: "e", writable: false, enumerable: true, configu-


rable: false}

length:{value: 8, writable: false, enumerable: false, con-


figurable: false}

__proto__:Object
*/

/* let ob={3:"Cataracte" , glc:"Glaucome" ,


"arr":["Cataracte" , "Glaucome"]} */

console.log(
Object.getOwnPropertyDescriptors(ob["arr"])
Variables & Functions - 34 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
);
/*
Object { 0: {…}, 1: {…}, length: {…} }

0:{value: "Cataracte", writable: true, enumerable: true,


configurable: true}

1:{value: "Glaucome", writable: true, enumerable: true,


configurable: true}

length:{value: 2, writable: true, enumerable: false, con-


figurable: false}

__proto__:Object
*/

/* let ob={3:"Cataracte" , glc:"Glaucome" ,


"arr":["Cataracte" , "Glaucome"]} */

console.log(
Object.getOwnPropertyDescriptors(ob["arr"][0])
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, 8: {…}, length: {…} }

0:{value: "C", writable: false, enumerable: true, configu-


rable: false}

1:{value: "a", writable: false, enumerable: true, configu-


rable: false}

2:{value: "t", writable: false, enumerable: true, configu-


rable: false}

3:{value: "a", writable: false, enumerable: true, configu-


rable: false}

4:{value: "r", writable: false, enumerable: true, configu-


rable: false}

5:{value: "a", writable: false, enumerable: true, configu-


rable: false}

Variables & Functions - 35 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
6:{value: "c", writable: false, enumerable: true, configu-
rable: false}

7:{value: "t", writable: false, enumerable: true, configu-


rable: false}

8:{value: "e", writable: false, enumerable: true, configu-


rable: false}

length:{value: 9, writable: false, enumerable: false, con-


figurable: false}

__proto__:Object
*/

// let ob={3:"Cataracte" , glc:"Glaucome" ,


// "arr":["Cataracte" , "Glaucome"]}

console.log(
Object.getOwnPropertyDescriptors(ob["arr"][1])
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, length: {…} }

0:{value: "G", writable: false, enumerable: true, configu-


rable: false}

1:{value: "l", writable: false, enumerable: true, configu-


rable: false}

2:{value: "a", writable: false, enumerable: true, configu-


rable: false}

3:{value: "u", writable: false, enumerable: true, configu-


rable: false}

4:{value: "c", writable: false, enumerable: true, configu-


rable: false}

5:{value: "o", writable: false, enumerable: true, configu-


rable: false}

6:{value: "m", writable: false, enumerable: true, configu-


Variables & Functions - 36 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
rable: false}

7:{value: "e", writable: false, enumerable: true, configu-


rable: false}

length:{value: 8, writable: false, enumerable: false, con-


figurable: false}

__proto__:Object
*/
</script>

An accessor property associates a key value with the attributes listed in Table 3.
Table 3: Value Domain Description
Attributes of an
Accessor Property
Attribute Name
[[Get]] Object | Undefined If the value is an Object it must be a func-
tion object. The function's [[Call]] internal
method (Table 6) is called with an empty
arguments list to retrieve the property
value each time a get access of the proper-
ty is performed.
[[Set]] Object | Undefined If the value is an Object it must be a func-
tion object. The function's [[Call]] internal
method (Table 6) is called with an argu-
ments list containing the assigned value as
its sole argument each time a set access of
the property is performed. The effect of a
property's [[Set]] internal method may, but
is not required to, have an effect on the
value returned by subsequent calls to the
property's [[Get]] internal method.
[[Enumerable]] Boolean If true, the property is to be enumerated by
a for-in enumeration (see 13.7.5). Other-
wise, the property is said to be non-
enumerable.
[[Configurable]] Boolean If false, attempts to delete the property,
change the property to be a data property,

Variables & Functions - 37 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
or change its attributes will fail.

If the initial values of a property's attributes are not explicitly specified by this specifi-
cation, the default value.
Table 4: Default Attribute Values Attri- Default Value
bute Name
[[Value]] undefined
[[Get]] undefined
[[Set]] undefined
[[Writable]] false
[[Enumerable]] false
[[Configurable]] false

Plusieurs façons d’appeler une fonction :

<script type="text/javascript"> "use strict";


// Direct
fct("","deuxième");
// Ds fct = fct(,deuxième)

// Via alias
var funcname=fct
funcname();
// Ds fct = fct(undefined,undefined)

// Via NOM de la fonction dans une chaîne


window["fct"]("premier","deuxième");
// Ds fct = fct(premier,deuxième)

// Fonction comme paramètre objet


function go1(p,a1,a2){
p(a1,a2);
}
go1(fct,"année",2018)
// Ds fct = fct(année,2018)

Variables & Functions - 38 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

// Fonction comme paramètre chaîne


function go2(p,a1,a2){
window[p](a1,a2);
}
go2("fct",Math.PI,Math.E)
// Ds fct =
fct(3.141592653589793,2.718281828459045)

// Avec eval()
function go3(p){
eval(p);
}
go3("fct(Math.E,Math.PI)")
// Ds fct =
fct(2.718281828459045,3.141592653589793)

//////////////////////////
// La fonction à appeler
//////////////////////////

function fct(){
console.log(
"Ds fct = " + fct.name +
"("+arguments[0]+","+arguments[1]+")"
);
}
</script>

Une façon saugrenue d’utiliser des variables locales :


<script type="text/javascript"> `use strict`;
const f = (p, v, ...r) => {
r[0] = "essai1";
r[1] = "essai2";
r[2] = "essai3";

console.log(p, v, r[0], r[1], r[2]);

p = "Subst1";
v = "ubst2";

Variables & Functions - 39 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

console.log(p, v, r[0], r[1], r[2]);


};

f("un", "deux");
</script>

Variables locales « static » en JavaScript ;

Une « variable locale static » est une variable définie dans une fonction
mais qui garde sa valeur même quand la fonction est quittée. JS ne com-
porte pas une telle sorte de donnée. Comment y suppléer ?

Un LexicalEnvironment est créé pour chaque fonction lors de son exécu-


tion. Cet environnement stocke les variables paramètres, les variables lo-
cales (déclarées dans la fonction avec var) et les fonctions imbriquées dé-
clarées. Normalement, à la fin de l’exécution de la fonction, son environ-
nement lexical est détruit, avec toutes les variables locales [déclarées avec
var].

Mais dès qu’une fonction englobe une autre (fonction englobante) et re-
tourne cette dernière (fermeture ou closure) son environnement lexical n’est
plus détruit mais conservé à la fin de son exécution.

En quittant une fonction comportant une fonction imbriquée et retournée


par la fonction contenante / englobante, tout l’environnement (variables
locales et fonctions) de la première fonction [contenante] persistent dans un
objet interne appelé « LexicalEnvironment » de la première fonction, et
peuvent servir de (être utilisés comme) variables static exactement comme
celles des langages C/C++, et dans une fonction récursive. Cet environne-
ment et ses variables persistent (durée de vie), comme les variables globales,
jusqu’à la décharge (fermeture) du document.

<script type="text/javascript"> "use strict";


function f(){

Variables & Functions - 40 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
var b = "b";

return function f2(){ // f() retourne adresse de f2.


return b; // retourne la valeur de la variable b.
}
}

var n = f();
alert(n());
</script>

La fonction f() retourne un pointeur sur la fonction f2() qui elle, retourne la
valeur en cours de la variable b, qui est "b".

Du fait que la fonction f() est une fonction retournante, son environnement
n'est pas détruit à sa sortie, et toutes ses variables y compris les LOCALES
(déclarées var) sont préservées.

var n = f(); La variable « n » reçoit la valeur retournée par f() qui est
un pointeur sur la fonction interne retournée f2(). La fonction f2() est ce
qu’on appelle « closure ».

Puisque n contient l'adresse d'une fonction =en l'occurrence la fonction


f2()=, on peut appeler cette dernière avec « n, suivie de parenthèses n() », ce
qui affiche la valeur en cours de la variable b qui est dans l'environnement
de f() qui n'a pas été altéré depuis la sortie de cette fonction f().

En appelant f(), par exemple alert(f()); on affiche le contenu à


l'adresse retournée par f() =celle de la fonction f2()=, et le contenu à
l'adresse d'une fonction cfr la f2(), c'est le code de cette fonction.
L’identifiant f2 ne sert absolument à rien, sauf à faciliter les explications ici.

La variable b peut être modifiée, mais bien entendu, seulement par les fonc-
tions qui ont accès à elle, et durant la période de leur exécution.

Exemple concret de Variable locale statique :

Variables & Functions - 41 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
Chaque variable locale statique nouvellement créée possède son propre
environnement lexical, ce qui permet de créer plusieurs variables locales
statiques indépendantes à partir d’un seul et même complexe de fonctions.

<script type="text/javascript">
"use strict"; const cl=console.log;
function f(){
var b = 10;

return function f2(){


return b++;
}
// f2 retourne la valeur incrémentée de la variable b.
} // f() retourne adresse de f2().

var m = f(); // 1er environnement lexical


var n = f(); // 2e environnement lexical.

cl(m());
cl(m());
cl(n());
cl(m());
cl(n());
</script>

Exécution :

Altération complexe d’une Variable locale statique :

<script> "use strict";


function f() {
var x=0 ; // pseudo static
/**/ const f2 = function(y){ x += y ; return [y,x]; }
/**/ return f2;
// ou tout court
/* return function(y){ x += y ; return [y,x]; } */
Variables & Functions - 42 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
// x == x après addition.
}

let fct=f(); // Valeur retournée par f();

for(let k=2;k<5;k++){
var r = fct(k * ((Math.random()*10) | 0));
// Partie entière seulement
console.log("y==(k*Math...)=="+r[0]+" | x=="+r[1]+
" | x+=y=="+(1*r[1]+r[0]));
}
</script>

y==(k*Math...)== 6 | x== 6 | x+=y==12 test.html:16:5


y==(k*Math...)==15 | x==21 | x+=y==36 test.html:16:5
y==(k*Math...)==24 | x==45 | x+=y==69 test.html:16:5

Note:

Si vous écrivez « * x+=y=="+(r[1]+r[0])) » au lieu de « *


x+=y=="+(1*r[1]+r[0])) » vous aurez une concaténation (addition
de Strings ou littérale) au lieu d’une addition arithmétique.

Diverses manipulations d’une même variable statique

<script type="text/javascript">
"use strict" ; const cl=console.log;
function genStatVar (a){
let statVar=a||10; // Par défaut =10.
cl(`*** statVar==${statVar}`);
return function fct(a,b){
if(a=="inc") return ++statVar;
else if(a=="dec") return --statVar;
else if(a=="exp") return stat-
Var=Math.pow(statVar,b);
else if(a=="root") return stat-
Var=Math.pow(statVar,1/b);
else if(a=="add") return statVar+=b;
else if(a=="sub") return statVar-=b;
else return "undefined parameter";
Variables & Functions - 43 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
}
}

let incV = genStatVar(); // *** statVar==10


cl(incV()); // undefined parameter
cl(incV("inc")); // 11
cl(incV("exp")); // NaN

incV = genStatVar(5); // *** statVar==5


cl(incV("exp",3)); // 125
cl(incV("dec")); // 124
cl(incV("add",4)); // 128
cl(incV("root",7)); // 2
cl(incV("sub",-8)); // 10
</script>

Ci-dessous, voyez comment créer de multiples variables locales statiques, et


comment l'environnement lexical de chacune des variables statiques est
bien préservé.

<script type="text/javascript">
"use strict" ; const cl=console.log;

function genStatVar (a,b){


let statVar=b||10;
cl(`*** statVar==${statVar}`);

if(a=="inc") return function(){


return ++statVar;
}
else if(a=="dec") return function(){
return --statVar;
}
else if(a=="exp") return function(b){
return statVar=Math.pow(statVar,b);
}
else if(a=="root") return function(b){
return statVar=Math.pow(statVar,1/b);
}
else if(a=="add") return function(x){
let y=x||statVar;
return statVar+=y;
}
Variables & Functions - 44 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
else if(a=="sub") return function(){
return statVar-=b;
}
else return function(){
return "undefined parameter";
}
}

// Inc
let incV = genStatVar("inc"); // *** statVar==10
cl(incV()); // 11
cl(incV()); // 12

// Inc , 5 (nouvel environnement lexical)


incV = genStatVar("inc",5); // *** statVar==5
cl(incV()); // 6
cl(incV()); // 7

// Exp , 2
let exp2 = genStatVar("exp",2); // *** statVar==2
cl(exp2(4)); // 16
cl(exp2(2)); // 256

// Avec le dernier environnement lexical de incV


cl(incV()); // 8

// Exp , 10 (nouvel environnement lexical)


let exp2_5 = genStatVar("exp"); // *** statVar==10
cl(exp2_5(3)); // 1000

// Avec le dernier environnement lexical de exp2


cl(exp2(2)); // 65536

// Avec le dernier environnement lexical de exp2_5


cl(exp2_5(2)); // 1000000

// Avec le dernier environnement lexical de incV


cl(incV()); // 9

// root , 1000000
let rootV = genStatVar("root",1000000); // *** stat-
Var==1000000
cl(rootV(2)); // 1000
cl(rootV(3)); // 9.999999999999998

Variables & Functions - 45 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
// add , 15
let addV = genStatVar("add",15); // *** statVar==15
cl(addV()); // 30
cl(addV()); // 60
cl(addV(-10)); // 50

// add , default
addV = genStatVar("add"); // *** statVar==10
cl(addV()); // 20
cl(addV()); // 40
cl(addV(-10)); // 30

// undefined
let dummy = genStatVar(); // *** statVar==10
cl(dummy()); // undefined parameter
cl(incV()); // 10
cl(exp2(2)); // 4294967296
cl(exp2_5(1)); // 1000000
</script>

Variable statique via un générateur

Une autre façon de créer/gérer les variables locales statiques c’est via un
générateur.

<script type="text/javascript"> "use strict";


let disp = (locGenPrev,locGenFibo,locGenVar,p) => {
if(p==1)console.log(locGenPrev,locGenFibo,locGenVar);
else if(p==2){
console.log(locGenPrev,locGenFibo,locGenVar+
"= "+locGenPrev+"+"+locGenFibo);

console.log(locGenPrev+" -> "+ locGenFibo,


" , ",locGenFibo+" -> "+locGenVar);
}
else if(p==3){
console.log(locGenPrev);
console.log(locGenFibo);
console.log(locGenVar);
}
}
</script>

Variables & Functions - 46 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

<script type="text/javascript"> "use strict";

function* createlocGenFiboGenerator() {

let locGenFibo=1, locGenVar, locGenPrev=0;

while (true) {
/**/
disp(locGenPrev,locGenFibo,locGenVar,1);

locGenVar = locGenPrev+locGenFibo;

/**/
disp(locGenPrev,locGenFibo,locGenVar,2);

locGenPrev=locGenFibo , locGenFibo=locGenVar;

yield [
(locGenFibo*2) + ". "+
1*(2000+Math.trunc(Math.random()*1000)),
"instant "+new Date().getTime()]
}
}

const ar=[
"Xérophtalmie","Entropion", "Rétinoblastome",
"Hyperphorie","Épiphora","Gérontoxon"
];
const l=ar.length;

let txt = " Les "+l+" maladies enregistrées ",


tl= txt.length+5;
console.dir(txt.padStart(tl,"*").padEnd(tl+5,"*"));
console.dir("".padEnd(tl+5,"*"));

txt=" DBL FIBONACCI ";


Variables & Functions - 47 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
tl= txt.length+5;
console.dir(
"DANS NOTRE "+txt
.padStart(tl,"*").padEnd(tl+8,"*"));
console.dir("".padEnd(tl+19,"="));

const iterator = createlocGenFiboGenerator();

for(var k=0 ; k<l ; k++){


/**/
disp(
"Pour k=="+k+".",
"Notez la persistance des variables locales",
"dans le Générateur.",3);

const t=iterator.next().value;
console.dir(k+1);

// Le comptage vient du nombre renvoyé par


// createlocGenFiboGenerator() via le yield,
// et nous utilisons ce nombre comme
// indice de la liste de nos maladies.

// C'est une autre façon de jongler avec


// les variables locales statiques, en plus
// des variables locales d'une fonction
// englobante retournant fonction imbriquée.

const i=parseInt(t);

console.dir(t[1]);
console.dir(t[0] +". "+ar[k] + "***");

console.dir('\n'.padEnd(34,"#")+"\n\n");
}
</script>

Exécution :

Variables & Functions - 48 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
13:15:22,813 ***** Les 6 maladies enregistrées *****
13:15:22,818 ***************************************
13:15:22,818 DANS NOTRE ***** DBL FIBONACCI ********
13:15:22,819 =======================================

13:15:22,820 Pour k==0. test.html:12:9


13:15:22,820 Notez la persistance des variables locales
13:15:22,821 dans le Générateur. test.html:14:9
13:15:22,821 0 1 undefined test.html:3:13
13:15:22,821 0 1 1= 0+1 test.html:5:7
13:15:22,821 0 -> 1 , 1 -> 1 test.html:8:7

13:15:22,868 1 test.html:83:4
13:15:22,875 instant 1542197722823 test.html:98:4
13:15:22,876 2. 2229. Xérophtalmie*** test.html:99:4

13:15:22,876 ################################# test.html:101:4

13:15:22,876 Pour k==1. test.html:12:9


13:15:22,876 Notez la persistance des variables locales
13:15:22,876 dans le Générateur. test.html:14:9
13:15:22,877 1 1 1 test.html:3:13
13:15:22,877 1 1 2= 1+1 test.html:5:7
13:15:22,877 1 -> 1 , 1 -> 2 test.html:8:7

13:15:22,877 2 test.html:83:4
13:15:22,877 instant 1542197722878 test.html:98:4
13:15:22,877 4. 2409. Entropion*** test.html:99:4

13:15:22,877 ################################# test.html:101:4

13:15:22,878 Pour k==2. test.html:12:9


13:15:22,878 Notezla persistance des variables locales
13:15:22,881 dans le Générateur. test.html:14:9
13:15:22,881 1 2 2 test.html:3:13
13:15:22,890 1 2 3= 1+2 test.html:5:7
13:15:22,890 1 -> 2 , 2 -> 3 test.html:8:7

13:15:22,890 3 test.html:83:4
13:15:22,891 instant 1542197722891 test.html:98:4
13:15:22,891 6. 2001. Rétinoblastome*** test.html:99:4

13:15:22,891 ################################# test.html:101:4

13:15:22,891 Pour k==3. test.html:12:9


13:15:22,891 Notez la persistance des variables locales
13:15:22,891 dans le Générateur. test.html:14:9
13:15:22,892 2 3 3 test.html:3:13

Variables & Functions - 49 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
13:15:22,892 2 3 5= 2+3 test.html:5:7
13:15:22,892 2 -> 3 , 3 -> 5 test.html:8:7

13:15:22,893 4 test.html:83:4
13:15:22,893 instant 1542197722893 test.html:98:4
13:15:22,894 10. 2259. Hyperphorie*** test.html:99:4

13:15:22,894 ################################# test.html:101:4

13:15:22,895 Pour k==4. test.html:12:9


13:15:22,895 Notez la persistance des variables locales
13:15:22,895 dans le Générateur. test.html:14:9
13:15:22,896 3 5 5 test.html:3:13
13:15:22,896 3 5 8= 3+5 test.html:5:7
13:15:22,896 3 -> 5 , 5 -> 8 test.html:8:7

13:15:22,896 5 test.html:83:4
13:15:22,896 instant 1542197722896 test.html:98:4
13:15:22,899 16. 2903. Épiphora*** test.html:99:4

13:15:22,900 ################################# test.html:101:4

13:15:22,900 Pour k==5. test.html:12:9


13:15:22,900 Notezla persistance des variables locales
13:15:22,900 dans le Générateur. test.html:14:9
13:15:22,900 5 8 8 test.html:3:13
13:15:22,900 5 8 13= 5+8 test.html:5:7
13:15:22,901 5 -> 8 , 8 -> 13 test.html:8:7

13:15:22,901 6 test.html:83:4
13:15:22,901 instant 1542197722901 test.html:98:4
13:15:22,901 26. 2117. Gérontoxon*** test.html:99:4

13:15:22,901 ################################# test.html:101:4

CHAPITRE 3 : SYNTAXE DES INSTRUCTIONS dans JavaScript

En JS standard, une variable peut ou ne pas être déclarée (avec let,


const ou var) avant sa première utilisation, mais en mode strict ("use
strict;" dans une chaîne exactement comme ici) la déclaration est exigée,
mais pas nécessairement avant la première utilisation, mais n’importe où
dans la portée, même en mode strict. Es8 autorise une virgule à la fin de
la liste de paramètres « function fct(var1 , var2 , var3 , ) », arguments
Variables & Functions - 50 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
« fct (9, "", {} , ){} » , littéraux de tableau « [10 , «txt» , {} , ] » et litté-
raux d’objet « {x: 1 , } ».

I. Une variable [peut prendre ou changer de valeur n’importe quand et


n’importe où dans sa portée.

1. La visibilité d’une variable déclarée avec le token « var » est


tout le fichier si déclarée dans l’espace global, ou toute la
fonction (et seulement cette fonction) si déclarée dans le bloc
de la fonction. Sa visibilité n’est pas limitée dans tout autre
bloc que celui d’une fonction (boucles…).

2. La visibilité d’une variable déclarée avec le token « let » est


seulement le BLOC le plus profond dans lequel elle a été dé-
clarée et les sous-blocs de celui-ci.

II. Une constante ou "immutable variable" [déclarée avec le token


« const »] DOIT être déclarée avant sa première utilisation et ne peut
changer de valeur une fois déclarée, et donc elle doit obligatoirement
être initialisée au moment de sa déclaration. Seul la variable cons-
tante ne peut recevoir une nouvelle valeur, le contenu peut bien chan-
ger (par exemple quand il s’agit d’un objet).

1. La portée d’une constante (comme celle d’une variable let)


est seulement le BLOC le plus profond dans lequel elle a été
déclarée et les sous-blocs de celui-ci.

On ne peut naturellement pas utiliser const comme spécificateur de type


du compteur d’une boucle (for, while, do…while).

Dans le JavaScript standard une variable peut, outre changer de valeur,


être redéclarée autant de fois qu’on le veut.

En mode strict aucune variable « let » ou constante ne peut être redé-


clarée.

<script type="text/javascript"> "use strict";


let r;
let r;
Variables & Functions - 51 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
// SyntaxError: redeclaration of let r
// test.html:3:4
// note: Previously declared at line 2, column 4
// test.html:2:4

for (var l=0; l<10; l++){}


console.log(l);

for (let k=0; k<10; k++){}


console.log(k);
// ReferenceError: k is not defined
// test.html:13:2

for (const n=0; n<10; n++){}


// TypeError: invalid assignment to const `n'
// test.html:17:23

for (let m=0; m<10; m++){const c=5}


console.log(c);
// ReferenceError: c is not defined
// test.html:23:3
</script>

En mode non strict :

<script type="text/javascript">
date = new Date();
console.log(date.toLocaleDateString()); //
27/01/2018
console.log(date.toLocaleString()); //
27/01/2018 à 01:40:32
console.log(date.toUTCString()) ;// Sat, 27 Jan 2018
00:40:32 GMT
console.log(date.toGMTString()); // Sat, 27 Jan 2018
00:40:32 GMT
</script>

En mode strict :

Variables & Functions - 52 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
<script type="text/javascript"> "use strict";
notreVar = new NotreVar();
notreVar = function(){};
notreVar = _ => instruction_unique;
notreVar = _ => {instructions multiples};
notreVar = (function(){return Math.PI})();
notreVar = !function(){return Math.E};
console.log(notreVar);
/* var notreVar; */
</script>

ReferenceError: assignment to undeclared variable date


test.html:3:10 [FIREFOX]

Uncaught ReferenceError: date is not defined


at test.html:3 [YANDEX]

Utilisation de variable AVANT sa déclaration :

<script type="text/javascript"> "use strict";


notreVar = new NotreVar();
notreVar = function(){};
notreVar = _ => {};
notreVar = (function(){return Math.PI})();
notreVar = !function(){return Math.E};
console.log(notreVar); // false test.html:7:5
var notreVar;
</script>

1. Dans JS l’indentation (comme souvent le retour à la ligne et certains


espaces blancs) n’est pas obligatoire, mais utile pour la révision (lisibili-
té) du code.

2. Deux instructions sur une même ligne DOIVENT être séparées par un
point-virgule (semicolons), mais les instructions en fin de ligne ne
sont pas tenues de se terminer par le point-virgule (à cause de
l’Automatic Semicolon Insertion =ASI) vs au langage C, mais il est
préférable de les placer pour vous signaler la fin d’une instruction, un

Variables & Functions - 53 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
point-virgule superflu ne dérange pas (instruction vide).

En effet, JavaScript ou plutôt le moteur du Browser insère automatique-


ment beaucoup de choses qu’on omet, par exemple des balises indis-
pensables. Prenons par exemple ce code qui n’a que la balise
« script ». JavaScript ajoute automatiquement les balises <html>,
<head>, et <body> :

<script type="text/javascript" name="dias">


</script>

Variables & Functions - 54 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

3. La virgule sert à chaîner des instructions (comme si faisant partie d’un


même bloc). Notez les virgules en fin de lignes dans le code qui suit.
Les blocs sont préférables quand c’est possible.

<script type="text/javascript"> "use strict";


var v;
for(
var k=0, n=parseInt("10.25 illustr parseInt") ; k<=n ;)
v = Math.pow(k,k)
,
console.log("k=", k.toString().padStart(2," ")+
". |\nMath.pow(k,k).toPrecision(10) = "+
v.toPrecision(10)+" = "+

`\n(k**k).toExponential(10) ${" ".padStart(4," ")} =`+


(k**k).toExponential(10))
,
k++ ;
</script>

k= 0. | Math.pow(k,k).toPrecision(10) = 1.000000000 =
(k**k).toExponential(10) =1.0000000000e+0

k= 1. | Math.pow(k,k).toPrecision(10) = 1.000000000 =
(k**k).toExponential(10) =1.0000000000e+0

k= 2. | Math.pow(k,k).toPrecision(10) = 4.000000000 =
(k**k).toExponential(10) =4.0000000000e+0

k= 3. | Math.pow(k,k).toPrecision(10) = 27.00000000 =
(k**k).toExponential(10) =2.7000000000e+1

k= 4. | Math.pow(k,k).toPrecision(10) = 256.0000000 =
(k**k).toExponential(10) =2.5600000000e+2

k= 5. | Math.pow(k,k).toPrecision(10) = 3125.000000 =
(k**k).toExponential(10) =3.1250000000e+3

k= 6. | Math.pow(k,k).toPrecision(10) = 46656.00000 =
(k**k).toExponential(10) =4.6656000000e+4

Variables & Functions - 55 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
k= 7. | Math.pow(k,k).toPrecision(10) = 823543.0000 =
(k**k).toExponential(10) =8.2354300000e+5

k= 8. | Math.pow(k,k).toPrecision(10) = 16777216.00 =
(k**k).toExponential(10) =1.6777216000e+7
k= 9. | Math.pow(k,k).toPrecision(10) = 387420489.0 =
(k**k).toExponential(10) =3.8742048900e+8

k= 10. | Math.pow(k,k).toPrecision(10) = 1.000000000e+10 =


(k**k).toExponential(10) =1.0000000000e+10

Note :

Notez l’absence d’ « accolades » pour la boucle « for », juste pour illustrer


le « chaînage d’instructions avec l’opérateur virgule ». Mais pour faciliter
la lecture et en prévision d’ajout d’autres instructions dans votre code,
toutes les instructions des boucles (for, for...in, for each, while, do...while).

Mais avec les fonctions fléchées (expression de fonction fléchée =arrow


function =fat arrow) les instructions devraient être contenues dans une paire
d’accolades (curly braces) même quand c’est une instruction unique, ça
facilite le débogage et l’ajout ultérieur de nouvelles instructions.

<script type="text/javascript">
"use strict"; const cl=console.log;
const fct = (a) => {cl(a) ; return a*a;}

cl(fct(5));
</script>

Exécution :

5 test.html:3:25
25 test.html:5:5

La virgule de chaînage ne marche pas avec les instructions multiples d’une


fonction fléchée. Mais pour l’aisance de lecture, s’il n’y a qu’une seule
instruction dans la fonction fléchée, mieux vaut ne pas utiliser d’accolades.
Et en particulier quand tout ce que fait la fonction est un renvoi de valeur
Variables & Functions - 56 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
particulièrement comme fonction callback inline, il vaut mieux dans ce cas
ne pas utiliser les accolades et même ne pas utiliser le mot-clé « return ».

<script type="text/javascript">
"use strict"; const cl=console.log;
const fct = (a) => cl(a) , return a*a;

cl(fct(5));
</script>

Firefox 65.0

Yandex Version 19.1.1.879 beta

La règle avec les fonctions fléchées c’est celle-ci :

<SCRIPT> "use strict";


// I. Quand il y a seulement une expression, elle
// constitue la valeur implicite de retour.

let fct = _ => Math.random();


console.log(fct()); // 0.20145337031422184

// II. return n'est pas toléré en dehors d'accolades.


// let fct2 = _ => return Math.random();
// Uncaught SyntaxError: Unexpected token return

// III. Quand il y a des accolades, elles renferment


// des instructions précises. La valeur de retour
// doit être explicitée avec un return explicite.

let fct3 = _ => { Math.random(); }


console.log(fct3()); // undefined

// IV. Avec les accolades, la valeur de retour


Variables & Functions - 57 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
// doit être explicitée avec un return explicite.

let fct4 = _ => { return Math.random(); }


console.log(fct4()); // 0.8308392368481337
</SCRIPT>

La virgule de chaînage peut aussi être utilisée dans les différentes parties
d’une boucle « for ». Dans l’exemple qui suit, notez la virgule de chaî-
nage entre « k = 0 » et « a.toLocaleSt... »

<script>
var a=new Date(9999,12,31)

for(k=0 , l=a.toLocaleString().length ; k < 10 ; k++) {


console.log(k*l)
}
</script>

Exécution :

0 22 44 66 88 110 132 154 176 198

La virgule de chaînage peut aussi être utilisée dans


l’instruction de test conditionnel « ? : »

<script>
const cl=console.log;
var a=Math.round(Math.random()*10) ,
b=Math.ceil(Math.log(a)) ,
c=0,d=0,e=0;

v = a<=7
?
a*a + b*b + 2*a*b
:
Variables & Functions - 58 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
c = Math.pow(a,2) , d=b*b , e=2*a*b ;

cl(
` a=${a} _ b=${b} \n v=${v} \n`+
` c=${c} _ d=${d} _ e=${e}`
)
</script>

Exécutions :

1. Avec « a > 7 » :

La condition « a <= 7 ? » n’est pas remplie (a==9, > 7), l’expression


avant le double-point n’est pas exécutée, toute la chaîne d’expressions
après ce « : » est exécutée. v prend la valeur de la première expression
dans la chaîne d’instructions après le « : », les deux instructions chaînées
(¿) sont aussi exécutées.

2. Avec « a == 7 , <= 7 » :

La condition « a<=7 ? » est remplie (a==7, inf ou == 7), l’expression


avant le double-point est exécutée, Aucune expression dans le chaînage
après ce double-point ne devrait être exécutée, mais seule la première
expression est ignorée (v a pris la valeur de l’expression « a^2 + b^2 +
2*a*b » d’avant le double-point), « c = Math.pow(a,2) » n’a pas été
exécutée (c a gardé sa valeur initiale = valeur d’initialisation), mais les
deux autres qui lui sont chaînées « d=b*b » et « e=2*a*b » ont été éva-
luées (exécutées).

Notez que
Variables & Functions - 59 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

d=b*b , e=2*a*b ;

sont toujours exécutées (que la condition soit remplie ou pas), parce


qu’elles sont considérées comme ne faisant pas partie de la définition de la
variable « v », mais comme suite de définitions de variables (en mode strict
ou pas), comme vous pouvez le voir ci-dessous en mettant un « let » devant
la définition de la variable « v » :

<script>
const cl=console.log;
var a=Math.round(Math.random()*10) ,
b=Math.ceil(Math.log(a)) ,
c=0,d=0,e=0;

let v = a<=7
?
a*a + b*b + 2*a*b
:
c = Math.pow(a,2) , d=b*b , e=2*a*b ;

cl(
` a=${a} _ b=${b} \n v=${v} \n`+
` c=${c} _ d=${d} _ e=${e}`
)
</script>

Boucle « while » :

<script type="text/javascript"> "use strict";


function suppress(arr, val) {
var i;
while ((i = arr.indexOf(val)) != -1) {
arr.splice(i, 1);
}
return arr;
}

Variables & Functions - 60 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
console.log(suppress(
[ "Louis", "Morena", "Loui", "Keriyza", "Louis" ]
, "Louis" )
);
</script>

// Array ["Morena", "Loui", "Keriyza" ] {FIREFOX}


// (2) ["Morena", "Loui", "Keriyza" ] {YANDEX}

On peut facilement faire la même chose avec la méthode « filter() »

<script type="text/javascript"> "use strict";

var suppress = (from, tag) =>


from.filter(function(el){return el !== tag})
console.log(
suppress(
["Louis", "Morena", "Keriyza",
"Louis", "Keriyza", "Louis"], "Louis"));

var extract = (from, tag) =>


from.filter(function(el){return el === tag});
console.log(
extract(
["Louis", "Morena", "Keriyza",
"Louis", "Keriyza", "Louis"], "Louis"));
</script>
// Array [ "Morena", "Keriyza", "Keriyza" ]
// Array [ "Louis", "Louis", "Louis" ]

Méthodes « String . padStart ( ) » et « String . padEnd ( ) » de Rem-


bourrage avant/après :

Pour rembourrer une chaîne avec un caractère ou une autre chaîne donnée
(par défaut l’espace) pour faire une taille totale déterminée :

Variables & Functions - 61 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

<script type="text/javascript"> "use strict";

console.log('123'.padStart(16,"0"));
// Padding avant
// 0000000000000123

console.log('abc'.padEnd(16,"DIAS"));
// Padding après
// abcDIASDIASDIASD

</script>

Méthodes « Object . entries ( ) » et « Object . values ( ) » permettent de


retourner un objet de paires « propriété / valeur » :

<script type="text/javascript"> "use strict";


const data = {
name: 'Pet', age: 29,
Sname: 'Kiw', High: 172
};

//tableau des paires de propriétés enumerable


// [key, value] d'un objet

console.log(Object.entries(data));

/* (4) [Array(2), Array(2), Array(2), Array(2)]

0: (2) ["name", "Pet"]


1: (2) ["age", 29]
2: (2) ["Sname", "Kiw"]
3: (2) ["High", 172]
length: 4
__proto__: Array(0)
*/

// tableau des propres valeurs de


// propriété énumérables d'un objet

Variables & Functions - 62 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
console.log(Object.values(data));
// (4) ["Pet", 29, "Kiw", 172]
</script>

Un autre exemple d’utilisation des « Object.keys » et « Object.values » :

<script type="text/javascript"> "use strict";


const oArg = [
{"Dadet":["Homme","Kinois"]},
{"Pierrette":["Femme","Alien","Umo","ExtraGalactic"]},
{"Jean":["Homme","Luozien","Kinoinisé"]}
];

console.log("Object.keys(oArg)");
console.log(Object.keys(oArg));

console.log("");

console.log("Object.values(oArg)");
console.log(Object.values(oArg));

console.log("");

for(let k=0,l=oArg.length ; k<l ; k++ ){

console.log("*** [KEYS] *** Object.keys(oArg[k])");


console.log(Object.keys(oArg[k]));

console.log("+++ [VALUES] *** Ob-


ject.values(oArg[k])");
console.log(Object.values(oArg[k]));

console.log("");
}

for(let k=0,l=oArg.length ; k<l ; k++ ){


let vl = Object.values(oArg)[k];

console.log(Object.keys(vl));
console.log( Object.values(vl));

Variables & Functions - 63 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
}
</script>

Exécution :

12:39:53,259
Object.keys(oArg) ***
test.html:8:3
12:39:53,260
Array(3) [ "0", "1", "2" ]
0: "0"
1: "1"
2: "2"
length: 3
__proto__: Array(0)
test.html:9:3

12:39:53,261
Object.values(oArg) +++
test.html:13:3
12:39:53,262
Array(3) [ {…}, {…}, {…} ]
0: {Dadet: Array(2)}
1: {Pierrette: Array(4)}
2: {Jean: Array(3)}
length: 3
__proto__: Array(0)
test.html:14:3

12:39:53,265
*** [KEYS] *** Object.keys(oArg[k])
test.html:20:6

12:39:53,265
Array [ "Dadet" ]
0: "Dadet"
length: 1
__proto__: Array(0)
test.html:21:6
Variables & Functions - 64 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

12:39:53,266
+++ [VALUES] *** Object.values(oArg[k])
test.html:23:6

12:39:53,266
Array [ (2) […] ]
[Array(2)]
0: (2) ["Homme", "Kinois"]
length: 1
__proto__: Array(0)
test.html:24:6

12:39:53,268
*** [KEYS] *** Object.keys(oArg[k])
test.html:20:6

12:39:53,268
Array [ "Pierrette" ]
0: "Pierrette"
length: 1
__proto__: Array(0)
test.html:21:6

12:39:53,268
+++ [VALUES] *** Object.values(oArg[k])
test.html:23:6

12:39:53,269
Array [ (4) […] ]
[Array(4)]
0: (4) ["Femme", "Alien", "Umo", "ExtraGalactic"]
length: 1
__proto__: Array(0)
test.html:24:6

12:39:53,270
Variables & Functions - 65 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
*** [KEYS] *** Object.keys(oArg[k])
test.html:20:6

12:39:53,270
Array [ "Jean" ]
0: "Jean"
length: 1
__proto__: Array(0)
test.html:21:6

12:39:53,270
+++ [VALUES] *** Object.values(oArg[k])
test.html:23:6

12:39:53,271
Array [ (3) […] ]
[Array(3)]
0: (3) ["Homme", "Luozien", "Kinoinisé"]
length: 1
__proto__: Array(0)
test.html:24:6

13:34:27,116
Array [ "Dadet" ]
["Dadet"]0: "Dadet"
length: 1
__proto__: Array(0)
test.html:34:6

13:34:27,116
Array [ (2) […] ]
[Array(2)]
0: (2) ["Homme", "Kinois"]
length: 1
__proto__: Array(0)
test.html:35:6

Variables & Functions - 66 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
13:34:27,117
Array [ "Pierrette" ]
0: "Pierrette"
length: 1
__proto__: Array(0)
test.html:34:6

13:34:27,117
Array [ (4) […] ]
0: (4) ["Femme", "Alien", "Umo", "ExtraGalactic"]
length: 1
__proto__: Array(0)
test.html:35:6

13:34:27,118
Array [ "Jean" ]
0: "Jean"
length: 1
__proto__: Array(0)
test.html:34:6

13:34:27,118
Array [ (3) […] ]
0: (3) ["Homme", "Luozien", "Kinoinisé"]
length: 1
__proto__: Array(0)
test.html:35:6

Plusieurs valeurs de retour d’une même fonction :

Une fonction JS ne peut retourner qu’une seule valeur à la fois. Pour en


retourner plusieurs, placez-les dans une structure (array ou objet) :

Retour multiple dans un objet par « destructuration » :

Variables & Functions - 67 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
<script type="text/javascript"> // "use strict";
function Oeil (diamAP, degMyopie) {
let refrCornée=null
return {
diamAP, degMyopie, refrCornée
}
}

let oyo = Oeil("25 mm", "-12 D");

console.log(oyo);
with(oyo){
console.log(`${diamAP}, ${degMyopie}, ${refrCornée}`);
}
</script>

Retour multiple dans une Array complexe :

<script type="text/javascript"> "use strict";


function retmultiple(){ const c = new Date();
return [
{ s:c.getDay() , j:c.getDate(),
m:c.getMonth() , a:c.getFullYear() ,
hr:c.getHours() , mn:c.getMinutes() ,
sc:c.getSeconds() , ms:c.getMilliseconds()
}
,
[ c.getDay() , c.getDate(),
c.getMonth() , c.getFullYear() ,
c.getHours() , c.getMinutes() ,
c.getSeconds() , c.getMilliseconds()
]
]
}
// Renvoi dans une array (tableau), d’un objet et une ar-
ray.

// Retournera dans un littéral d'objet :


// jour de la semaine [0..6], jour du mois,

Variables & Functions - 68 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
// le mois [0..11] et l'année longue.

const j=retmultiple()

// 8 données renvoyées ds l'objet de l'array de retour.

console.log(
"Auj = [" +
j[0].s + "], le " +
j[0].j + "/" + ++j[0].m + "/" + j[0].a +
" - " +
j[0].hr + ":" + j[0].mn + ":" + j[0].sc +
":" + j[0].ms
)

// 8 données renvoyées dans l'array de l'array de retour.


console.log("Auj = [" +
j[1][0] + "], le " +
j[1][1] + "/" + ++j[1][2] + "/" + j[1][3] +
" - " +
j[1][4] + ":" + j[1][5] + ":" + j[1][6] +
":" + j[1][7])
</script>

16:47:52,332 Auj=[2], le 25/12/2018-16:47:52:332 test.html:27:1


16:47:52,333 Auj=[2], le 25/12/2018-16:47:52:332 test.html:37:1

CHAPITRE 4 : Définitions des termes JS selon ECMA :

https:/www.ecma-international.org/ecma-262/8.0

On y trouve notamment les définitions officielles ECMA de (et donc les


différences entre) « null », « undefined », « NAN », « Infinity » et bien
sûr le zéro (« 0 ») !...

ECMA définit le « NaN » comme suit :

The Number type has exactly 18’437’736’874’454’810’627


(that is, 264 - 253 + 3) values, representing the double-precision
64-bit format IEEE 754-2008 values as specified in the IEEE

Variables & Functions - 69 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
Standard for Binary Floating-Point Arithmetic, except that the
9’007’199’254’740’990 (that is, 253 - 2) distinct “Not-a-
Number” values of the IEEE Standard are represented in ECMAS-
cript as a single special NaN value.

(Note that the NaN value is produced by the program expression


NaN.) In some implementations, external code might be able to
detect a difference between various Not-a-Number values, but
such behaviour is implementation-dependent; to ECMAScript
code, all NaN values are indistinguishable from each other.

Note :

The bit pattern that might be observed in an ArrayBuffer (see


24.1) or a SharedArrayBuffer (see 24.2) after a Number value
has been stored into it is not necessarily the same as the internal
representation of that Number value used by the ECMAScript im-
plementation.

There are two other special values, called positive Infinity and
negative Infinity. For brevity, these values are also referred to for
expository purposes by the symbols +∞ and -∞, respectively.

(Note that these two infinite Number values are produced by the
program expressions +Infinity (or simply Infinity) and -
Infinity.)

The other 18’437’736’874’454’810’624 (that is, 264 - 253) values


are called the finite numbers. Half of these are positive numbers
and half are negative numbers; for every finite positive Number
value there is a corresponding negative value having the same
magnitude.

Note that there is both a positive zero and a negative zero. For

Variables & Functions - 70 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
brevity, these values are also referred to for expository purposes
by the symbols +0 and -0, respectively. (Note that these two dif-
ferent zero Number values are produced by the program expres-
sions +0 (or simply 0) and -0.)

The 18’437’736’874’454’810’622 (that is, 264 - 253 - 2) finite


nonzero values are of two kinds:

18’428’729’675’200’069’632 (that is, 264 - 254) of them are


normalized, having the form

s × m × 2e

where s is +1 or -1, m is a positive integer less than 253 but not


less than 252, and e is an integer ranging from -1074 to 971, in-
clusive.

The remaining 9’007’199’254’740’990 (that is, 253 - 2) values


are denormalized, having the form

s × m × 2e

where s is +1 or -1, m is a positive integer less than 252, and e is -


1074.

Note that all the positive and negative integers whose magnitude is
no greater than 253 are representable in the Number type (indeed,
the integer 0 has two representations, +0 and -0).

A finite number has an odd significand if it is nonzero and the in-


teger m used to express it (in one of the two forms shown above)
is odd. Otherwise, it has an even significand.

In this specification, the phrase “the Number value for x” where x


represents an exact real mathematical quantity (which might
Variables & Functions - 71 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
even be an irrational number such as π) means a Number value
chosen in the following manner. Consider the set of all finite val-
ues of the Number type, with -0 removed and with two additional
values added to it that are not representable in the Number type,
namely 21024 (which is +1 × 253 × 2971) and -21024 (which is -1 × 253
× 2971). Choose the member of this set that is closest in value to x.
If two values of the set are equally close, then the one with an
even significand is chosen; for this purpose, the two extra values
21024 and -21024 are considered to have even significands. Finally, if
21024 was chosen, replace it with +∞; if -21024 was chosen, replace
it with -∞; if +0 was chosen, replace it with -0 if and only if x is
less than zero; any other chosen value is used unchanged. The
result is the Number value for x. (This procedure corresponds ex-
actly to the behaviour of the IEEE 754-2008 “round to nearest,
ties to even” mode.)

Some ECMAScript operators deal only with integers in specific


ranges such as -231 through 231 - 1, inclusive, or in the range 0
through 216 - 1, inclusive. These operators accept any value of the
Number type but first convert each such value to an integer value
in the expected range. See the descriptions of the numeric conver-
sion operations in 7.1.

<script>
console.log("isNaN(NaN) ?" , isNaN(NaN));
console.log('isNaN("texte") ?' , isNaN("texte"));
console.log("isNaN('texte') ?" , isNaN("texte"));
console.log("isNaN('') ?" , isNaN(""));
console.log("isNaN(0) ?" , isNaN(0));
console.log("isNaN(-0) ?" , isNaN(-0));
console.log("isNaN(Number.POSITIVE_INFINITY) ?",
isNaN(Number.isNaNPOSITIVE_INFINITY));
console.log("isNaN(Number.NEGATIVE_INFINITY) ?",
isNaN(Number.isNaNNEGATIVE_INFINITY));
console.log("isNaN(3247) ?" , isNaN(3247));
console.log("isNaN(-34.68) ?" , isNaN(-34.68));
console.log("isNaN(false) ?" , isNaN(false));
</script>
Variables & Functions - 72 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Il n’y a pas une valeur unique représentant le NAN.

Donnons un exemple simple :

Si un nombre N peut être représenté par une mantisse (N, disons


de 4 chiffres) et un exponent (E, disons de 8 chiffres), de sorte que
N = M x 2^E, comme ceci :

N = M.E,

et que

pour N1, M1 = 9d (1001b) et E1 = 54d (0011'0110b)


=> N1 = 162'129'586'585'337'856d

Variables & Functions - 73 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
et

pour N2, M2 = 9d (1001b) et E2 = 55d (0011'0111b)


=> N2 = 324'259'173'170'675'712

Vous voyez que entre N1 et N2 il y a beaucoup d'autres nombres


(au moins 162'129'586'585'337'856 si on se limite à notre précision
ici) qu'on ne saurait pas représenter avec la mantisse 9.

Bref, entre deux nombres successifs ordonnés représentables


dans les limites des tailles de stockage de la Mantisse et de
l’Exponent, il existe une infinité de NAN. Ceci, c’est sans compter
les véritables « Non Nombres ».

TOUS LES NOMBRES QU'ON NE PEUT PAS REPRÉSENTER AVEC


« TOUTES LES COMBINAISONS MANTISSE-EXPONENT { MAN-
TISSES OBTENSIBLES DANS LA GAMME DÉTERMINÉE PAR LA
TAILLE DE [LE NOMBRE DE BITS DANS] LA MANTISSE, ET TOUS
LES EXPOSENTS [DE 2] QU'AUTORISE LA GAMME DES EXPO-
SENTS } » SONT DES NAN.

4.3 TERMS AND DEFINITIONS :


4.3.1 type : set of data values as defined in clause of this specification
4.3.2 primitive value : member of one of the types Undefined, Null, Boolean, Num-
ber, Symbol, or String as defined in clause. A primitive value is a datum that is repre-
sented directly at the lowest level of the language implementation.
4.3.3 object : member of the type Object. An object is a collection of properties and
has a single prototype object. The prototype may be the null value.

Variables & Functions - 74 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
4.3.4 constructor : function object that creates and initializes objects. The value of a
constructor's prototype property is a prototype object that is used to implement inher-
itance and shared properties.
4.3.5 prototype : object that provides shared properties for other objects
When a constructor creates an object, that object implicitly references the constructor's
prototype property for the purpose of resolving property references. The constructor's
prototype property can be referenced by the program expression constructor.prototype,
and properties added to an object's prototype are shared, through inheritance, by all
objects sharing the prototype. Alternatively, a new object may be created with an ex-
plicitly specified prototype by using the Object.create built-in function.
4.3.6 ordinary object : object that has the default behaviour for the essential internal
methods that must be supported by all objects
4.3.7 exotic object : object that does not have the default behaviour for one or more
of the essential internal methods.
Any object that is not an ordinary object is an exotic object.
4.3.8 standard object : object whose semantics are defined by this specification
4.3.9 built-in object : object specified and supplied by an ECMAScript implementa-
tion. Standard built-in objects are defined in this specification. An ECMAScript im-
plementation may specify and supply additional kinds of built-in objects. A built-in
constructor is a built-in object that is also a constructor.
4.3.10 undefined value : primitive value used when a variable has not been as-
signed a value
4.3.11 Undefined type : type whose sole value is the undefined value
4.3.12 null value : primitive value that represents the intentional absence of any
object value
4.3.13 Null type : type whose sole value is the null value
4.3.14 Boolean value : member of the Boolean type
There are only two Boolean values, true and false.
4.3.15 Boolean type : type consisting of the primitive values true and false
4.3.16 Boolean object : member of the Object type that is an instance of the stand-
ard built-in Boolean constructor
A Boolean object is created by using the Boolean constructor in a new expression,
supplying a Boolean value as an argument. The resulting object has an internal slot
whose value is the Boolean value. A Boolean object can be coerced to a Boolean value.
4.3.17 String value : primitive value that is a finite ordered sequence of zero or more
16-bit unsigned integer values. A String value is a member of the String type. Each
integer value in the sequence usually represents a single 16-bit unit of UTF-16 text.
However, ECMAScript does not place any restrictions or requirements on the values
except that they must be 16-bit unsigned integers.
4.3.18 String type : set of all possible String values
4.3.19 String object : member of the Object type that is an instance of the standard
built-in String constructor. A String object is created by using the String constructor in
a new expression, supplying a String value as an argument. The resulting object has an
internal slot whose value is the String value. A String object can be coerced to a String
Variables & Functions - 75 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
value by calling the String constructor as a function.
4.3.20 Number value : primitive value corresponding to a double-precision 64-bit
binary format IEEE 754-2008 value. A Number value is a member of the Number type
and is a direct representation of a number.
4.3.21 Number type : set of all possible Number values including the special “Not-
a-Number” (NaN) value, positive infinity, and negative infinity
4.3.22 Number object : member of the Object type that is an instance of the stand-
ard built-in Number constructor
A Number object is created by using the Number constructor in a new expression, sup-
plying a number value as an argument. The resulting object has an internal slot whose
value is the number value. A Number object can be coerced to a number value by call-
ing the Number constructor as a function.
4.3.23 Infinity : number value that is the positive infinite number value
4.3.24 NaN : number value that is an IEEE 754-2008 “Not-a-Number” value
4.3.25 Symbol value : primitive value that represents a unique, non-String Object
property key
4.3.26 Symbol type : set of all possible Symbol values
4.3.27 Symbol object : member of the Object type that is an instance of the standard
built-in Symbol constructor
4.3.28 function : member of the Object type that may be invoked as a subroutine
In addition to its properties, a function contains executable code and state that deter-
mine how it behaves when invoked. A function's code may or may not be written in
ECMAScript.
4.3.29 built-in function : built-in object that is a function. Examples of built-in
functions include parseInt and Math.exp. An implementation may provide implementa-
tion-dependent built-in functions that are not described in this specification.
4.3.30 property : part of an object that associates a key (either a String value or a
Symbol value) and a value. Depending upon the form of the property the value may be
represented either directly as a data value (a primitive value, an object, or a function
object) or indirectly by a pair of accessor functions.
4.3.31 method : function that is the value of a property. When a function is called as
a method of an object, the object is passed to the function as its this value.
4.3.32 built-in method : method that is a built-in function
Standard built-in methods are defined in this specification, and an ECMAScript imple-
mentation may specify and provide other additional built-in methods.
4.3.33 attribute : internal value that defines some characteristic of a property
4.3.34 own property : property that is directly contained by its object
4.3.35 inherited property : property of an object that is not an own property but is a
property (either own or inherited) of the object's prototype.

I. Le NaN (Not a Number) :

Variables & Functions - 76 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
Quelques types de données sont très difficiles à se figurer :

1. null : valeur que souvent vous (rarement le système) affectez expli-


citement à une variable pour l’initialiser à RIEN, juste pour éviter qu’elle
ait automatiquement la valeur undefined.

2. Undefined : Valeur que prend automatiquement une variable quand


elle n’est pas explicitement initialisée (même pas avec null) lors de sa dé-
claration.

3. NaN (number value that is a IEEE 754 “Not-a-Number” value) :


Il faut d’abord savoir qu’il n’y a pas un nombre particulier, précis représen-
tant le NaN. Dans IEEE 754, NaN est défini comme tout nombre à virgule
flottante dont tous les bits d’exposant (exponent bits) sont à 1 et la partie
fractionnaire (fractional part) ayant n’importe quelle valeur différente de
zéro (any non-zero value). Donc on peut bien avoir NaN !==NaN.

Mais:
« (null == undefined) == true »,
« (null === undefined) == false ».

« (undefined==true) == false »
« (undefined==false) == false ».

Mais aussi « null == 0 »


mais « (undefined == NaN) == false ».

var vnull = null;


var rvnull = 3 * vnull; // Donne 0.

var cudf;
var rcudf = 1 * cudf; // Donne NaN

« (NaN === NaN) == false »

et

« (NaN == NaN) == false ».

Variables & Functions - 77 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
La méthode « Object . is ( ) » teste et confirme l’identité [bitwise] absolue,
c’est-à-dire que

« Object . is ( a , b ) » est identique à « (a = = = b) »,

« Object.is(true,true) == true »
« ( Object.is(true,true) == true ) == true »
« (Object.is(true,true) === true ) == true »

« Object.is(1,1) == true »
« ( Object.is(1,1) == true ) == true »
« ( Object.is(1,1) === true ) == true »

« Object.is(0,0) == true »
« ( Object.is(0,0) == true ) == true »
« ( Object.is(0,0) === true ) == true »

« Object.is(true,1) == false »
« ( Object.is(true,1) == true ) == false »
« ( Object.is(true,1) === true ) == false »
« ( Object.is(true,1) == false ) == true »
« ( Object.is(true,1) === false ) == true »

« Object . is ( ) » échoue dans les deux cas suivants :

« Object . is ( NaN , NaN ) == true »


« (Object . is ( NaN , NaN ) == true ) == true »
« (Object . is ( NaN , NaN ) === true ) == true »

et

« Object . is ( -0 , 0 ) == false »
« (Object . is ( -0 , 0 ) == true ) == false »
« (Object . is ( -0 , 0 ) == false ) == true »
« (Object . is ( -0 , 0 ) === true ) == false »
« (Object . is ( -0 , 0 ) === false ) == true »

Variables & Functions - 78 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
=> Pour tester « IsNaN » :
1. Fonction « isNaN ( ) » :

isNaN(NaN) === true ;


isNaN("") == false ;
isNaN("") === false ;
isNaN("stg") === true ;
isNaN(" ") == false ;
isNaN(" ") === false ;

2. Méthode Number.isNaN() :

Number.isNaN(NaN) === true ;


Number.isNaN("") == false ;
Number.isNaN("") === false ;
Number.isNaN("stg") === false ;
Number.isNaN(" ") == false ;
Number.isNaN(" ") === false ;

3. typeof : Indique qu’un nombre n’est pas NaN.

typeof 0/0 (donne NaN) ;


((typeof 0/0) == NaN) == false ;
((typeof 0/0) == NaN) === false ;
typeof NaN === "number" ;

4. L’expression x != x :

<script language="JavaScript"> "use strict";


let x = 15;
console.log(x != x); // false

console.log(typeof 0/0);// NaN


console.log((0/0) != (0/0)); // true

// Mais remarquez ceci :

x=0/0;
console.log(typeof x); // number

Variables & Functions - 79 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
console.log(x != x); // true
</script>

CHAPITRE 6 : Additon des nombres en JavaScript

Les nombres en JavaScript sont saisis, dans les champs [de saisie], en for-
mat « littéral » (« String »). Leur addition fait l’addition concatenative et
non pas l’addition arithmétique.

Voici quelques astuces pour contourner ce problème épineux et crucial.

<script type="text/javascript"> "use strict";


let un="1", deux="2";
console.log(`un + deux =`+
`${un + deux}`);
console.log(`-(-un - deux) =`+
`${-(-un - deux)}`);
console.log(`parseInt(un) + parseInt(deux) =`+
`${parseInt(un) + parseInt(deux)}`);
console.log(`eval(un) + eval(deux) =`+
`${eval(un) + eval(deux)}`);
console.log(`1*un + 1*deux =`+
`${1*un + 1*deux}`);
console.log(`un/1 + deux/1 =`+
`${un/1 + deux/1}`);
</script>

CHAPITRE 7 : Le « TypeCasting » :

Variables & Functions - 80 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
1. Dans les opérations arithmétiques (outre l’addition = concaténa-
tion) les chaînes sont converties ("implied typecasting) en
nombres :
25 - "10" = 15 ; 25 * "10" = 250 ; 25 / "10" = 2.5...

2. Dans les opérations de concaténation (toute addition impliquant


une chaîne de caractères) ce sont les autres types qui sont conver-
tis en chaîne de caractères.

a. Dans l’addition d’un nombre et une string, le nombre est


coercé en string : 25 + "10" = "2510".

b. Dans l’addittion d’un Boolean et une string, le Boolean


est coercé en string : true + "false" = "truefalse".

3. Dans l’addition d’un nombre et un Boolean, le Boolean est coer-


cé en nombre : true + 10 = 11 ; false + 10 = 10.

4. Dans les opérations de comparaison, les string (chaînes) sont


coercées en nombres : 10 < "050" = true.

Voyez donc ceci à la console :

"88"+77 -> "8877"


88+"77" -> "8877"
"88+77" -> "88+77"
88+77 -> 165
"Somme = " + 4 + 7 -> "Somme = 47"
"Somme = "+1*4+7 -> "Somme = 47"
"Somme = "+1*(4+7) -> "Somme = 11"
"Somme = "+(4+7) -> "Somme = 11"
"Somme = "+-(-4-7) -> "Somme = 11"
"Somme = "+eval(4+7) -> "Somme = 11"
"Somme = "+eval(4)+eval(7) -> "Somme = 47"
"Somme = "+parseInt(4)+parseInt(7) -> "Somme =
47"
Variables & Functions - 81 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Et dans un code :

<script type="text/javascript"> "use strict";


let n1=prompt("Donnez un nombre",
Math.floor(Math.random()*100));

const n2=prompt("Donnez un auttre nombre",


Math.floor(Math.random()*100));

console.log(n1+" + "+n2+" = ");


console.log(n1 + n2);
console.log(parseInt(n1) + parseInt(n2));
console.log(eval(n1) + eval(n2));

let n1e=eval(n1), n2e=eval(n2);


console.log(n1e + n2e);

let n1p=parseInt(n1), n2p=parseInt(n2);


console.log(n1p + n2p);
</script>

Vous pouvez forcer une coercion (coercion explicite) :

1. La fonction parseInt() covertit excplicitement un numérique litté-


ral en entier,
2. La fonction parseFloat() covertit excplicitement un numérique
littéral en nombre

Le numérique littéral doit être au début de la chaîne.

<script type="text/javascript"> "use strict";


var i = "1980 mille neuf cent quatre-vingt"
Variables & Functions - 82 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
var f = "19.80 dix-neuf point quatre-vingt"
console.log(i) // 1980 mille neuf cent quatre-vingt
console.log(f) // 19.80 dix-neuf point quatre-vingt
console.log(parseInt(i)) // 1980
console.log(parseFloat(i)) // 1980
console.log(parseInt(f)) // 19
console.log(parseFloat(f)) // 19.8
</script>

CHAPITRE 8 : Math.floor() ou (x-(xmodulo1)) ?


Et les autres arrondissements.

Mini Benchmark :

<script type="text/javascript"> "use strict";


const i = 2579.9752;
let v, debut, fin, c, n = 1e7;

m = i;
console.log("Math.floor(m) = Math.floor(" + m + ") = " +
Math.floor(m));

debut = new Date();


m = i;
c = n;
while (c--)
Math.floor(m);
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

Variables & Functions - 83 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
m = i;
console.log("Math.trunc(m) = Math.trunc(" + m + ") = " +
Math.trunc(m));

debut = new Date();


m = i;
c = n;
while (c--)
Math.trunc(m);
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

var m = i;
console.log("parseInt(m) = " + "parseInt(" + m + ") = " +
parseInt(m));

debut = new Date();


m = i;
c = n;
while (c--)
parseInt(m);
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("(m - (m % 1)) = (" + m + " - (" + m + " % 1))
= " +
(m - (m % 1)));

debut = new Date();


m = i;
c = n;
while (c--)
(m - (m % 1));
console.log("Durée : " + (new Date() - debut) / 1000);

console.log(`${"\n".repeat(5)}${"*".repeat(30)}\n\n`);
Variables & Functions - 84 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

m = i;
console.log("m | 0 = " + m + " | 0 = ",
m | 0);

debut = new Date();


m = i;
c = n;
while (c--)
m | 0;
console.log("Durée : " + (new Date() - debut) / 1000);

console.log(".!. ATTENTION .!.");


m = 3000000000.1;
console.log(m + " | 0 = ", m | 0);

(function () {
let b = null;
console.log("Parce que En DOUBLE-WORD (32 bits) :
");
console.log(m + "d = " + (b = m.toString(2)) +
"b");
console.log("10110010110100000101111000000000b
=");
console.log(
"1011'0010''1101'0000'''0101'1110''0000'0000b
= ",
m | 0 + "d");
console.log(
"Notez le bit (ou flag) du signe qui est à
1.");
}
)();

console.log("".padEnd(3, "\n"));
console.log("ES10 n'utilise pas encore le 64 bits : ");

m = new Uint8Array([3000000000.1]);
console.log("Uint8Array ([3000000000.1]) = " +
m.toString());

m = new Uint16Array([3000000000.1]);
console.log("Uint16Array ([3000000000.1]) = " +
Variables & Functions - 85 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
m.toString());

m = new Uint32Array([3000000000.1]);
console.log("Uint32Array ([3000000000.1]) = " +
m.toString());

m = new Uint8ClampedArray([3000000000.1]);
console.log("Uint8ClampedArray([3000000000.1]) = " +
m.toString());

console.log("");

m = new Int8Array([3000000000.1]);
console.log("Int8Array ([3000000000.1]) = " +
m.toString());

m = new Int16Array([3000000000.1]);
console.log("Int16Array ([3000000000.1]) = " +
m.toString());

m = new Int32Array([3000000000.1]);
console.log("Int32Array ([3000000000.1]) = " +
m.toString());

console.log(`\n${"*".repeat(30)}${"\n".repeat(5)}` );

console.log("-----");
console.log("La suite ne retourne pas seulement la partie
entière");
console.log("-----");
console.log("");

m = i;
console.log("parseFloat(m) = parseFloat(" + m + ") = " +
parseFloat(m));

debut = new Date();


m = i;
c = n;
while (c--)
parseFloat(m);
Variables & Functions - 86 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("m.toFixed(0) = " + m + ".toFixed(0) = " +
m.toFixed(0));

debut = new Date();


m = i;
c = n;
while (c--)
m.toFixed(0);
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("Math.ceil(m) = Math.ceil(" + m + ") = " +
Math.ceil(m));

debut = new Date();


m = i;
c = n;
while (c--)
Math.ceil(m);
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("Math.round(m) = Math.round(" + m + ") = " +
Math.round(m));

debut = new Date();


m = i;
c = n;
while (c--)
Math.round(m);
Variables & Functions - 87 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("m.toPrecision(5) = " + m + ".toPrecision(5) =
" +
m.toPrecision(5));

debut = new Date();


m = i;
c = n;
while (c--)
m.toPrecision(5);
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("m.toExponential(5) = " + m +
".toExponential(5) = " + m.toExponential(5));

debut = new Date();


m = i;
c = n;
while (c--)
m.toExponential(5);
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("eval(m)= eval(" + m + ") = " + eval(m));

debut = new Date();


m = i;
c = n;
while (c--)
eval(m);
Variables & Functions - 88 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("Number(m) = Number("+m+") = "+Number(m));

debut = new Date();


m = i;
c = n;
while (c--)
Number(m);
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("-(-m) = -("+-m+") = "+-(-m));

debut = new Date();


m = i;
c = n;
while (c--)
-(-m);
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("1*m = 1*"+m+" = "+1*m);

debut = new Date();


m = i;
c = n;
while (c--)
1*m;
Variables & Functions - 89 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
console.log("Durée : " + (new Date() - debut) / 1000);

console.log("");

m = i;
console.log("m/1 = "+m+"/1 = "+ m/1);

debut = new Date();


m = i;
c = n;
while (c--)
-(-m);
console.log("Durée : " + (new Date() - debut) / 1000);
</script>

Exécution du Benchmark :

Math.floor(m) = Math.floor(2579.9752) = 2579 test.html:6:1


Durée : 0.043 test.html:14:1

Math.trunc(m) = Math.trunc(2579.9752) = 2579 test.html:21:1


Durée : 0.032 test.html:29:1

parseInt(m) = parseInt(2579.9752) = 2579 test.html:36:1


Durée : 0.218 test.html:44:1

(m - (m % 1)) = (2579.9752 - (2579.9752 % 1)) = 2579


test.html:51:1
Durée : 0.034 test.html:59:1

****************************** test.html:63:1

m | 0 = 2579.9752 | 0 = 2579 test.html:67:1


Durée : 0.031 test.html:75:1
.!. ATTENTION .!. test.html:77:1
3000000000.1 | 0 = -1294967296 test.html:79:1
Parce que En DOUBLE-WORD (32 bits) : test.html:83:9
3000000000.1d =

Variables & Functions - 90 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
10110010110100000101111000000000.000110011001100110011b
test.html:84:9
10110010110100000101111000000000b = test.html:85:9
1011'0010''1101'0000'''0101'1110''0000'0000b = -1294967296
test.html:86:9
Notez le bit (ou flag) du signe qui est à 1. test.html:89:9

ES10 n'utilise pas encore le 64 bits : test.html:96:1


Uint8Array ([3000000000.1]) = 0 test.html:99:1
Uint16Array ([3000000000.1]) = 24064 test.html:102:1
Uint32Array ([3000000000.1]) = 3000000000 test.html:105:1
Uint8ClampedArray([3000000000.1]) = 255 test.html:108:1

Int8Array ([3000000000.1]) = 0 test.html:114:1


Int16Array ([3000000000.1]) = 24064 test.html:117:1
Int32Array ([3000000000.1]) = -1294967296 test.html:120:1

****************************** test.html:122:1

La suite ne retourne pas seulement la partie entière


test.html:127:1
----- test.html:128:1

parseFloat(m) = parseFloat(2579.9752) = 2579.9752


test.html:133:1
Durée : 0.842 test.html:141:1

m.toFixed(0) = 2579.9752.toFixed(0) = 2580 test.html:148:1


Durée : 1.257 test.html:156:1

Math.ceil(m) = Math.ceil(2579.9752) = 2580 test.html:163:1


Durée : 0.031 test.html:171:1

Math.round(m) = Math.round(2579.9752) = 2580 test.html:178:1


Durée : 0.031 test.html:186:1

m.toPrecision(5) = 2579.9752.toPrecision(5) = 2580.0


test.html:193:1
Durée : 1.404 test.html:201:1

m.toExponential(5) = 2579.9752.toExponential(5) = 2.57998e+3

Variables & Functions - 91 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
test.html:208:1
Durée : 3.459 test.html:216:1

eval(m)= eval(2579.9752) = 2579.9752 test.html:223:1


Durée : 2.735 test.html:230:1

Number(m) = Number(2579.9752) = 2579.9752 test.html:238:1


Durée : 0.48 test.html:245:1

-(-m) = -(-2579.9752) = 2579.9752 test.html:253:1


Durée : 0.3 test.html:260:1

1*m = 1*2579.9752 = 2579.9752 test.html:268:1


Durée : 0.287 test.html:275:1

m/1 = 2579.9752/1 = 2579.9752 test.html:283:1


Durée : 0.295 test.html:290:1

Variables & Functions - 92 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
Puissance de la boucle « for … in » :

La boucle for … in permet de parcourir automatiquement les éléments


d’une collection itérable e.g. une Array, et de leur appliquer un même trai-
tement spécifique.

<script type="text/javascript"> "use strict";


let arr = new Uint32Array(
[83,40,12,89,78,12,10,73,78,77]
);

let t="";
for(let i in arr) t += arr[i] + " | ";
console.log(t);
</script>

16:03:15.217 test.html:6
83 | 40 | 12 | 89 | 78 | 12 | 10 | 73 | 78 | 77 |

Avec la boucle « for … in », on peut aussi dans certains cas parcourir toutes
les propriétés/attributs de certains éléments HTML/DOM comme « naviga-
tor », « window », « document » … sans manipuler d’indice :

Variables & Functions - 93 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Précédence / Préséance des opérateurs

Table de Précédence (Préséance) des Opérateurs JS


(de la plus forte à la plus basse) :

. (dot accès champ)


++ -- - ~ ! delete new typeof void
* / %
+ (addition) - (soustraction) + (concaténation)
<< >> >>>
< <= > >= instanceof
== != === !==
&
^
| &&
||
?:
= op= (pour += -=...*= /=)
, (virgule = chaînage = évaluation multiple)

(3 + 2 * num).toString() === false // Affiche true


!(3 + 2 * num).toString() === "") // false

Exemple illustratif de la précédence (préséance) des opérateurs :

<script type="text/javascript"> "use strict";


var num = 10;
console.log(
5 == num / 2 && !(3 + 2 * num).toString() == false);
// Affiche true.

console.log(
5 == num / 2 && !(3 + 2 * num).toString() === "");
// Affiche false.

console.log((3 + 2 * num).toString() == false) // false


console.log(!(3 + 2 * num).toString() == false) // true
console.log((3 + 2 * num).toString() === false) // false
console.log(!(3 + 2 * num).toString() === false) // true

Variables & Functions - 94 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
console.log((3 + 2 * num).toString() == "") // false
console.log(!(3 + 2 * num).toString() == "") // true
console.log((3 + 2 * num).toString() === "") // false
console.log(!(3 + 2 * num).toString() === "") // false
console.log(!(3 + 2 * num)) // false
</script>

QUIZ :

Expliquez-vous le comportement (du reste très logique mais qu’on pourrait


par mégarde juger de paradoxal) de l’opérateur « OU logique » (à ne pas
confondre avec le « OU binaire/bitwise ») dans ce code.

<script type="text/javascript"> "use strict";


for(let l=-2 ; l<=2 ; l++) {
for(let k=-2 ; k<=2 ; k++) {
console.log(
l+" || "+k," == ", l||k,
" *** "+
k+" || "+l," == ", k||l
);
}
console.log("");
}
</script>

Exécution :

-2 || -2 == -2 /// -2 || -2 == -2
-2 || -1 == -2 /// -1 || -2 == -1
-2 || 0 == -2 /// 0 || -2 == -2
-2 || 1 == -2 /// 1 || -2 == 1
-2 || 2 == -2 /// 2 || -2 == 2

-1 || -2 == -1 /// -2 || -1 == -2
-1 || -1 == -1 /// -1 || -1 == -1
-1 || 0 == -1 /// 0 || -1 == -1
-1 || 1 == -1 /// 1 || -1 == 1
-1 || 2 == -1 /// 2 || -1 == 2

0 || -2 == -2 /// -2 || 0 == -2

Variables & Functions - 95 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
0 || -1 == -1 /// -1 || 0 == -1
0 || 0 == 0 /// 0 || 0 == 0
0 || 1 == 1 /// 1 || 0 == 1
0 || 2 == 2 /// 2 || 0 == 2

1 || -2 == 1 /// -2 || 1 == -2
1 || -1 == 1 /// -1 || 1 == -1
1 || 0 == 1 /// 0 || 1 == 1
1 || 1 == 1 /// 1 || 1 == 1
1 || 2 == 1 /// 2 || 1 == 2

2 || -2 == 2 /// -2 || 2 == -2
2 || -1 == 2 /// -1 || 2 == -1
2 || 0 == 2 /// 0 || 2 == 2
2 || 1 == 2 /// 1 || 2 == 1
2 || 2 == 2 /// 2 || 2 == 2

Cette technique de « OR_isation » est souvent utilisée pour générer des


paramètres [formels] par défaut aussi appelés paramètres [formels] im-
plicites, mais très compromettant quand l’argument envoté (paramètre réel)
est justement « zéro (0) ».

Dans ce cas, on préfère plutôt tester le type de la valeur envoyé avec

param = (typeof param === "undefined") ? default_value : param;

Heureusement que depuis ES6 la définition des valeurs par défaut pour les
paramètres est possible (bien entendu incompatible avec les vieux browsers).
Voir paramètres par défaut (page 8).

Recommandation :

Pour tester un code HTML, DOM, JavaScript, CSS, allez sur l’IDE du
site http://jsfiddle.net/, dommage qu’il faut être online (connecté).

Kinshasa, le lundi 11 mars 2019 (7:17:28 AM).

Variables & Functions - 96 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Mots-clés :

JAVASCRIPT, Programmation Internet, keys, values, parseInt, parseFloat,


toString, fonction fléchée, sloppy mode, mode strict, prototype, objet ordi-
naire, objet exotique, objet standard, built-in object, Scope, contexte
d’exécution, Domaine, Portée, Étendue, Visibilité, Accessibilité, durée de
vie, Es10, ECMASCRIPT 2019, LiveScript, extra-dimensionnels, entités
éthériques non-biologiques, TC39, ECMA, Kaprekar

DIASOLUKA Nz. Luyalu


Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Études humanités : Scientifique - Mathématiques & Physique.
Informaticien-amateur, Programmeur et WebMaster.

Chercheur indépendant, autonome et autofinancé, bénévole,


sans aucun conflit d’intérêt ou liens d'intérêts ou contrainte
promotionnelle avec qui qu’il soit ou quelqu’organisme ou
institution / organisation que ce soit, étatique, paraétatique ou
privé, industriel ou commercial en relation avec le sujet
présenté.

+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818

diasfb@mail2world.com

Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-
Creation

Variables & Functions - 97 / 99 - lundi, 11. mars 2019 (7:17 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
D’autres publications pouvant aussi intéresser :

• https://www.scribd.com/document/377036251/Le-Dosage-Des-
Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-Hasard-Des-
Thermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-Introduction-
Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-Jesus-Christ-
Pour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-visuelle-
angulaire
• https://www.scribd.com/document/375349851/La-variable-This
• https://www.scribd.com/document/375024162/Fonctions-Imbriquees-
en-JS
• https://www.scribd.com/document/374789297/Format-Interne-Des-
Objets-JavaScript
• https://www.scribd.com/document/374788758/Iterations-en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-
de-La-Creation
• https://www.scribd.com/document/374597969/Nouvelle-Formule-d-
IMC-indice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/Property-Descriptors
• https://www.scribd.com/document/373833282/l-Objet-Global-Window
• https://www.scribd.com/document/372665249/Javascript-Tome-II
• https://www.scribd.com/document/355291488/motilite-oculaire-2
• https://www.scribd.com/document/355291239/motilite-oculaire-I
• https://www.scribd.com/document/355290248/Script-d-Analyses-Des-
Reflexes-Pupillomoteurs
• https://www.scribd.com/document/321168468/Renseignements-Id-et-
Anthropometriques
• https://www.scribd.com/document/320856721/Emission-31-Jul-2016
• https://www.scribd.com/document/318182982/Complication-Visuelle-
du-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-Entre-
Oxymetrie-Et-Type-Respiration
Variables & Functions - 98 / 99 - lundi, 11. mars 2019 (7:17 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
• https://www.scribd.com/document/315746265/Classification-Des-
Medicaments
• https://www.scribd.com/document/315745909/Incongruences-
Heresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/Rapport-Entre-
Oxymetrie-Et-Type-Respiration

Variables & Functions - 99 / 99 - lundi, 11. mars 2019 (7:17 )

You might also like