Vous êtes sur la page 1sur 17

Petite Introduction Aux

Fonctions JavaScript
ECMASCRIPT définit une fonction comme ceci :
« member of the Object type that may be invoked as a subroutine »

Les fonctions sont des « blocs de code » réutilisables qu’on peut


appeler n’importe quand et de n’importe où dans un programme.

Il existe des fonctions nommées qu’on peut appeler de n’importe


où, et des fonctions anonymes qu’on peut exécuter (invoquer)
juste à la fin de leur définition (expressions de fonctions immédiate-
ment invoquées) ou utiliser comme event Handler ou qu’on peut af-
fecter à une variable (soit la valeur qu’elle retourne, soit son
adresse = pointeur).

Le petit script ci-dessous illustre différents types et syntaxes de


fonctions.

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


// Fonction inapellable
void function qcq(p){
console.log(p);
}
// qcq("Cette fonction est inappelable.");
//
// Avec YANDEX :
// test.html:6 Uncaught ReferenceError: qcq is
// not defined at test.html:6
//
// Avec FIREFOX :
Petite Introduction Aux Fonctions JavaScript
// ReferenceError: qcq is not defined
// test.html:6:4

// Syntaxe ordinaire d'une fonction


function f0(v=1){console.log(Math.tan(v))};
f0(); // 1.5574077246549023

/******************************/

let f1 = (function() {return Math.tan(1)} )();


//
// f1 reçoit ici la VALEUR DE RETOUR de la
// fonction anonyme, car cette fonction anonyme
// est immédiatement exécutée (invoquée) à cause des
// parenthèses qui terminent sa déclaration/définition.
// Mais ici les parenthèses entourant la
// définition/déclaration de la fonction anonyme
// ne sont pas indispensables car affectation.

console.log(f1); // 1.5574077246549023

// console.log(f1());
//
// TypeError: f1 is not a function

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

/******************************/

let f1 = (function(p) {return Math.tan(p)} )(1);


//
// f1 reçoit ici la VALEUR DE RETOUR de la
// fonction anonyme, car cette fonction anonyme
// est immédiatement exécutée (invoquée) à cause des
// parenthèses qui terminent sa déclaration/définition.
// Mais ici les parenthèses entourant la
// définition/déclaration de la fonction anonyme
// ne sont pas indispensables car affectation.

console.log(f1); // 1.5574077246549023

// console.log(f1());
//
// TypeError: f1 is not a function

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

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


Petite Introduction Aux Fonctions JavaScript
/******************************/

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


let f1 = (function(p=1) {return Math.tan(p)} )();
//
// f1 reçoit ici la VALEUR DE RETOUR de la
// fonction anonyme, car cette fonction anonyme
// est immédiatement exécutée (invoquée) à cause des
// parenthèses qui terminent sa déclaration/définition.
// Mais ici les parenthèses entourant la
// définition/déclaration de la fonction anonyme
// ne sont pas indispensables car affectation.

console.log(f1); // 1.5574077246549023

// console.log(f1());
//
// TypeError: f1 is not a function

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

/******************************/

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


const c=1;
let f1 = (function() {return Math.tan(c)} )(c);
//
// f1 reçoit ici la VALEUR DE RETOUR de la
// fonction anonyme, car cette fonction anonyme
// est immédiatement exécutée (invoquée) à cause des
// parenthèses qui terminent sa déclaration/définition.
// Mais ici les parenthèses entourant la
// définition/déclaration de la fonction anonyme
// ne sont pas indispensables car affectation.

console.log(f1); // 1.5574077246549023

// console.log(f1());
//
// TypeError: f1 is not a function

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

/******************************/

let f2 = function() {return Math.tan(v)} (v=1);


//
// f2 reçoit ici la valeur de retour de
// la fonction anonyme.

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


Petite Introduction Aux Fonctions JavaScript

console.log(f2); // 1.5574077246549023

/******************************/

let f3 = function(v=1) {return Math.tan(v)};


console.log(f3()); // 1.5574077246549023

let f4 = function(v=123) {console.log(Math.tan(v))};


