Vous êtes sur la page 1sur 49

Petite Introduction

Aux Fonctions
JavaScript-II
J AVA S C R I P T (Programmation Internet) V O L . I V
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.

Fonctions anonymes inline :

Une fonction anonyme inline est une fonction non identifiée, sans nom,
destinée à s’exécuter en inline c’est-à-dire au moment où la page Web se
charge dans le navigateur. Pour l’appeler explicitement on l’affecte (son
adresse-mémoire) à une variable, on l’appelle avec cette variable avec ou sans
parenthèses.

Les parenthèses après le mot « function » dans la définition reçoivent les


arguments des parenthèses à la fin de la définition de la fonction.

La syntaxe de base d’une fonction anonyme inline est :

(function(){})();

ou

(function(){
}
)();

ou
Petite Introduction Aux Fonctions JavaScript

(function(){}());

ou

(function(){
}
());

ou

!function(){ }();

Exemple :

<script type="text/javascript">
"use strict"; //Mode rigoureux !
var x=25;

// Cette forme (exécution immédiate)


//
(function() {
console.log(x) }
)(x);

// IDENTIQUE à Cette forme


//
!function(x) {
console.log(x) }
(x);

</script>

Exécution :

25 this.html:6:7
25 this.html:10:7

Attention à votre code. Voyez ces divers comportements :

mardi 31 juillet 2018 - 2/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
<script type="text/javascript">
// Sans les parenthèses d'exécution à la fin, n'exécute pas.
console.log((function() {console.log("Dummy"); return false}));
console.log((function() {console.log("Dummy"); return true}));
console.log(!function() {console.log("Dummy"); return false} );
console.log(!function() {console.log("Dummy"); return true} );
console.log(+function() {console.log("Dummy"); return false} );
console.log(+function() {console.log("Dummy"); return true} );
console.log(-function() {console.log("Dummy"); return false} );
console.log(-function() {console.log("Dummy"); return true} );
console.log(~function() {console.log("Dummy"); return false} );
console.log(~function() {console.log("Dummy"); return true} );
console.log(void function() {console.log("Dummy"); return false} );
console.log(void function() {console.log("Dummy"); return true} );
console.log(function() {console.log("Dummy"); return false} );
console.log(function() {console.log("Dummy"); return true} );

console.log(function() {return ""}());

// Avec les parenthèses à la fin, exécute.


console.log((function() {console.log("Dummy"); return false}) () );
console.log((function() {console.log("Dummy"); return true}) () );
console.log(!function() {console.log("Dummy"); return false} () );
console.log(!function() {console.log("Dummy"); return true} () );
console.log(+function() {console.log("Dummy"); return false} () );
console.log(+function() {console.log("Dummy"); return true} () );
console.log(-function() {console.log("Dummy"); return false} () );
console.log(-function() {console.log("Dummy"); return true} () );
console.log(~function() {console.log("Dummy"); return false} () );
console.log(~function() {console.log("Dummy"); return true} () );
console.log(void function(){console.log("Dummy");return false}() );
console.log(void function() {console.log("Dummy"); return true}());
console.log(function() {console.log("Dummy"); return false} () );
console.log(function() {console.log("Dummy"); return true} () );
</script>

Exécution :

ƒ () {console.log("Dummy"); return false}


ƒ () {console.log("Dummy"); return true}
false
false
false
NaN

mardi 31 juillet 2018 - 3/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
NaN
-1 // NaN avec "use strict";
-1 // NaN avec "use strict";
undefined
undefined
ƒ () {console.log("Dummy") ; return false}
ƒ () {console.log("Dummy") ; return true}

Dummy false
Dummy true
Dummy true
Dummy false
Dummy 0
Dummy 1
Dummy -0
Dummy -1
Dummy -1
Dummy -2
Dummy undefined
Dummy undefined
Dummy false
Dummy true

I. Une fonction anonyme inline s'exécute automatiquement pendant le


chargement de la page Web de la même façon que les codes non contenues
dans un(e) [bloc de] fonction.

<script type="text/javascript">
p="Math.PI";

// Définition fonction ordinaire.


function f(p){
console.log("Ds function f()"+p)
}
onload=fl;

// Définition fonction anonyme inline.


fonloading=(function(){ // s'exécute au chargement.
console.log("DURANT CHARGEMENT :\nDs Anonyme : " + p.substr(4,6));
f(", Depuis fonloading()");
f2(", Depuis fonloading()");
}

mardi 31 juillet 2018 - 4/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
)(p);
p=" D U M M Y ";

// Définition fonction ordinaire.


function f2(p){
console.log("Ds function f2()"+p);
}

// Définition fonction ordinaire.


function fl(){
console.log("================\nJUSTE APRES CHARGEMENT");
f("dans fl, Depuis onload");
}
</script>

Exécution dans console.log :

DURANT CHARGEMENT :
Ds Anonyme : .PI fonloading.html:12:4
Ds function f(), Depuis fonloading() fonloading.html:6:2
Ds function f2(), Depuis fonloading() fonloading.html:21:3
================
JUSTE APRES CHARGEMENT fonloading.html:26:3
Ds function f()dans fl, Depuis onload fonloading.html:6:2

II. Expressions de fonctions (fonctions lambdas) :

Fonction comme valeur affectée à une variable à la place d'une expression = (très utile
avec les fonctions anonymes) :

Une expression de fonction est toute déclaration de fonction ne commençant pas avec
le mot-clé function.

function [nom]([param] [, param] [..., param]) {


instructions
}

Entre accolades = facultatif.

Exemple d’expression de fonction :

mardi 31 juillet 2018 - 5/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript

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


let nfct1 = function(){console.log(Math.SQRT2)};
let nfct2 = _=> console.log(Math.SQRT1_2);

let nfct3 = new Function();


nfct3.fct=console.log(Math.LOG2E);

for(let k=1;k<4;k++) { eval("nfct"+k+"()"); }


// 1.4426950408889634
// 1.4142135623730951
// 0.7071067811865476
</script>

III. Déclaration de fonction génératrice (function*) :

Déclaration de fonction génératrice :

function* nom ([param[, param[, ... param]]]) {


instructions
}

IV. Expression de générateur function* :

Déclaration de fonction génératrice :

function* [nom]([param] [, param] [..., param]){


instructions
}

V. Expression de fonction fléchée (=>) :

