diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts
index 063804a..678e061 100644
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@@ -123,6 +123,10 @@ export const navigation: NavigationSection[] = [
{ title: "Syntaxe", href: "/docs/javascript/syntaxe" },
{ title: "Instructions", href: "/docs/javascript/instructions" },
{ title: "Types de données", href: "/docs/javascript/types" },
+ {
+ title: "Fonctions et portée",
+ href: "/docs/javascript/fonctions-et-portee",
+ },
],
},
{
diff --git a/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx b/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
new file mode 100644
index 0000000..5848e10
--- /dev/null
+++ b/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
@@ -0,0 +1,117 @@
+---
+title: Les fonctions et la portée
+description: Découvrons ensemble les fonctions et la portée en JavaScript
+tags: []
+---
+
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Il est maintenant temps de s'attaquer à du sérieux, j'ai nommé : les **fonctions** et la **portée** en JavaScript.
+
+## Les fonctions
+
+Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles permettent d'organiser le code, de le rendre plus lisible et de réduire la duplication.
+Elles peuvent prendre des **paramètres en entrée** et **retourner une valeur en sortie**.
+
+On l'avait déjà vu dans l'article sur la syntaxe, mais il est important de le rappeler :
+
+- **Fonction déclarée** : Utilise le mot-clé `function` suivi du nom de la fonction.
+- **Fonction anonyme** : N'a pas de nom et est généralement utilisée comme argument pour une autre fonction.
+- **Fonction fléchée** : Une syntaxe plus concise pour déclarer des fonctions.
+
+
+
+Si tu relis les premiers mots de cette section _(sur les fonctions)_, tu remarqueras que j'ai dit que les fonctions sont des blocs de code **réutilisables** qui effectuent une **tâche spécifique**.
+
+C'est un peu vague, non ?
+Disons qu'on comprend l'idée générale, mais qu'est-ce que ça veut dire au juste ?
+
+### Utilisation des fonctions
+
+Prenons un exemple simple, avec une fonction qui vérifie si un nombre est pair ou impair.
+
+
+
+Dans cet exemple, nous avons une fonction `isEven` qui prend un nombre en **paramètre** et retourne `true` si le nombre est pair, sinon elle retourne `false`.
+
+On peut ensuite appeler cette fonction avec différents nombres pour vérifier s'ils sont pairs ou impairs.
+
+
+
+Dans cet exemple, nous avons appelé la fonction `isEven` avec les nombres 4 et 5 en tant qu'**arguments**.
+
+
+ Les **paramètres** sont les variables déclarées dans la définition de la fonction.
+ Les **arguments** sont les valeurs passées à la fonction lors de son appel.
+
+
+## La portée
+
+La portée _(ou **scope** en anglais)_ fait référence à la visibilité des variables et des fonctions dans le code.
+
+Elle détermine où une variable ou une fonction peut être utilisée dans le code.
+Il existe trois types de portée en JavaScript :
+
+- **Portée globale** _(global scope)_ : La variable est accessible partout dans le code.
+- **Portée de bloc** _(block scope)_ : La variable est accessible uniquement à l'intérieur du bloc où elle a été déclarée.
+- **Portée de fonction** _(function scope)_ : La variable est accessible uniquement à l'intérieur de la fonction où elle a été déclarée.
+
+
+ La portée de bloc est introduite avec les mots-clés `let` et `const`.
+ Les variables déclarées avec `var` ont une portée fonctionnelle ou globale.
+
+
+### Portée globale (global scope)
+
+La portée globale est la portée la plus large.
+Les variables déclarées en dehors de toute fonction ou bloc de code ont une portée globale.
+
+Une portée globale signifie que la variable est accessible partout dans le code.
+
+
+ Attention à **ne pas déclarer** de variables globales, sauf si c'est intentionnel et nécessaire !
+
+ Les variables globales peuvent entraîner des conflits de variables/fonctions _(remplacement)_ des variables existantes, notamment des variables de l'objet `window` dans le navigateur.
+
+
+### Portée de bloc (block scope)
+
+La portée de bloc est une portée qui est limitée au bloc de code dans lequel la variable a été déclarée.
+
+Seules les variables déclarées avec `let` et `const` peuvent avoir une portée de bloc.
+
+
+ Par "bloc de code", on parle de tout ce qui est entre accolades `{}` !
+ Ça peut être une fonction, une boucle, une condition, etc.
+
+
+
+
+Dans cet exemple, nous avons :
+
+- Une déclaration d'une variable `x` en dehors d'un bloc de code
+- Une déclaration d'une variable `x` à l'intérieur d'un bloc de code _(condition)_
+
+Maintenant, regardons ce qui se passe selon le mot-clé utilisé pour déclarer la variable `x` :
+
+
+
+On remarque que si on utilise `let` ou `const`, la variable `x` déclarée à l'intérieur du bloc de code n'est pas "la même" que celle déclarée à l'extérieur.
+Elle est **locale** au bloc de code, et donc inaccessible en dehors de celui-ci.
+
+En revanche, si on utilise `var`, la variable `x` déclarée à l'intérieur du bloc de code est **globale** et écrase la variable `x` déclarée à l'extérieur.
+
+
+ Rien que pour ça, il est préférable d'éviter d'utiliser `var` et de lui préférer `let` ou `const`.
+
+
+### Portée de fonction (function scope)
+
+Pour la portée de fonction, on parle de la portée des variables déclarées à l'intérieur d'une fonction.
+
+Les trois mots-clés `var`, `let` et `const` peuvent être utilisés pour déclarer des variables avec une portée de fonction.
+
+
+
+Le fonctionnement est le même que pour la portée de bloc, avec cette fois-ci une portée limitée à la fonction _(y compris pour les variables déclarées avec `var`)_.
\ No newline at end of file
diff --git a/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx b/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx
new file mode 100644
index 0000000..0ce6522
--- /dev/null
+++ b/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx
@@ -0,0 +1,256 @@
+import { Snippet } from "@/components/Snippet";
+
+const jsFunctionsSnippets = [
+ {
+ name: "Fonction déclarée",
+ codeLanguage: "js",
+ code: `function addition(a, b) {
+ return a + b;
+}`,
+ },
+ {
+ name: "Fonction anonyme",
+ codeLanguage: "js",
+ code: `const addition = function(a, b) {
+ return a + b;
+};`,
+ },
+ {
+ name: "Fonction fléchée avec retour explicite",
+ codeLanguage: "js",
+ code: `const addition = (a, b) => {
+ return a + b;
+};`,
+ },
+ {
+ name: "Fonction fléchée avec retour implicite",
+ codeLanguage: "js",
+ code: "const addition = (a, b) => a + b;",
+ },
+];
+
+const jsIsEvenSnippets = [
+ {
+ name: "Fonction déclarée",
+ codeLanguage: "js",
+ code: `function isEven(number) {
+ return number % 2 === 0;
+}`,
+ },
+ {
+ name: "Fonction anonyme",
+ codeLanguage: "js",
+ code: `const isEven = function(number) {
+ return number % 2 === 0;
+};`,
+ },
+ {
+ name: "Fonction fléchée avec retour explicite",
+ codeLanguage: "js",
+ code: `const isEven = (number) => {
+ return number % 2 === 0;
+};`,
+ },
+ {
+ name: "Fonction fléchée avec retour implicite",
+ codeLanguage: "js",
+ code: "const isEven = (number) => number % 2 === 0;",
+ },
+];
+
+const jsCallIsEvenSnippets = [
+ {
+ name: "Appel de la fonction isEven",
+ codeLanguage: "js",
+ code: `console.log(isEven(4)); // true
+console.log(isEven(5)); // false`,
+ },
+];
+
+const jsBlockScopeSnippets = [
+ {
+ name: "Exemple avec let",
+ withLineNumbers: true,
+ codeLanguage: "js",
+ code: `let x = 10;
+
+if (true) {
+ let x = 20;
+ console.log(x); // 20
+}
+
+console.log(x); // 10`,
+ },
+ {
+ name: "Exemple avec const",
+ withLineNumbers: true,
+ codeLanguage: "js",
+ code: `const x = 10;
+
+if (true) {
+ const x = 20;
+ console.log(x); // 20
+}
+
+console.log(x); // 10`,
+ },
+ {
+ name: "Exemple avec var",
+ withLineNumbers: true,
+ codeLanguage: "js",
+ code: `var x = 10;
+
+if (true) {
+ var x = 20;
+ console.log(x); // 20
+}
+
+console.log(x); // 20`,
+ },
+];
+
+const jsBlockScopeExplanations = [
+ {
+ name: "Utilisation de let",
+ children: (
+
+ -
+ La variable
x est déclarée avec let dans le
+ scope global.
+
+ -
+ Dans le bloc
if, une nouvelle variable x est
+ déclarée, masquant la variable globale.
+
+ -
+ Lorsque nous affichons
x à l'intérieur du bloc, il
+ renvoie la valeur de la variable locale (20).
+
+ -
+ Lorsque nous affichons
x en dehors du bloc, il renvoie la
+ valeur de la variable globale (10).
+
+
+ ),
+ },
+ {
+ name: "Utilisation de const",
+ children: (
+
+ -
+ La variable
x est déclarée avec const dans
+ le scope global.
+
+ -
+ Dans le bloc
if, une nouvelle variable x est
+ déclarée, masquant la variable globale.
+
+ -
+ Lorsque nous affichons
x à l'intérieur du bloc, il
+ renvoie la valeur de la variable locale (20).
+
+ -
+ Lorsque nous affichons
x en dehors du bloc, il renvoie la
+ valeur de la variable globale (10).
+
+
+ ),
+ },
+ {
+ name: "Utilisation de var",
+ children: (
+
+ -
+ La variable
x est déclarée avec var dans le
+ scope global.
+
+ -
+ Dans le bloc
if, une nouvelle variable x est
+ déclarée, remplaçant la variable globale.
+
+ -
+ Lorsque nous affichons
x à l'intérieur du bloc, il
+ renvoie la valeur de la variable globale (20).
+
+ -
+ Lorsque nous affichons
x en dehors du bloc, il renvoie la
+ valeur de la variable globale (20).
+
+
+ ),
+ },
+];
+
+const jsFunctionScopeSnippets = [
+ {
+ name: "Exemple avec let",
+ withLineNumbers: true,
+ codeLanguage: "js",
+ code: `let x = 10;
+
+function example() {
+ let x = 20;
+
+ if (true) {
+ let x = 30;
+ console.log(x); // 30
+ }
+
+ console.log(x); // 20
+}
+
+example();
+console.log(x); // 10`,
+ },
+ {
+ name: "Exemple avec const",
+ withLineNumbers: true,
+ codeLanguage: "js",
+ code: `const x = 10;
+
+function example() {
+ const x = 20;
+
+ if (true) {
+ const x = 30;
+ console.log(x); // 30
+ }
+
+ console.log(x); // 20
+}
+
+example();
+console.log(x); // 10`,
+ },
+ {
+ name: "Exemple avec var",
+ withLineNumbers: true,
+ codeLanguage: "js",
+ code: `var x = 10;
+
+function example() {
+ var x = 20;
+
+ if (true) {
+ var x = 30;
+ console.log(x); // 30
+ }
+
+ console.log(x); // 30
+}
+
+example();
+console.log(x); // 10`,
+ },
+];
+
+export default {
+ jsFunctions: () => ,
+ jsIsEven: () => ,
+ jsCallIsEven: () => ,
+ jsBlockScope: () => ,
+ jsBlockScopeExplanations: () => (
+
+ ),
+ jsFunctionScope: () => ,
+};
diff --git a/app/pages/docs/javascript/syntaxe/+Page.mdx b/app/pages/docs/javascript/syntaxe/+Page.mdx
index 4646793..8a70e53 100644
--- a/app/pages/docs/javascript/syntaxe/+Page.mdx
+++ b/app/pages/docs/javascript/syntaxe/+Page.mdx
@@ -142,7 +142,7 @@ La fonction fléchée est une syntaxe plus concise et moderne pour déclarer des
Elle a un comportement particulier dans le contexte de retour de valeur, avec une syntaxe raccourcie pour les fonctions à une seule ligne.
- Dans une fonction classique, on utilise le mot-clé `return` pour retourner une valeur.
+ Dans une fonction déclarée, on utilise le mot-clé `return` pour retourner une valeur.
Le fonctionnement est identique pour les fonctions fléchées, mais il est possible de profiter d'une syntaxe raccourcie !
Dans le cas d'une fonction fléchée à une seule ligne, il n'est pas nécessaire d'utiliser le mot-clé `return`.
diff --git a/app/pages/docs/javascript/syntaxe/tabs.tsx b/app/pages/docs/javascript/syntaxe/tabs.tsx
index 56ab119..fbafac4 100644
--- a/app/pages/docs/javascript/syntaxe/tabs.tsx
+++ b/app/pages/docs/javascript/syntaxe/tabs.tsx
@@ -34,7 +34,7 @@ var ville = "Paris";`,
const jsFunctionsSnippets = [
{
- name: "Fonction classique",
+ name: "Fonction déclarée",
codeLanguage: "js",
code: `function addition(a, b) {
return a + b;