f4(Math.log(Math.E)); // 1.5574077246549023

/*****************************/

// function(){console.log(Math.tan(1)}();
//
// Ici les parenthèses autour de la fonction
// sont obligatoires.
// SyntaxError: function statement requires a name

// Mais on peut immédiatement invoquer la fonction


// anonyme en la faisant précéder d'un opérateur,
// ou bien entendu, l'entourer de parenthèses.

+function(){console.log(Math.tan(1))}();
// 1.5574077246549023

!function(){console.log(Math.tan(1))}();
// 1.5574077246549023

-function(){console.log(Math.tan(1))}();
// 1.5574077246549023

~function(){console.log(Math.tan(1))}();
// 1.5574077246549023

`${function(){console.log(Math.tan(1))}()}`;
// 1.5574077246549023

+(_=>console.log(Math.tan(1)))();
// 1.5574077246549023

~((v=1) => console.log(Math.tan(v)))();


// 1.5574077246549023

(function(){console.log(Math.tan(1))}());
// 1.5574077246549023
//
// Ici les parenthèses autour de la fonction
// sont obligatoires.
// SyntaxError: function statement requires a name

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


Petite Introduction Aux Fonctions JavaScript

(function(){console.log(Math.tan(1))})();
// 1.5574077246549023
//
// Ici les parenthèses autour de la fonction
// sont obligatoires.
// SyntaxError: function statement requires a name

/*****************************/

let f5=function(){console.log(Math.tan(1))};
//
// Ici, il s'agit aussi d'une fonction anonyme
// On ne peut pas l'appeler par son nom.
// Mais la vaviable f3 reçoit (pointe) L'ADRESSE
// de la fonction anonyme qui n'est pas
// immédiatement invoquée.
// On peut donc appeler la fonction anonyme
// indirectement via son adresse stockée dans
// la variable f3

f5(); // 1.5574077246549023

let f6=_=>console.log(Math.tan(1));
f6()

/*****************************/

// LE PARAMÈTRE DU RESTE

let f7 = function(p1,p2,...p3) {
console.log(p1,p2,p3);
}

f7("dias",2018,"puis,",["paramètre","du"],{p:"reste"})
// dias 2018 Array [ "puis,", […], {…} ]
// dias 2018 […]
// 0: "puis,"
// 1: Array [ "paramètre", "du" ]
// 2: Object { p: "reste" }
// length: 3
// __proto__: Array []

/*****************************/

function ext(rayon){
let vLocExt=Math.PI;
vLocExt*=10;
const c=rayon

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


Petite Introduction Aux Fonctions JavaScript
const ds="Dans ext, "

// fonction fermeture (closure)


const fClosure=function(intro){
return ds+intro+" "+vLocExt*Math.pow(c,2)
}

return ["avec",fClosure]
}

// CURRYING

const cv=ext(3);

let cr
cr=cv[1](cv[0])
console.log("Surf=",cr)
// Surf= Dans ext, avec 282.7433388230814

console.log(Math.PI*10*3*3)
// 282.74333882308133
</script>

Rappel : le caractère ` est le code ASCII 096, obtensible avec <ALT-096> ou


<ALT-7><Barre Espace> ou <CTRL-ALT-7><Barre Espace> dans certains logiciels
(dans ces logiciels un double <CTRL-ALT-7><Barre Espace> produit un double `
=> ``).

Revenons-en aux fonctions « void ». Contrairement au langage C, en JavaScript on


ne type normalement pas une fonction, à part pour le type « void ».

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


// Fonction inapellable
Number (function (p){
console.log(p);
})(5);
// Avec FIREFOX :
// TypeError: Number(...) is not a function
// test.html:3:6
//
// Avec YANDEX :
// test.html:5
// Uncaught TypeError: Number(...) is
// not a function at test.html:5

Number function (p){


console.log(p);

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


Petite Introduction Aux Fonctions JavaScript
};
// Avec FIREFOX :
// SyntaxError: unexpected token:
// keyword 'function' test.html:16:12
//
// Avec YANDEX :
// test.html:15 Uncaught SyntaxError:
// Unexpected token function
</script>