Arrow functions (“fat arrow” functions). Nouvelle syntaxe depuis ES6, mini fonctions
anonymes, plus concises (courtes : pas de mot-clé function, return est implicite selon la
mardi 31 juillet 2018 - 6/49 - 23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
fonction imbriquée utilisée, accolades =curly brackets= pas obligatoires si une seule
instruction). Une « arrow function » est liée de façon lexicale à sa valeur.

Une fonction fléchée n’a pas besoin des tokens suivants : function, return,
parenthèses, accolades, et point-virgule « ; ».

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

var x = _ => new Date();


console.log(x());
</script>

Exécution avec YANDEX :

Thu Jan 11 2018 21:07:37 GMT+0100 (Paris, Madrid)

Exécution avec FireFox :

Date 2018-01-11T20:09:56.001Z
__proto__: Object { … }

Une fonction fléchée ne possède pas ses propres valeurs pour this, arguments, super,
ou new.target.

Une fonction fléchée retourne par défaut la valeur de l'expression qui est à droite de la
flèche double.

<script type="text/javascript">
'use strict';
console.log((_ => Math.E)());// 2.718281828459045
</script>

Dans une fonction fléchée, le mot-clé « this » ne réfère pas cette fonction, mais le
« this » de son contexte environnemental (scope parent = portée englobante). Une
fonction fléchée ne devrait donc pas être utilisée comme méthode (fonction-propriété)
d’un objet et ne peut servir comme constructeur

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

var ffl = _ => {};

mardi 31 juillet 2018 - 7/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
// TypeError: ffl is not a constructor
// test.html:7:14
let fflI = new ffl();
</script>

« this » référant window :

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

var nb = Math.PI;

var dObj = {
nb: Math.E,

b: _ => this, // Fct Fléchée ret window


c: function() {
return this; // Fct ord ret dObj
}
}

let retO = dObj;

var x;
console.log(x=retO.b())
// b fléchée affiche son this (window)

console.log(x.nb) // Affiche PI (window)


console.log(retO.nb) // Affiche E (local à dObj)

let retC = dObj.c(); // Appel direct de dObj.c


console.log(retC) // this = aussi dObj
console.log(retC.nb) // Affiche E
</script>

Exécution :

Window file:///K:/DADET/PROGS/test.html
test.html:18:3
3.141592653589793 test.html:21:3
2.718281828459045 test.html:22:3
Object { nb: 2.718281828459045, b: b(), c: c() }
test.html:25:3
2.718281828459045 test.html:26:3

mardi 31 juillet 2018 - 8/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript

Après dépliement :

Window
dObj: {…}
b: b()
name: "b"
__proto__: function ()
c: c()
length: 0
name: "c"
prototype: Object { … }
__proto__: function ()
nb: 2.718281828459045
__proto__: Object { … }
nb: 3.141592653589793
x: Window
dObj: Object { nb: 2.718281828459045, b: b(), c: c() }
nb: 3.141592653589793
x: Window file:///K:/DADET/PROGS/test.html
[default properties]
__proto__: WindowPrototype { … }
[default properties]
__proto__: WindowPrototype { … } test.html:18:3

3.141592653589793 test.html:21:3
2.718281828459045 test.html:22:3
{…}
b: function b()
c: function c()
nb: 2.718281828459045
__proto__: Object { … } test.html:25:3
2.718281828459045 test.html:26:3

« this » référant la fonction englobante :

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

function dObj(){
this.v = 30;
this.ol = {
foo : _ => this ,
foa : _ => this.v ,

mardi 31 juillet 2018 - 9/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
fob : _ => Math.PI
}
}

let iObj = new dObj();


console.log(iObj.ol.foo());
console.log(iObj.ol.foa());
console.log(iObj.ol.fob());
</script>

Exécution :

dObj {v: 30, ol: {…}}


ol: {foo: ƒ, foa: ƒ, fob: ƒ}
v: 30
__proto__: Object
30
3.141592653589793

La fonction fléchée n’a pas accès à un « arguments » propre, elle prend celui de son
environnement englobant.

<script>
// "use strict";

var arguments = Math.PI;


var arr = _ => arguments;
console.log(arr(100));
</script>

Exécution :

3.141592653589793

<script>
// "use strict";

function englob() {
// La fonction fléchée n'admet pas arguments
var f = (i) => arguments; // arguments de englob
return f(2); // Appel de la fct fléchée
}

mardi 31 juillet 2018 - 10/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
console.log(englob("text",5,{},function(){}));
</script>

Exécution :

(4) ["text", 5, {…}, ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ]

0: "text"
1: 5
2: {}
3: ƒ ()
callee: ƒ englob()
length: 4
Symbol(Symbol.iterator): ƒ values()
__proto__: Object
4
text
5
{}
__proto__: Object

La fonction fléchée utilise « arguments » de son environnement englobant ou même en


JS standard comme variable ordinaire (le mode strict n’autorise pas d’utiliser les mots-
clés [cfr arguments] comme nom de variable). On peut contourner cette restriction avec
les paramètres du reste :

<script>
"use strict";

function englob() {
// Arguments de la fonction fléchée
var ffl = (...paramRest) => paramRest;
return ffl(5,7);
}
var ret=englob("text",5,{},function(){});
console.log(ret);
console.log(ret.length);
console.log(ret[0]);
console.log(ret[1]);
console.log(ret[2]);
</script>

Exécution :

mardi 31 juillet 2018 - 11/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
(2) [5, 7]
0: 5
1: 7
length: 2
__proto__: Array(0)
2
5
7
undefined

Si la fonction fléchée ne renvoie pas automatiquement la valeur escomptée, forcez avec


un return explicite.

Si la fonction doit seulement créer et retourner un littéral d'objet, l’littéral d'objet à


retourner doit être entouré de parenthèses pour ne pas le confondre avec un corps de
fonction, ou alternativement retournez l’objet avec un return explicite :

Exemple 1 : On ne transmet rien en argument et l’littéral d'objet est créé par la


fonction fléchée :

<script type="text/javascript">
"use strict";
// object literal (notez les parenthèses)
// return implicite.
var f = () => ({ matr:1234 , nom:"texte" });

console.log(f);
console.log(f());
console.log(f().matr);
console.log(f().nom);
</script>

Exécution :

function f() test.html:7:3


Object { matr: 1234, nom: "texte" } test.html:8:3
1234 test.html:9:3
texte test.html:10:3

Exemple 2 : On transmet des primitives en arguments et l’littéral d'objet est créé et


retourné par la fonction fléchée :

mardi 31 juillet 2018 - 12/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
<script type="text/javascript">
"use strict";
// object literal (notez les parenthèses)
// return implicite.
var f = (x,y) => ({ matr:x , nom:y });

