diff --git a/app/pages/docs/javascript/+Page.mdx b/app/pages/docs/javascript/+Page.mdx
index 3067a70..3f8817a 100644
--- a/app/pages/docs/javascript/+Page.mdx
+++ b/app/pages/docs/javascript/+Page.mdx
@@ -69,4 +69,14 @@ On va donc aborder les sujets suivants :
- Les événements
- Le principe d'asynchrone
-Chaque article de cette série sera conçu pour être facilement compréhensible, avec des exemples pratiques et une explication des concepts.
\ No newline at end of file
+Chaque article de cette série sera conçu pour être facilement compréhensible, avec des exemples pratiques et une explication des concepts.
+
+
+ Facilement compréhensible ne veut pas dire que c'est facile à comprendre !
+
+ Il y a beaucoup de concepts à assimiler et certains peuvent faire mal au crâne.
+ Prends ton temps et n'hésite pas à revenir en arrière si tu ne comprends pas quelque chose.
+
+ L'idée est de ne surtout pas se précipiter sur les notions suivantes tant que tu n'as pas compris celles abordées dans l'article.
+ Expérimente et joue avec le code pour plus facilement assimiler !
+
\ No newline at end of file
diff --git a/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx b/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
index 5848e10..01b56ac 100644
--- a/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
+++ b/app/pages/docs/javascript/fonctions-et-portee/+Page.mdx
@@ -114,4 +114,44 @@ Les trois mots-clés `var`, `let` et `const` peuvent être utilisés pour décla
-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
+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`)_.
+
+## Particularités de var
+
+On a vu que `var` n'a pas la possibilité de déclarer des variables avec une portée de bloc, contrairement à `let` et `const`.
+
+Mais il y a une autre particularité à prendre en compte :
+- Les variables déclarées avec `var` sont **hoistées**.
+ Ça signifie que la déclaration de la variable est déplacée en haut de la portée dans laquelle elle a été déclarée.
+- Les variables déclarées avec `let` et `const` ne sont pas hoistées.
+
+
+ Le hoisting peut entraîner des comportements inattendus si on essaie d'accéder à une variable avant sa déclaration.
+
+ Il est donc préférable de toujours déclarer les variables au début de leur portée.
+
+
+Petit exemple pour illustrer ça :
+
+
+
+Dans cet exemple, on voit que la variable `x` est déclarée après son utilisation.
+Cependant, grâce _(ou à cause, je te laisse choisir !)_ au hoisting, la déclaration de la variable `x` est déplacée en haut de la portée, ce qui permet d'accéder à sa valeur avant sa déclaration.
+
+On peut donc dire que la variable `x` est **undefined** avant sa déclaration, mais elle existe déjà.
+On peut donc l'utiliser avant sa déclaration _(enfin, on aura `undefined` comme valeur)_.
+
+C'est un peu déroutant, non ?
+
+
+ Promis, c'est la dernière fois que je te dis de ne pas utiliser `var` !
+
+ Mais tu l'auras compris, `var` est vraiment très spécial et peut très vite devenir une source de bugs.
+
+
+## Conclusion
+
+Voilà, c'est "tout" pour cet article sur les fonctions et la portée en JavaScript !
+Comme les articles précédents, ça fait beaucoup d'informations.
+
+Encore une fois, prends le temps d'expérimenter et de jouer avec les notions abordées dans cet article avant de passer à la suite !
\ 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
index 0ce6522..8e7693a 100644
--- a/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx
+++ b/app/pages/docs/javascript/fonctions-et-portee/tabs.tsx
@@ -190,6 +190,7 @@ const jsFunctionScopeSnippets = [
function example() {
let x = 20;
+ let y = "Bonjour !";
if (true) {
let x = 30;
@@ -200,7 +201,8 @@ function example() {
}
example();
-console.log(x); // 10`,
+console.log(x); // 10
+console.log(y); // ReferenceError: y is not defined`,
},
{
name: "Exemple avec const",
@@ -210,6 +212,7 @@ console.log(x); // 10`,
function example() {
const x = 20;
+ const y = "Bonjour !";
if (true) {
const x = 30;
@@ -217,10 +220,12 @@ function example() {
}
console.log(x); // 20
+ console.log(y); // Bonjour !
}
example();
-console.log(x); // 10`,
+console.log(x); // 10
+console.log(y); // ReferenceError: y is not defined`,
},
{
name: "Exemple avec var",
@@ -230,6 +235,7 @@ console.log(x); // 10`,
function example() {
var x = 20;
+ var y = "Bonjour !";
if (true) {
var x = 30;
@@ -240,6 +246,37 @@ function example() {
}
example();
+console.log(x); // 10
+console.log(y); // ReferenceError: y is not defined`,
+ },
+];
+
+const jsHoistingSnippets = [
+ {
+ name: "Exemple avec let",
+ withLineNumbers: true,
+ codeLanguage: "js",
+ code: `console.log(x); // ReferenceError: Cannot access 'x' before initialization
+
+let x = 10;
+console.log(x); // 10`,
+ },
+ {
+ name: "Exemple avec const",
+ withLineNumbers: true,
+ codeLanguage: "js",
+ code: `console.log(x); // ReferenceError: Cannot access 'x' before initialization
+
+const x = 10;
+console.log(x); // 10`,
+ },
+ {
+ name: "Exemple avec var",
+ withLineNumbers: true,
+ codeLanguage: "js",
+ code: `console.log(x); // undefined
+
+var x = 10;
console.log(x); // 10`,
},
];
@@ -253,4 +290,5 @@ export default {
),
jsFunctionScope: () => ,
+ jsHoisting: () => ,
};