Le type void (= « vide » en français ou « vazia » en portugais) permet exception-


nellement de typer une fonction non destinée à être appelée (¿).

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


// Fonction inapellable
void function qcq (p){
console.log(p);
}

qcq("Inappelable");
// Avec FIREFOX :
// ReferenceError: qcq is not defined test.html:7:3
//
// Avec YANDEX :
// test.html:7 Uncaught ReferenceError:
// qcq is not defined at test.html:7
</script>

La grande utilité des fonctions « void » c’est dans la gestion des événements, par
exemple quand on veut désactiver l’action par défaut du clic d’un lien hypertexte.
On remplace la cible du lien par une « fonction void » avec obligatoirement une
valeur « 0 » (zéro) comme argument, et on redéfinit une nouvelle action pour le
clic ou éventuellement on peut définir de nouveaux « EventListners / EventHan-
dlers ». Mais dans notre exemple-ci, le « double-click » est incompatible avec le
click, chaque « DOUBLE-CLICK » est accompagné d’un double click (deux clicks).

<body> console.log(
<a href="javascript:void(0);" "Nouveau « clickHandler »");
id="aid";
ondblclick="alert('OK!')" document.getElementById('aid').
> addEventListener('click', fChange,
Double Cliquez ici. false);
</a> </script>
</body>

<script>
const fChange = _ =>

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


Petite Introduction Aux Fonctions JavaScript

Voici les propriétés et méthodes des EventsXxxxx , plus facile à obtenir dans la
console de FIREFOX que celle de YANDEX :

Avec FIREFOX :

Window
<default properties>
<prototype>: WindowPrototype
constructor: ()
length: 0
name: "Window"
prototype: WindowPrototype { … }
Symbol(Symbol.hasInstance): function Symbol.hasInstance()
<prototype>: ()

<prototype>: WindowProperties { }
<prototype>: EventTargetPrototype
addEventListener: function addEventListener()
constructor: function ()
dispatchEvent: function dispatchEvent()
removeEventListener: function removeEventListener()
<prototype>: Object { … }

Avec YANDEX :

window
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

1. __proto__: Window
1. PERSISTENT: 1
2. TEMPORARY: 0

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


Petite Introduction Aux Fonctions JavaScript
3. constructor: ƒ Window()
4. Symbol(Symbol.toStringTag): "Window"
5. __proto__: WindowProperties
1. constructor: ƒ WindowProperties()
2. Symbol(Symbol.toStringTag): "WindowProperties"
3. __proto__: EventTarget
1. addEventListener: ƒ addEventListener()
2. dispatchEvent: ƒ dispatchEvent()
3. removeEventListener: ƒ removeEventListener()
4. constructor: ƒ EventTarget()
5. Symbol(Symbol.toStringTag): "EventTarget"
6. __proto__: Object

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


Petite Introduction Aux Fonctions JavaScript
Redéfinition de fonction :

En JavaScript aussi bien en mode standard qu'en mode strict, une fonction peut
être redéfinie, pouvant engendrer de graves erreurs de temps d'exécution (omis-
sions d'exécution) pouvant passer inaperçues, avec les contraintes suivantes:

1. Une DÉFINITION de fonction et APPEL de fonction.

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


function factor(n){
if(n==1)return 1
else return n*factor(n-1)
}

console.log(factor(10))
// 3628800
</script>

2. La dernière fonction redéfinie prend normalement effet à l'endroit de la redé-


finition jusqu'à la fin de l'exécution du programme ou une nouvelle redéfini-
tion, écrasant ou se substituant à toute définition antérieure.

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


function factor(n){
console.dir("Ceci ne calcule pas la factorielle")
}

function factor(n){
if(n==1)return 1
else return n*factor(n-1)
}
mardi 31 juillet 2018 - 10/17 - 23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript

console.dir(factor(20))
// 2432902008176640000
</script>