// 1er lot de Candidat :


console.log(f(123 , "Diasolukov"));
console.log(f(145 , "Kenakov").matr);
console.log(f(167 , "Beliokovicz").nom);

// 2e lot de Candidat :
console.log(f(234 , "Benjiokovicz"));
console.log(f(256 , "Lorenkov").matr);
console.log(f(278 , "Bastokov").nom);
</script>

Exécution :

Object { matr: 123, nom: "Diasolukov" } test.html:8:2


145 test.html:9:2
Beliokovicz test.html:10:2
Object { matr: 234, nom: "Benjiokovicz" } test.html:13:2
256 test.html:14:2
Bastokov test.html:15:2

Exemple 3 : Création et renvoi par la fonction fléchée d’un littéral d'objet non entouré
de parenthèses ni d’accolades avec retour explicite :

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

// Vu comme bloc de fonction sans «return»


// Ici retournera « undefined » par défaut
// Création littéral d'objet
const objF = obj => { key: obj.nom; };

console.log(objF({nom:"xyz"}));
</script>

Exécution :

mardi 31 juillet 2018 - 13/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
undefined

Écrivez plutôt :

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

let objF = obj => { // Bloc de fonction


return {alias: obj.nom}; //Retour Littéral d'objet
};

console.log(objF({nom:"xyz"}));
console.log(objF({nom:"xyz"}).alias);
</script>

Ou mieux

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

// Littéral d'objet entre parenthèses


let objF = obj => ({
alias: obj.nom
}); // Retour implicite de l’littéral d'objet

console.log(objF({nom:"xyz"}));
console.log(objF({nom:"xyz"}).alias);
</script>

Exécution pour les deux :

Object { alias: "xyz" } test.html:8:3


xyz test.html:9:3

Une fonction fléchée n’est pas (ne peut être) un constructeur et ne peut donc pas avoir
de descendants.

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

let foo = _ => Math.E

mardi 31 juillet 2018 - 14/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript

console.log(foo); // Pointeur sur foo();


console.log(foo()); // Retour de foo();
var iobj = new foo(); // Instanciation de foo()
</script>

Exécution :

function foo() test.html:6:3


2.718281828459045 test.html:7:3
TypeError: foo is not a constructor test.html:8:14

Syntaxe des fonctions fléchées :

N.B.: Pas de saut de ligne entre la liste des paramètres et la flèche d'une
fonction fléchée (AVANT. la double flèche).

Fonction fléchée à un seul paramètre :

p => instructions;

Exemple :

<script type="text/javascript">
"use strict";
var f = txt => txt.split(" "); // return explicie

console.log(f("Diasoluka Luyalu Nzoyifuanga"));


</script>

Exécution :

Array [ "Diasoluka", "Luyalu", "Nzoyifuanga" ]

[…]
0: "Diasoluka"
1: "Luyalu"
2: "Nzoyifuanga"
length: 3
__proto__: Array []

mardi 31 juillet 2018 - 15/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript

Fonctions fléchées à deux paramètres ou plus :

La liste de paramètres formels est entourée de parenthèses :

(p1, p2, ... pn) => expressions;

Exemple :

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

// Avec Fonction fléchée


var ajouter = (id, name) =>
({ matr:"Matr="+id, nom:"Name="+name });
const ret=ajouter (5, "Kaleidoscope");
console.log(ret);

// Avec Fonction classique


var ajout = function (id, name) {
return {
matr: "Matr="+id,
nom: "Name="+name
};
};
const ret2=ajout(10, "Vladivostock");
console.log(ret2);
</script>

Exécution :

Object { matr: "Matr=5", nom: "Name=Kaleidoscope" }


test.html:8:3
Object { matr: "Matr=10", nom: "Name=Vladivostock" }
test.html:18:3

Si plusieurs arguments ou aucun du tout, ou avec des paramètres du reste, ou avec des
valeurs par défaut, ou un paramètre qui utilise une décomposition, entourez-les de
parenthèses.

mardi 31 juillet 2018 - 16/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
Ci-dessous, la fonction fléchée « fct » a deux paramètres, séparés par une virgule et
entourés d’une paire de parenthèses : « [a,b] = [v,w] » et « {x:c , y:d} = {x:a+b ,
y:a*b} », sous forme de « décomposition pour la liste des paramètres » : la variable
« a » prend la valeur de v=3, et la variable « b » prend la valeur de w=5, et la propriété
« c » prend la valeur « a+b » = 8, la propriété « d » prend la valeur « a*b » = 15, pour
l’expression « a+b * c+d » retournée implicitement et qui vaut 58.

Attention : « a+b * c+d » === « a + (b*c) + d ».

Fonction fléchée Sans paramètres :

La place que devait occuper les paramètres formels est symbolisée par des parenthèses
vides « () » ou un trait de soulignement « _ » :

() = > expressions;

Exemple 1 :

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

// return implicite « undefined »


// consolog.log affiche "Bougez !"
// et retourne « undefined »
var f = () => console.log("Bougez !");

f(); // Appel de la fonction fléchée

// Valeur « undefined » retournée par


// console.log dans la fonction f()
console.log(f());
</script>

Exécution :

Bougez ! test.html:7:17
undefined test.html:14:3

Exemple 2 :

mardi 31 juillet 2018 - 17/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
<script type="text/javascript">
f = () => console.log("LN de 10 = "+Math.log(10));

console.log(f());
</script>

Exécution :

LN de 10 = 2.302585092994046
undefined

Syntaxe minimale complète :

()=>{}
//fonction fléchée vide, renvoie undefined
ou
_=>{}
//fonction fléchée vide, renvoie undefined

Sa syntaxe détaillée :

([param] [, param]) => {


expressions
}

Sa syntaxe minimaliste :

param => expression

param : nom d'un argument, paire de parenthèses () si pas d'arguments ou si


au moins deux arguments. Si un seul argument, parenthèses pas obligatoires :

Exemple de syntaxe minimaliste :

<script type="text/javascript">
// Fonction classique
function a() { return "typeof a = " + typeof a}
console.log( a );

mardi 31 juillet 2018 - 18/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
console.log( a() );

// Fonction fléchée
var b = ( _ => "typeof b = " + typeof b);
console.log( b );
console.log( b() );
</script>

Exécution avec FireFox :

function a() test.html:4:4


a()
arguments: null
caller: null
length: 0
name: "a"
prototype: Object { … }
__proto__: function ()

