files/fr/glossaire/fonction/index.html


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

---
title: Fonction
slug: Glossaire/Fonction
tags:
  - Encodage
  - Fonctions
  - Glossaire
  - IIFE
  - Introduction
  - JavaScript
translation_of: Glossary/Function
---
<p>Une <strong>fonction</strong> est une portion de code qui peut être appelée par d'autres codes ou par elle-même ou par une {{Glossary("Variable","variable")}} qui se réfère à la fonction. Lorsqu'une fonction est appelée, des {{Glossary("Argument","arguments")}} lui sont généralement donnés en entrée. La fonction peut également retourner une valeur de sortie. En {{glossary("JavaScript")}}, une fonction est aussi un {{glossary("Object","objet")}}.</p>

<p>Un nom de fonction est un {{Glossary("identifier","identifiant")}} déclaré dans le cadre d'une déclaration de fonction ou de l'expression d'une fonction. Le fait que le nom de fonction soit déclaré ou exprimé impacte la {{Glossary("Scope","portée")}} du nom de fonction.</p>

<h3 id="Différents_types_de_fonctions">Différents types de fonctions</h3>

<p>Une <strong>fonction anonyme</strong> est une fonction sans nom de fonction :</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
<span class="comment token">// ou en utilisant la notation de flèche de ECMAScript 2015</span>
<span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>

<p>Une <strong>fonction nommée</strong> est une fonction avec un nom de fonction :</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
<span class="comment token">// ou en utilisant la notation de flèche de ECMAScript 2015</span>
<span class="keyword token">const</span> foo <span class="operator token">=</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>

<p>Une <strong>fonction imbriquée (ou fonction interne)</strong> est une fonction à l'intérieur d'une autre fonction (<em><code>square</code></em> dans l'exemple suivant). Une <strong>fonction externe</strong> est une fonction qui contient une fonction (<em><code>addSquares</code></em> dans l'exemple suivant) :</p>

<dl>
</dl>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">addSquares</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span>b<span class="punctuation token">)</span> <span class="punctuation token">{</span>
   <span class="keyword token">function</span> <span class="function token">square</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
      <span class="keyword token">return</span> x <span class="operator token">*</span> x<span class="punctuation token">;</span>
   <span class="punctuation token">}</span>
   <span class="keyword token">return</span> <span class="function token">square</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="function token">square</span><span class="punctuation token">(</span>b<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span>
<span class="comment token">//En utilisant la notation de flèche de ECMAScript 2015</span>
<span class="keyword token">const</span> addSquares <span class="operator token">=</span> <span class="punctuation token">(</span>a<span class="punctuation token">,</span>b<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
   <span class="keyword token">const</span> square <span class="operator token">=</span> x <span class="operator token">=</span><span class="operator token">&gt;</span> x<span class="operator token">*</span>x<span class="punctuation token">;</span>
   <span class="keyword token">return</span> <span class="function token">square</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="function token">square</span><span class="punctuation token">(</span>b<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>

<p>Une <strong>fonction récursive</strong> est une fonction qui fait appel à elle-même. Voir {{Glossary("Recursion","récursion")}}.</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">loop</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
   <span class="keyword token">if</span> <span class="punctuation token">(</span>x <span class="operator token">&gt;=</span> <span class="number token">10</span><span class="punctuation token">)</span>
      <span class="keyword token">return</span><span class="punctuation token">;</span>
   <span class="function token">loop</span><span class="punctuation token">(</span>x <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span>
<span class="comment token">//En utilisant la notation de flèche de ECMAScript 2015</span>
<span class="keyword token">const</span> loop <span class="operator token">=</span> x <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
   <span class="keyword token">if</span> <span class="punctuation token">(</span>x <span class="operator token">&gt;=</span> <span class="number token">10</span><span class="punctuation token">)</span>
      <span class="keyword token">return</span><span class="punctuation token">;</span>
   <span class="function token">loop</span><span class="punctuation token">(</span>x <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>

<p><span id="result_box" lang="fr"><span>Une <strong>expression de fonction invoquée immédiatement</strong> (IIFE) est une fonction appelée directement après le chargement de la fonction dans le compilateur du navigateur.</span> <span>La façon d'identifier une IIFE est de localiser les parenthèses gauche et droite supplémentaires à la fin de la déclaration de la fonction.</span></span></p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Erreur (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)</span>
<span class="comment token">/*
function foo() {
    console.log('Hello Foo');
}();
*/</span>

<span class="punctuation token">(</span><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello Foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="punctuation token">(</span><span class="keyword token">function</span> <span class="function token">food</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello Food"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p><span id="result_box" lang="fr"><span>Si vous souhaitez en savoir plus sur les IIFE, consultez la page suivante sur Wikipedia : <a href="https://fr.wikipedia.org/wiki/JavaScript#Expressions_de_fonctions_imm%C3%A9diatement_invoqu%C3%A9es">Expression de la fonction immédiatement invoquée</a></span></span></p>

<h2 id="En_apprendre_plus">En apprendre plus</h2>

<h3 id="Informations_Techniques">Informations Techniques</h3>

<ul>
 <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Fonctions" title="en-US/docs/Web/JavaScript/Guide/Functions">Les Fonctions</a> en JavaScript sur MDN</li>
 <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Fonctions fléchées</a></li>
</ul>