3. Une définition de fonction reste active tant qu'une autre fonction portant le
même nom n'a pas encore été redéfinie dans le code source DANS UN AUTRE
BLOC DE SCRIPT.

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


function factor(n){
console.dir("Ceci ne calcule pas la factorielle")
}

factor(6)
// Ceci ne calcule pas la factorielle
</script>

<script>
console.log("REDÉFINITION DANS UN AUTRE BLOC DE SCRIPT")
</script>

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


function factor(n){
if(n==1)return 1
else return n*factor(n-1)
}

console.dir(factor(21))
// 51090942171709440000
</script>

Exécution :

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


Petite Introduction Aux Fonctions JavaScript

Ceci ne calcule pas la factorielle test.html:3:1


REDÉFINITION DANS UN AUTRE BLOC DE SCRIPT test.html:11:1
51090942171709440000 test.html:20:1

4. Si la redéfinition de fonction se fait dans UN MÊME BLOC DE SCRIPT c'est la


dernière définition de la fonction ayant le même nom qui sera active (qui exé-
cutera) et avant cette dernière redéfinition la première définition ne sera même
pas appelée.

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


function factor(n){
console.dir("Ceci ne calcule pas la factorielle")
}

factor(6) // N'appelle même pas !


// Notez aussi que toutes les [re]définitions sont
// dans un même élément SCRIPT.

console.log("REDÉFINITION DANS UN AUTRE BLOC DE SCRIPT")

function factor(n){
if(n==1)return 1
else return n*factor(n-1)
}

console.dir(factor(170))
// 7.257415615307994e+306
</script>

Exécution :

REDÉFINITION DANS UN AUTRE BLOC DE SCRIPT test.html:10:1

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


Petite Introduction Aux Fonctions JavaScript
7.257415615307994e+306 test.html:17:1

5. Remarquez ci-dessous que sans la redéfinition, la première définition est bel et


bien appelée.

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


function factor(n){
console.dir("Ceci ne calcule pas la factorielle")
}

factor(150)
// Ceci ne calcule pas la factorielle test.html:3:3

console.log("REDÉFINITION DANS UN MÊME BLOC DE SCRIPT")


// REDÉFINITION DANS UN MÊME BLOC DE SCRIPT test.html:10:1

/*
function factor(n){
if(n==1)return 1
else return n*factor(n-1)
}
*/

console.dir(factor(100))
// Ceci ne calcule pas la factorielle test.html:3:3
// undefined test.html:20:1
</script>

Exécution :

Ceci ne calcule pas la factorielle test.html:3:3


REDÉFINITION DANS UN MÊME BLOC DE SCRIPT test.html:10:1

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


Petite Introduction Aux Fonctions JavaScript
Ceci ne calcule pas la factorielle test.html:3:3
undefined test.html:20:1

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


Petite Introduction Aux Fonctions JavaScript
LES FONCTIONS CALLBACK :

Ce sont des fonctions ordinaires qui sont rappelées / invoquées en principe auto-
matiquement, pour chaque élément d’une collection itérable, avec certaines mé-
thodes et souvent avec un paramètre factice.

Mais par extension toute fonction passée en argument à une autre fonction et
étant la dernière instruction dans le corps de cette fonction appelée est aussi une
fonction CALLBACK.

Nous en avons parlé dans les volumes : Promises, Arrays, Itérations…

Aves les Arrays quelques méthodes qui invoquent automatiquement un CALL-


BACK sont :

1. every(fn(val, index, @), that),


2. some(fn(val, index, @), that),
3. forEach(fn(val, index, @), that)
4. map(fn(val, index, @), that)
5. filter(fn(val, index, @), that)
6. reduce(fn(memo, val, index, @), memo?)
7. reduceRight(fn(memo, val, index, @), memo?)…

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


Petite Introduction Aux Fonctions JavaScript

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

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


Dernière mise à jour : samedi 8 décembre 2018 (7:40:36 PM).

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

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-
mardi 31 juillet 2018 - 16/17 - 23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
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
• https://www.scribd.com/document/315745725/Rapport-Entre-Oxymetrie-Et-
Type-Respiration

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