typeof a = function test.html:5:4

function b() test.html:9:4


name: "b"
__proto__: function ()

typeof b = function test.html:10:4

Exécution avec YANDEX :

ƒ a() { return "typeof a = " + typeof a} test.html:4


typeof a = function test.html:5
_ => "typeof b = " + typeof b test.html:9
typeof b = function test.html:10

instructions ou expression

Si plusieurs instructions, les encadrer par des accolades. Si expression


unique, accolades pas obligatoires. expression est aussi la valeur de retour
implicite de la fonction.

Exemple 1 :

mardi 31 juillet 2018 - 19/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript

<script type="text/javascript">
"use strict";
var x = () => console.log("Haut");
var y = _ => console.log("Bas");

x(); y();
</script>

Exécution :

Haut
Bas

Exemple 2 :

<script type="text/javascript">
"use strict";
var x = (p) => console.log(p);
var y = (q) => console.log(q);

x(10); y( ()=>25 );
</script>

Exécution :

10
test.html:3:18
function ()

()
length: 0
name: ""

__proto__: ()
apply: function apply()
arguments: null
bind: function bind()
call: function call()
caller: null
constructor: function Function()
isGenerator: function isGenerator()

mardi 31 juillet 2018 - 20/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
length: 0
name: ""
toSource: function toSource()
toString: function toString()
Symbol(Symbol.hasInstance): undefined
__proto__: Object { … }

Exemple 3 :

<script type="text/javascript">
"use strict";
var v = x => { return "LN de "+x+" = "+Math.log(x); }

console.log(v(Math.exp(1))); // LN de E
console.log(v(Math.E)); // LN de E
</script>

Exécution :

LN de 2.7182818284590455 = 1
LN de 2.718281828459045 = 1

Exemple 4 :

<script type="text/javascript">
"use strict";
var arf = (x,y,z) => {
return "1 GigaByte = "+
Math.pow(Math.pow(x,y),z)+" Bytes"
}

console.log(arf(2,10,3));
</script>

Exécution :

1 GigaByte = 1073741824 Bytes

mardi 31 juillet 2018 - 21/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
Fonctions fléchées avec les Arrays :

La fonction fléchée ne contient que la structure des enregistrements :

<script type="text/javascript">
"use strict";
var fn = (id, name) => ({id:id, name:name});
console.log( fn (4, "Kyle") );
</script>

Exécution :

Object { id: 4, name: "Kyle" }

{id: 4, name: "Kyle"}


id: 4
name: "Kyle"
__proto__: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ
__defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

ou, la fonction fléchée contient les données des enregistrements :

<script type="text/javascript">
pers = [
{ id:'Pet', Mat:150 },
{ id:'Jean', Mat:2500 },
{ id:'July', Mat:1000 }
];

mardi 31 juillet 2018 - 22/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
// Pour chaque membre de pers (map)
// cette Array pers est mise en argument
// et retourne implicitementson mat.

console.log(pers.map(
pers => pers.id+" = "+pers.Mat));
</script>

Exécution :

Array [ "Pet = 150", "Jean = 2500", "July = 1000" ]


test.html:12:3
1 (3) ["Pet = 150", "Jean = 2500", "July = 1000"]
A 0:"Pet = 150"
B 1:"Jean = 2500"
C 2:"July = 1000"
D length:3
E __proto__:Array(0)

Une variante plus complexe de ce qui précède :

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

var pers = [
{ id:'Pet', Matr:150 },
{ id:'Jean', Matr:250 },
{ id:'July', Matr:100 }
];

// Pour chaque membre de pers (map)


// cette Array pers est mise en argument
// et retourne implicitementson Matr.

console.log(pers.map(
x => x.id+" = "+x.Matr));

console.log(">========<")

var map = new Map(Object.entries(pers));


console.log(map);

console.log("X========X")

mardi 31 juillet 2018 - 23/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
console.log(pers.map(
x => new Map(Object.entries(x))));

console.log("<========>")

var db = pers.map(x => x);


console.log(db)
console.log(db.map(
x => new Map(Object.entries(x))));

console.log("====X====")

db = pers.map(x => [x]);


console.log(db)
console.log(db.map(
x => new Map(Object.entries(x))));
</script>

Exécution dans la console de YANDEX :

A (3) ["Pet = 150", "Jean = 250", "July = 100"]


test.html:14
1 (3) ["Pet = 150", "Jean = 250", "July = 100"]
A 0:"Pet = 150"
B 1:"Jean = 250"
C 2:"July = 100"
D length:3
E __proto__:Array(0)
>========< test.html:17
Map(3) {"0" => {…}, "1" => {…}, "2" => {…}}
test.html:20
1 Map(3) {"0" => {…}, "1" => {…}, "2" => {…}}
A size:(...)
B __proto__:Map
C [[Entries]]:Array(3)
I 0:{"0" => Object}
II 1:{"1" => Object}
III 2:{"2" => Object}
IV length:3
X========X test.html:22
(3) [Map(2), Map(2), Map(2)] test.html:24
1 (3) [Map(2), Map(2), Map(2)]
A 0:Map(2) {"id" => "Pet", "Matr" => 150}
B 1:Map(2) {"id" => "Jean", "Matr" => 250}
C 2:Map(2) {"id" => "July", "Matr" => 100}
D length:3
E __proto__:Array(0)

mardi 31 juillet 2018 - 24/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
<========> test.html:27
(3) [{…}, {…}, {…}] test.html:30
1 (3) [{…}, {…}, {…}]
A 0:{id: "Pet", Matr: 150}
B 1:{id: "Jean", Matr: 250}
C 2:{id: "July", Matr: 100}
D length:3
E __proto__:Array(0)
(3) [Map(2), Map(2), Map(2)] test.html:31
1 0:Map(2) {"id" => "Pet", "Matr" => 150}
2 1:Map(2) {"id" => "Jean", "Matr" => 2500}
3 2:Map(2) {"id" => "July", "Matr" => 1000}
4 length:3
5 __proto__:Array(0)
====X==== test.html:34
(3) [Array(1), Array(1), Array(1)] test.html:37
1 (3) [Array(1), Array(1), Array(1)]
A 0:[{…}]
B 1:[{…}]
C 2:[{…}]
D length:3
E __proto__:Array(0)
(3) [Array(1), Array(1), Array(1)] test.html:37
1 Array(1)
A 0:{id: "Pet", Matr: 150}
B length:1
C __proto__:Array(0)
1 1:Array(1)
A 0:{id: "Jean", Matr: 250}
B length:1
C __proto__:Array(0)
1 2:Array(1)
A 0:{id: "July", Matr: 100}
B length:1
C __proto__:Array(0)
1 length:3
2 __proto__:Array(0)
(3) [Map(1), Map(1), Map(1)] test.html:38
1 (3) [Map(1), Map(1), Map(1)]
A 0:Map(1) {"0" => {…}}
B 1:Map(1) {"0" => {…}}
C 2:Map(1) {"0" => {…}}
D length:3
E __proto__:Array(0)
1 0:Map(1)
A size:(...)
B __proto__:Map
C [[Entries]]:Array(1)
I 0:{"0" => Object}
a key:"0"
b value:{id: "Pet", Matr: 150}
I length:1
1 1:Map(1)

