1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
|
---
title: Fonctions — des blocs de code réutilisables
slug: Learn/JavaScript/Building_blocks/Functions
translation_of: Learn/JavaScript/Building_blocks/Functions
original_slug: Apprendre/JavaScript/Building_blocks/Fonctions
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
<p>Les <strong>fonctions</strong> sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.</p>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Prerequis:</th>
<td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td>
</tr>
<tr>
<th scope="row">Objectif:</th>
<td>Comprendre les concepts fondamentaux des fonctions JavaScript.</td>
</tr>
</tbody>
</table>
<h2 id="Où_trouve-ton_des_fonctions">Où trouve-t'on des fonctions ?</h2>
<p>En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.</p>
<p>Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — <code>()</code> — et que vous n'utilisez <strong>pas</strong> une structure usuelle et intégrée du langage telle que les boucles <a href="/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a>, <a href="/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while </a>ou<a href="/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while"> do...while </a>, ou une déclaration <a href="/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else </a>, vous utilisez une fonction.</p>
<h2 id="Les_fonctions_intégrées_du_navigateur">Les fonctions intégrées du navigateur</h2>
<p>Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères :</p>
<pre class="brush: js">var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);
// La fonction replace () sélectionne une chaîne,
// remplace une sous-chaîne par une autre, et renvoie
// la nouvelle chaîne avec les modifications effectuées.</pre>
<p>Ou à chaque fois que nous avons manipulé un tableau :</p>
<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
var madeAString = myArray.join(' ');
console.log(madeAString);
// La fonction join() sélectionne un tableau, rassemble
// tous les éléments du tableau dans une chaîne,
// et renvoie cette nouvelle chaîne.</pre>
<p>Ou à chaque fois que nous avons généré un nombre aléatoire :</p>
<pre class="brush: js">var myNumber = Math.random();
// la fonction random() génère un nombre aléatoire
// entre 0 et 1, et renvoie
// ce nombre</pre>
<p>... nous avons utilisé une fonction !</p>
<div class="note">
<p><strong>Note :</strong> N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.</p>
</div>
<p>Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand<strong> invoquez</strong> (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.</p>
<p>Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette <a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">section antérieure de notre cours</a> pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.</p>
<h2 id="Fonctions_versus_méthodes">Fonctions versus méthodes</h2>
<p>Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des <strong>méthodes</strong>. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage.</p>
<p>La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle <strong>propriétés</strong>) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.</p>
<p>Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web. </p>
<h2 id="Fonctions_personnalisées">Fonctions personnalisées</h2>
<p>Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html </a>tiré de l'article <a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">les boucles dans le code </a>(voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">code source </a>complet), nous avons inclus une fonction personnalisée <code>draw()</code>qui ressemblait à ça :</p>
<pre class="brush: js">function draw() {
ctx.clearRect(0,0,WIDTH,HEIGHT);
for (var i = 0; i < 100; i++) {
ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();
}
}</pre>
<p>Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :</p>
<pre class="brush: js">draw();</pre>
<p>au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction <code>random()</code> trois fois, comme définie par le code suivant :</p>
<pre class="brush: js">function random(number) {
return Math.floor(Math.random()*number);
}</pre>
<p>Nous avions besoin de cette fonction car la fonction intégrée du navigateur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.</p>
<h2 id="Invoquer_des_fonctions">Invoquer des fonctions</h2>
<p>Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.</p>
<pre class="brush: js">function myFunction() {
alert('hello');
}
myFunction()
// appelle la fonction une fois</pre>
<h2 id="Fonctions_anonymes">Fonctions anonymes</h2>
<p>Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci :</p>
<pre class="brush: js">function myFunction() {
alert('hello');
}</pre>
<p>Mais vous pouvez également créer une fonction qui n'a pas de nom :</p>
<pre class="brush: js">function() {
alert('hello');
}</pre>
<p>Ceci est une <strong>fonction anonyme </strong>— elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :</p>
<pre class="brush: js">var myButton = document.querySelector('button');
myButton.onclick = function() {
alert('hello');
}</pre>
<p>Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant.</p>
<p>Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :</p>
<pre class="brush: js">var myGreeting = function() {
alert('hello');
}</pre>
<p>Cette fonction peut désormais être invoquée en utilisant :</p>
<pre class="brush: js">myGreeting();</pre>
<p>Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple :</p>
<pre class="brush: js">var anotherGreeting = function() {
alert('hello');
}</pre>
<p>Cette fonction peut désormais être invoquée en utilisant au choix :</p>
<pre class="brush: js">myGreeting();
anotherGreeting();</pre>
<p>Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme :</p>
<pre class="brush: js">function myGreeting() {
alert('hello');
}</pre>
<p>Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça :</p>
<pre class="brush: js">myButton.onclick = function() {
alert('hello');
// Je peux mettre ici autant
// de code que je le souhaite
}</pre>
<h2 id="Paramètres_des_fonctions">Paramètres des fonctions</h2>
<p>Certaines fonctions nécessitent que l'on définisse des <strong>paramètres</strong> lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.</p>
<div class="note">
<p><strong>Note :</strong> Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.</p>
</div>
<p>Par exemple, la fonction intégrée du navigateur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : </p>
<pre class="brush: js">var myNumber = Math.random();</pre>
<p>La fonction de chaîne intégrée du navigateur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :</p>
<pre class="brush: js">var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');</pre>
<div class="note">
<p><strong>Note :</strong> Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.</p>
</div>
<p>Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> a des paramètres optionnels :</p>
<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
var madeAString = myArray.join(' ');
// renvoie 'I love chocolate frogs'
var madeAString = myArray.join();
// renvoie 'I,love,chocolate,frogs'</pre>
<p>Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.</p>
<h2 id="La_portée_des_fonctions_et_les_conflits.">La portée des fonctions et les conflits.</h2>
<p>Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre <strong>portée</strong>, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.</p>
<p>Le plus haut niveau en dehors de toutes vos fonctions est appelé la <strong>portée globale</strong>. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.</p>
<p>Le JavaScript est construit de cette façon pour plusieurs raisons — mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.</p>
<p>Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :</p>
<pre class="brush: html"><!-- Excerpt from my HTML -->
<script src="first.js"></script>
<script src="second.js"></script>
<script>
greeting();
</script></pre>
<pre class="brush: js">// first.js
var name = 'Chris';
function greeting() {
alert('Hello ' + name + ': welcome to our company.');
}</pre>
<pre class="brush: js">// second.js
var name = 'Zaptec';
function greeting() {
alert('Our company is called ' + name + '.');
}</pre>
<p>Les deux fonctions que vous voulez appeler s'appellent <code>greeting()</code>, mais vous ne pouvez accéder qu'à la fonction <code>greeting()</code> du second fichier <code>second.js</code> — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier <code>first.js</code>.</p>
<div class="note">
<p><strong>Note :</strong> Vous pouvez voir cet exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">s'exécuter sur GitHub</a> (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">code source</a>).</p>
</div>
<p>En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.</p>
<p>C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !</p>
<p><img alt="" src="MDN-mozilla-zoo.png"></p>
<p>Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.</p>
<h3 id="Apprentissage_actif_Jouer_avec_la_portée">Apprentissage actif : Jouer avec la portée</h3>
<p>Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.</p>
<ol>
<li>Tout d'abord, faisons un copie locale de notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Celui-ci contient deux fonctions appelées <code>a()</code> et <code>b()</code>, et trois variables — <code>x</code>, <code>y</code>, and <code>z</code> — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée <code>output()</code>, qui prend un seul paramètre et le renvoie dans un paragraphe de la page.</li>
<li>Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.</li>
<li>Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante :
<pre class="brush: js">output(x);</pre>
Vous devriez voir la valeur de la variable <code>x</code> renvoyée à l'écran.</li>
<li>Maintenant essayez d'entrer les commandes suivantes :
<pre class="brush: js">output(y);
output(z);</pre>
<p>Toutes les deux devraient vous renvoyer un message d'erreur du type : "<a href="/fr/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Pourquoi ? À cause de la portée de la fonction — <code>y</code> and <code>z</code> sont enfermées dans les fonctions <code>a()</code> et <code>b()</code>, donc <code>output()</code> ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.</p>
</li>
<li>
<p>Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer <code>a()</code> et <code>b()</code> pour qu'elles aient la forme suivante :</p>
<pre class="brush: js">function a() {
var y = 2;
output(y);
}
function b() {
var z = 3;
output(z);
}</pre>
Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions <code>a()</code> et <code>b()</code> depuis la console JavaScript :
<pre class="brush: js">a();
b();</pre>
Vous devriez voir les valeurs <code>y</code> and <code>z</code> renvoyées sur la page. Cela fonctionne très bien car la fonction <code>output()</code> est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction <code>output()</code> est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.</li>
<li>Maintenant essayer de mettre à jour le code comme ceci :
<pre class="brush: js">function a() {
var y = 2;
output(x);
}
function b() {
var z = 3;
output(x);
}</pre>
Sauvegardez et rechargez à nouveau dans la console JavaScript :</li>
<li>
<pre class="brush: js">a();
b();</pre>
Les deux fonctions <code>a()</code> et <code>b()</code> appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction <code>output()</code> n'est pas dans la même portée que celle dans laquelle <code>x</code> est définie, <code>x</code> est une variable globale et donc elle est disponible dans n'importe quelle partie du code.</li>
<li>Pour finir, essayez de mettre à jour le code comme ceci :
<pre class="brush: js">function a() {
var y = 2;
output(z);
}
function b() {
var z = 3;
output(y);
}</pre>
</li>
<li>Sauvegardez et rechargez à nouveau dans la console JavaScript :
<pre class="brush: js">a();
b();</pre>
Cette fois l'appel de <code>a()</code> et <code>b()</code> renverra l'erreur "<a href="/fr/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" — parce que l'appel de la fonction <code>output()</code> et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.</li>
</ol>
<div class="note">
<p><strong>Note :</strong> Ces règles de portée ne s'appliquent pas aux boucles (ex. <code>for() { ... }</code>) ni aux instructions conditionnelles (ex. <code>if() { ... }</code>) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.</p>
</div>
<div class="note">
<p><strong>Note :</strong> Le message d'erreur <a href="/fr/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.</p>
</div>
<h3 id="Des_fonctions_à_lintérieur_de_fonctions">Des fonctions à l'intérieur de fonctions</h3>
<p>Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :</p>
<pre class="brush: js">function myBigFunction() {
var myValue;
subFunction1();
subFunction2();
subFunction3();
}
function subFunction1() {
console.log(myValue);
}
function subFunction2() {
console.log(myValue);
}
function subFunction3() {
console.log(myValue);
}
</pre>
<p>Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur <code>ReferenceError: myValue is not defined</code>, car bien que la valeur <code>myValue</code> est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :</p>
<pre class="brush: js">function myBigFunction() {
var myValue = 1;
subFunction1(myValue);
subFunction2(myValue);
subFunction3(myValue);
}
function subFunction1(value) {
console.log(value);
}
function subFunction2(value) {
console.log(value);
}
function subFunction3(value) {
console.log(value);
}</pre>
<h2 id="Conclusion">Conclusion</h2>
<p>Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> — aborde certaines fonctionnalités avancées non incluses ici.</li>
<li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeur par défaut des arguments</a>, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Fonctions fléchées</a> — références avancées</li>
</ul>
<ul>
</ul>
<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
<h2 id="Dans_ce_module">Dans ce module</h2>
<ul>
<li><a href="/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li>
<li><a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
<li><a href="/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li>
<li><a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a></li>
<li><a href="/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li>
<li><a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux évènements</a></li>
<li><a href="/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
</ul>
|