From ab2a1a8ac3b06125c57f0505692b34518060587a Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Tue, 13 May 2025 20:15:15 +0200 Subject: [PATCH] feat(docs): add documentation for JavaScript functions and scope --- app/libs/navigation.ts | 4 + .../javascript/fonctions-et-portee/+Page.mdx | 117 ++++++++ .../javascript/fonctions-et-portee/tabs.tsx | 256 ++++++++++++++++++ app/pages/docs/javascript/syntaxe/+Page.mdx | 2 +- app/pages/docs/javascript/syntaxe/tabs.tsx | 2 +- 5 files changed, 379 insertions(+), 2 deletions(-) create mode 100644 app/pages/docs/javascript/fonctions-et-portee/+Page.mdx create mode 100644 app/pages/docs/javascript/fonctions-et-portee/tabs.tsx 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;