mardi 31 juillet 2018 - 25/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
A size:(...)
B __proto__:Map
C [[Entries]]:Array(1)
I 0:{"0" => Object}
a key:"0"
b value:{id: "Jean", Matr: 2500}
I length:1
1 2:Map(1)
A size:(...)
B __proto__:Map
C [[Entries]]:Array(1)
I 0:{"0" => Object}
a key:"0"
b value:{id: "July", Matr: 1000}
I length:1
1 length:3
2 __proto__:Array(0)

En plus simple :

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

var obj = { Nom: "Pierre", Matr: 123 ,


Titre: "Bel Ami" , Prix: 100};
var map = new Map(Object.entries(obj));
console.log(map);
</script>

Exécution avec YANDEX :

1 Map(4) {"Nom" => "Pierre", "Matr" => 123, "Titre" => "Bel
Ami", "Prix"=> 100}
A size:(...)
B __proto__:Map
C [[Entries]]:Array(4)
I 0:{"Nom" => "Pierre"}
II 1:{"Matr" => 123}
III 2:{"Titre" => "Bel Ami"}
IV 3:{"Prix" => 100}
V length:4

Exécution avec FIREFOX :

Map { Nom → "Pierre", Matr → 123, Titre → "Bel Ami", Prix → 100 }
test.html:6:3

mardi 31 juillet 2018 - 26/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
Map
size: 4
<entries>
0: Nom → "Pierre"
1: Matr → 123
2: Titre → "Bel Ami"
3: Prix → 100
__proto__: Object { … }

Visualisation du code de la fonction fléchée dans la console :

Array [ "Pierre = 150", "Jean-Baptste = 2500", "Juliana = 1000" ]

[…]
0: "Pierre = 150"
1: "Jean-Baptste = 2500"
2: "Juliana = 1000"
length: 3

__proto__: []
concat: function concat()
constructor: function Array()
copyWithin: function copyWithin()
entries: function entries()
every: function every()
fill: function fill()
filter: function filter()
find: function find()
findIndex: function findIndex()
forEach: function forEach()
includes: function includes()
indexOf: function indexOf()
join: function join()
keys: function keys()
lastIndexOf: function lastIndexOf()
length: 0
map: function map()
pop: function pop()
push: function push()
reduce: function reduce()
reduceRight: function reduceRight()
reverse: function reverse()

mardi 31 juillet 2018 - 27/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
shift: function shift()
slice: function slice()
some: function some()
sort: function sort()
splice: function splice()
toLocaleString: function toLocaleString()
toSource: function toSource()
toString: function toString()
unshift: function unshift()
Symbol(Symbol.iterator): undefined
Symbol(Symbol.unscopables): undefined

__proto__: {…}
__defineGetter__: function __defineGetter__()
__defineSetter__: function __defineSetter__()
__lookupGetter__: function __lookupGetter__()
__lookupSetter__: function __lookupSetter__()
constructor: function Object()
hasOwnProperty: function hasOwnProperty()
isPrototypeOf: function isPrototypeOf()
propertyIsEnumerable: function propertyIsEnumerable()
toLocaleString: function toLocaleString()
toSource: function toSource()
toString: function toString()
unwatch: function unwatch()
valueOf: function valueOf()
watch: function watch()

VI. Avec le constructeur Fonction (new Function) :


Pas très commode.

new Function (arg1, arg2, ... argN, corpsDeFct)

VI Fonction anonyme inline :


Exécute au chargement du fichier et ordinairement une seule fois. Appelée « expression
de fonction immédiatement invoquée » (Immediately Invokable Function Expression =
IIFE). Les IIFE sont appelées dès la fin de leur déclaration. Les parenthèses terminales
commandent d’ailleurs l’exécution immédiate de la fonction

(function() {

mardi 31 juillet 2018 - 28/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
/* instruction */
})();

Si une fonction ordinaire passe son adresse à la variable de gauche lors de sa définition,
une IIFE n’affecte pas son adresse à la variable. Il ne sert donc à rien d’écrire :

var f = (function(){ console.log (this) })();


// TypeError: f is not a function
// f();

Exécution :

this n’est pas reconnu.


Undefined test.html:4:22

Tout objet soit-il fonction (son adresse) peut être affecté à une variable.

Les fonctions appelées (avec parenthèses) retournent toujours la valeur de


l’expression qui suit la directive return, par défaut (quand cette directive ne
figure pas dans la fonction ou quand elle ne spécifie pas une valeur de retour)
elles retournent undefined.

Pendant la définition d’une fonction non inline (IIFE) ou quand une fonction est
invoquée sans parenthèses en dehors de définition, elle retourne son adresse-
mémoire (pointeur).

Exemple 1 :

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

// Fonction inline, exécute


var pi = (() => Math.PI)();
// Affiohe valeur retournée ci-haut
console.log(pi);

// Fonction à exécution différée


var nep = () => Math.E;
// Exécution de la fonction
console.log( nep() );

mardi 31 juillet 2018 - 29/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
</script>

Exécution :

3.141592653589793
test.html:12 2.718281828459045

Exemple 2 :

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

// Il exécute directement et
// retourne ici même une valeur.
// On ne peut l'appeler de nulle part ailleurs
var foa = (function(){
return("Ret in foa")
})()

// Il n'exécute pas directement et


// retourne ici l'adrersse de son adresse
var FOB = function(){
return("Ret in FOB")
}

console.log(foa); // Contenu retourné à foa


console.log(FOB); // Contenu à l'adresse de FOB
console.log(FOB()); // Exécute Contenu pointé
// à l'adresse de FOB
</script>

Exécution :

Ret in foa

ƒ (){
return("Ret in FOB")
}

Ret in FOB

mardi 31 juillet 2018 - 30/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
Exemple 3 :

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

var dObj = function(){


this.v=45;
console.log (this);
return this;
};

// Instanciation de dObj()
var foo = new dObj();

// Pointeur sur dObj() cô fonction


var fof = dObj;

// Instanciation de foo()
// TypeError: foo is not a constructor
// Une instance ne peut être constructeur
// var fop = new foo();

console.log(dObj); // Pointeur sur constructeur


console.log(foo); // Pointeur sur l'instance
console.log(foo.v); // Accès à propriété d'objet
console.log(fof); // Pointeur sur fonction dObj
console.log(fof.v); // undefined
</script>

Exécution :

Rendez-vous bien aux numéros des lignes.

dObj {v: 45} test.html:6:5

function dObj() test.html:21:1


ƒ (){
this.v=45;
console.log (this);
return this;
}

dObj {v: 45} test.html:22:1

mardi 31 juillet 2018 - 31/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
45 test.html:23:1

function dObj() test.html:24:1


ƒ (){
this.v=45;
console.log (this);
return this;
}

undefined test.html:25:1

Affectation d'une fonction :

1. Par fonction anonyme : Par affectation à une variable, de l’adresse de la


fonction anonyme inline pendant sa définition.

a. var v=(function(){})();

Définition et affectation d’une fonction anonyme non inline :

b. var v=function(){};

2. Par identification de fonction : idem que 1b.

c. var v=function v(){};

Affectation de l’adresse (et appel) de la fonction ci-dessus (dans c).


N.B.: Pas de parenthèses dans le nom de la fonction affectée :

d. af=v ; af();

3. Adresse de la fonction retournée par la fonction englobante.

<script type="text/javascript">
function f1(){
// f3 = adresse de la fonction f2() en cours de définition
var f3=function f2(){
console.log("Dans function f2()")
}

mardi 31 juillet 2018 - 32/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
return f3; // retourne un pointeur sur f2()
}

// v prend l'adresse de la fonction f2() retournée par f1().


v=f1()
// appel de la fonction f2() notez les parenthèses
v()
</script>

Exécution dans console.log :

Dans function f2() fcts.html:4

En fait, l'identifieur « f2 » ci-dessus ne sert absolument à rien.

<script type="text/javascript">
f=function f2(){
console.log(new Date());
}

f();
f2();
</script>

Exécution :

Date 2017-12-25T00:04:18.791Z id_rien.html:3:3


ReferenceError: f2 is not defined id_rien.html:7:2

Une autre fonction expression (type b. ci-dessus) :

<script type="text/javascript">
var age = function(dn) {
j=new Date();
return (j-dn)/1000/3600/24/365.2475
};

x=age(new Date("11 August 1953"));


console.log(x+" ans.");
</script>

mardi 31 juillet 2018 - 33/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript

Exécution dans console.log :

64.36071000983478 ans. fvar_age.html:8

Le membre de gauche de l’affectation d’une fonction peut être une propriété


d’objet, p. ex.
« onclick » pour créer un événement :

<body>
<div><p>Cliquez ici</p></div>
<p>Léger <strong>Gras</strong> Léger</p>
</body>

<script>
//Accès au PREMIER paragraphe
var pc = document.querySelector('p');

//Création de gestionnaire d'évènement "onclick"


pc.onclick = function(){
this.innerHTML = 'Le click a été savoureux !';
this.style.color = "red";
this.style.borderStyle = "solid";
this.style.borderColor = "blue";
this.style.padding = "1em";
this.style.backgroundColor = "yellow";
this.style.width = "12em";
this.style.fontWeight = '900';
};
</script>
</html>

Exécution :

Avant le click :
Cliquez ici
Léger Gras Léger

Après le click :
Le click a été savoureux !
Léger Gras Léger

mardi 31 juillet 2018 - 34/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript

Bien entendu, on peut écrire ceci :

pc.onclick = function(){
corps de la fonction anonyme
};

par exemple comme ceci :

pc.onclick = fadr // Notez absence de parenthèses.

fadr=function(){
corps de la fonction anonyme
};

ou comme ceci :

pc.onclick = fadr // Notez absence de parenthèses.

function fadr (){


corps de la fonction anonyme
};

Et au lieu de :

pc.onclick = fadr // Notez absence de parenthèses.

on peut écrire :

pc. addEventListener('click',fadr,false);

Au lieu d’adresse de fonction comme paramètre, on peut directement utiliser


une fonction anonyme s’exécutant sur place :

pc.addEventListener('click',function(){
this.innerHTML = 'Le click a été savoureux !';
...
this.style.fontWeight = '900';
});

mardi 31 juillet 2018 - 35/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
Passation de paramètres avec les différentes définitions de fonctions :

Toute fonction peut passer/recevoir des paramètres d’un des 7 types de


donnéeJS valides : n u m b e r (y compris le NaN), string , boolean (true ou
false), object , function , null (vide = « absence de / aucune » valeur) et
undefined . Mais JS affiche le « typeof null » comme étant un object (avec
petit « o ») au lieu de null (erreur de JS). De plus « undefined » = aucune
valeur affectée (néant), tandis que « null » = valeur affectée mais ne
représentant rien.

Attention donc à NaN, null et undefined.

Exemple :

var vnull = null; // Affectation d’une valeur ne représentant rien.


var vundefined; // Aucune valeur affectée même pas le null.

Undefinde :
Attention aux guillemets :

var z;
typeof z -> "undefined"
z==undefined -> true
z=="undefined" -> false
(typeof z)==undefined -> false
(typeof z)=="undefined" -> true
undefined -> undefined
undefined=="undefined" -> false
nonexist ->
Uncaught ReferenceError: nonexist is not defined at
<anonymous>:1:1

null :

var z;
typeof z -> "object"
z==undefined -> true
z=="undefined" -> false
(typeof z)==undefined -> false
(typeof z)=="undefined" -> false

mardi 31 juillet 2018 - 36/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
Contrairement aux langages C/C++, JS ne possède pas les types de données
enum, structure...., et même les objets en JS ne sont pas vraiment comme
les classes dans C/C++.

1. Définition classique de Fonction :

Avec le mot-clé function suivi du nom identifiant et de la liste de


paramètres formels entre parenthèses max 255d (0xFF)
paramètres/arguments, puis du bloc d’instruction de la fonction (corps de la
fonction) entouré d’accolades (curly braces).

function nom([param[, param[, ... param]]]) {


instructions;
}

Exemple :

<script type="text/javascript">
// Déclaration/définition de fonction
function fclassic(p1, p2, p3, p4, p5, p6, p7){
console.log(typeof p1,typeof p2,
typeof p3,typeof p4,typeof p5,
typeof p6,typeof p7,typeof p8)
}

// Appel de la fonction
fclassic(0/0,{PI:Math.PI},"Math.PI",
(function(){return 5==7})(),
window,[],String)
</script>

Le paramètre p7 (type = undefined) n’a reçu aucun argument.

Exécution :

N.B. :
Ne confondez pas « types de données » (minuscules) et « objets
standard » (Capitalisés) : Pour les instancier il faut utiliser l’opérateur new et
appeler leur constructeur comme une fonction, p. ex new Date().

mardi 31 juillet 2018 - 37/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript

2. Fonction anonyme_1 :

<script type="text/javascript">
// Déclaration/définition de fonction
fanonyme1=function(p1){
return p1.substr(4,6);
}

// Appel à la fonction
console.log(fanonyme1("Math.PI"));
</script>

Exécution :

.PI fano.html:9:2

Attention ici :

a) fanonyme1=function(p1){...} :fanonyme prend l’adresse pointée par


la fonction, soit-elle anonyme ou ordinaire.

b) v=fanonyme1("Math.PI") :v prend la valeur retournée par la fonction


anonyme dont fanonyme1 avait pris l’adresse.

3. Fonction anonyme_2 :

Fonction anonyme inline affectée à fano, appel sans les parenthèses :

<script type="text/javascript">
// Déclaration/définition de fonction
fano=(function(){
console.log(4 + 6 + " | 4 + 6 = "+ 4 + 6);
}
)();

// Appel à la fonction
fano();

mardi 31 juillet 2018 - 38/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
</script>

Exécution :

10 | 4 + 6 = 46 typeof.html:4:3

4. Fonction anonyme_3 :

Fonction anonyme inline affectée à v, appel avec les parenthèses :

<script type="text/javascript">
var cpt=cptr=0;
v=(function(p1,p2){
var x=0;
var f3=function(){
console.log("Ds f2(): p1= ++cptr="+p1+
" , ++cpt="+ ++cpt+" , x="+x++ +
" , p2="+p2.toLocaleString())
}
return f3;
})(++cptr,d());

for(k=0;k<2;k++) v("ignored1","ignored2");

function d(){return new Date()}


</script>

Exécution :

Ds f2(): p1= ++cptr=1 , ++cpt=1 , x=0 , p2=21/12/2017 à 12:41:49


Ds f2(): p1= ++cptr=1 , ++cpt=2 , x=1 , p2=21/12/2017 à 12:41:49

5. En général :

<script>
function go(){
document.write(arguments.length+" Arguments :<br>")

mardi 31 juillet 2018 - 39/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
for(k=0,l=arguments.length;k<l;k++)
document.write(arguments[k] + " | ")
document.write("<br>")
for(k in arguments) document.write(arguments[k] + " | ")
}
go("sérénité",new Date().toLocaleString(),
Math.LN2.toFixed(2),2017)
</script>

Exécution :

4 Arguments :
sérénité | 21/12/2017 à 01:02:59 | 0.69 | 2017 |
sérénité | 21/12/2017 à 01:02:59 | 0.69 | 2017 |

6. Polymorphisme de fonction dans JavaScript :

Il n’existe pas de polymorphisme (overloading) de fonction dansJS vs C++


(voir p. 2/26 du Tome II de la série «À la découverte du langage C++» : Tout
sur les Objets dans le Langage C, 1993, du même auteur). On gère cet état soi-
même en testant le type de l’argument passé :

<script
<script type="text/javascript">
polymorphisme=function(p1,p2){
if(typeof arguments[1]=="undefined"){
console.log(p1+".p2==undefined")
}
if(typeof arguments[1]=="string"){
console.log(p1+". p2==string")
}
if(typeof arguments[1]=="number"){
console.log(p1+". p2==number")
}
if(typeof arguments[1]=="null"){
console.log(p1+". p2==null")
}
if(typeof arguments[1]=="function"){
console.log(p1+". p2==function")
}
if(typeof arguments[1]=="boolean"){
console.log(p1+". p2==boolean")
}

mardi 31 juillet 2018 - 40/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
if(typeof arguments[1]=="object"){
console.log(p1+". p2==object")
}
}

var a=[],b='diasoluka',c="1953";

polymorphisme(1,"");
polymorphisme("1b","p2");
polymorphisme("1c",b);
polymorphisme("1d",c);
polymorphisme("1e",typeof Math);
polymorphisme(2,5);
polymorphisme("2b",eval("11"+"8"));
polymorphisme(3,{});
polymorphisme("3b",new String());
polymorphisme("3c",Math);
polymorphisme("3d",null);
polymorphisme(4);
polymorphisme("4b",undefined);
polymorphisme(5, 4!=4);
polymorphisme("5b",(function(){return true})());
polymorphisme(6,Boolean);
polymorphisme("6d",Function);
polymorphisme("6c",function(){});
</script>

Exécution :

1. p2==string ,1b. p2==string ,1c. p2==string ,1d. p2==string ,1e. p2==string


2. p2==number ,2b. p2==number
3. p2==object , 3b. p2==object , 3c. p2==object , 3d. p2==object
4.p2==undefined , 4b.p2==undefined
5. p2==boolean , 5b. p2==boolean
6. p2==function , 6d. p2==function , 6c. p2==function
7. p2==string

7. Passation d’arguments «par valeur» et «par référence» en JS :

Les modifications apportées à un arguments passé par valeur (by value) dans
la fonction appelée ne diffusent pas en dehors de la fonction.

mardi 31 juillet 2018 - 41/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
Les modifications apportées aux membres (attributs) d’un objet passé « par
valeur » à une fonction appelée se reflètent en dehors de la fonction appelée.
Le type object est donc un moyen de passer un argument par référence.

<script>
f=function(obj,j,m,a) {
obj.x *= 3; // devient 33 dans l’objet
obj.y += 10; // devient 18 dans l’objet
obj.z -= 10; // devient 1943 dans l’objet
j *= 3; // modifications locales
m += 10;
a -= 10;
}

var odummy = {
x: 0,
y: 1,
z: 2
};

// Paramètres initiales.
var j=j1=11, m=m1=8, a=a1=1953;
console.log("Valeurs initiales : "+
"j1="+j1+" m1="+m1+" a1="+a1);

// On les place dans un objet.


odummy.x=j; odummy.y=m; odummy.z=a;
// Appel de la fonction f()
// Passation de l'objet cô argument (par référence)
// Passation de j,m,a par valeur
f(odummy,j1,m1,a1);

// On récupères les valeurs modifiées


j=odummy.x; m=odummy.y; a=odummy.z;

console.log("Valeurs retournées : "+


"j="+j+" m="+m+" a="+a);
console.log("Valeurs retournées : "+
"j1="+j1+" m1="+m1+" a1="+a1);
</script>

Exécution :

Valeurs initiales : j1=11 m1=8 a1=1953

mardi 31 juillet 2018 - 42/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
Valeurs retournées : j=33 m=18 a=1943
Valeurs retournées : j1=11 m1=8 a1=1953

Fonctions imbriquées :

Le code ci-dessous exécute l’addition de la fonction la plus interne.

<script type="text/javascript">
function d_nais(jr){
return function (ms){
return function (an){
return an+ms+jr;
}
}
}
console.log(d_nais(30)(5)(10))
</script>

Exécution :

45

Que s’est-il passé ? Voyons-le « images » étape par étape.


Lisez bien les commentaires.

<script type="text/javascript">
function d_nais(jr){
return function mois(ms){
return function annee(an){
return jr+"/"+ms+"/"+an;
}
}
}
console.log(d_nais(30)(12)(2017))
</script>

Exécution :

30/12/2017

mardi 31 juillet 2018 - 43/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript

Un autre exemple :

<script type="text/javascript">
function d_nais(an){
console.log("=> Dans d_nais()")
return function mois(ms,hr){
console.log("=> Dans mois()")
return function jour(jr,mn,sc){
console.log("=> Dans jour()")
return ("=> "+new Date(an,ms-1,jr,hr,mn,sc)).toString();
}
}
}
console.log(d_nais) // Affiche d_nais();
console.log(d_nais()) // Exécute d_nais et affiche mois();

// Exécute jusqu'à mois et affiche jour()


console.log(d_nais()());

// Exécute jusqu'à jour


console.log(d_nais(1953)(11,15)(7,30,22));
</script>

Exécution :

function d_nais()
=> Dans d_nais()
function mois()
=> Dans d_nais()
=> Dans mois()
function jour()
=> Dans d_nais()
=> Dans mois()
=> Dans jour()
=> Sat Nov 07 1953 15:30:22 GMT+0100

Si c’est seulement pour obtenir l’affichage de la date, le plus important de ce


script c’est la dernière instruction (on désactive les autres instructions dans un
bloc de commentaire) :

<script type="text/javascript">
function d_nais(an){

mardi 31 juillet 2018 - 44/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
console.log("=> Dans d_nais()")
return function mois(ms,hr){
console.log("=> Dans mois()")
return function jour(jr,mn,sc){
console.log("=> Dans jour()")
return (
"=> "+new Date(an,ms-1,jr,hr,mn,sc)).toString();
}
}
}
/*
console.log(d_nais) // Affiche d_nais();
console.log(d_nais()) // Exécute d_nais et affiche mois();
console.log(d_nais()());
*/

console.log(d_nais(1953)(11,15)(7,30,22));
</script>

Ce qui est important dans le code ci-dessus, c’est le mode d’appel avec autant
de parenthèses à partir de la fonction externe pour accéder à chaque niveau
d’imbrication.

Une autre façon d’obtenir exactement la mêm chose :

<script type="text/javascript">
function d_nais(an){
console.log("=> Dans d_nais()")
return function mois(ms,hr){
console.log("=> Dans mois()")
return function jour(jr,mn,sc){
console.log("=> Dans jour()")
return ("=> "+
new Date(an,ms-1,jr,hr,mn,sc)).toString();
}
}
}

// retourne adresse de mois()


v=d_nais(1953);

// appelle mois() qui retourne adresse de jour()


v=v(11,15)

mardi 31 juillet 2018 - 45/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
// appelle jour() qui retourne le résultat
v=v(7,30,22)
console.log(v)
</script>

Exécution :

=> Dans d_nais()


=> Dans mois()
=> Dans jour()
=> Sat Nov 07 1953 15:30:22 GMT+0100

On peut faire s’enchaîner des fonctions plus internes :

<script type="text/javascript">
function d_nais(an){
console.log("=> Dans d_nais()")
return function mois(ms,hr){
console.log("=> Dans mois()")
return function jour(jr,mn,sc){
console.log("=> Dans jour()")
return ("=> "+
new Date(an,ms-1,jr,hr,mn,sc)).toString();
}
}
}

// retourne adresse de mois()


v=d_nais(1953);

// On peut enchaîner des fonctions plus internes


// appelle mois() puis jour() qui retourne le résultat
v=v(11,15)(7,30,22)

// appelle jour() qui retourne le résultat


// v=v(7,30,22)
console.log(v)
</script>

Même Exécution :

=> Dans d_nais()


=> Dans mois()
mardi 31 juillet 2018 - 46/49 - 23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
=> Dans jour()
=> Sat Nov 07 1953 15:30:22 GMT+0100

Kinshasa, le Tuesday 22 January 2019 (17:14:05 a1/p1).

Mots-clés :
fonctions,curry,currying,redéfinition,fonction
fermeture,closure,paramètre du reste,blocs de
code,réutilisables,fonctions nommées,fonctions
anonymes,expressions de fonctions immédiatement
invoquées,eventHandler,affecter,variable,pointeur,script,types
de fonction,syntaxes de fonction.

Mercredi, 11. avril 2018 (23:34 [pm]).


Dernière mise à jour : Tuesday 22 January 2019 (17:14:05 a1/p1).

DIASOLUKA Nz. Luyalu


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

Chercheur indépendant, autonome et autofinancé, bénévole,


sans aucun conflit ou lien d’intérêt 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 - 995624714 - 902263541 - 813572818

diasfb@mail2world.com

mardi 31 juillet 2018 - 47/49 - 23:12:45 [PM]


Petite Introduction Aux Fonctions JavaScript
Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-
La-Creation

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
• https://www.scribd.com/document/315746265/Classification-Des-
Medicaments
• https://www.scribd.com/document/315745909/Incongruences-Heresies-et-
Heterodoxies-de-la-Notion-de-Laboratoire
mardi 31 juillet 2018 - 48/49 - 23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
• https://www.scribd.com/document/315745725/Rapport-Entre-Oxymetrie-Et-
Type-Respiration

mardi 31 juillet 2018 - 49/49 - 23:12:45 [PM]