Bienvenue sur Développeur Pro ! Si vous êtes nouveau ici, vous voudrez sans doute transformer une carrière en développeur professionnel avec ce guide " Le kit développeur pro™ " : cliquez ici pour télécharger le guide gratuitement ! 🙂
Bienvenue à nouveau sur Développeur Pro ! Comme ce n'est pas la 1ère fois que vous venez ici, vous voudrez sans doute transformer votre carrière de développeur avec " Le kit développeur pro™ " : cliquez ici pour télécharger le guide gratuitement ! 🙂
La Portée d'une Fonction et la Pile de Fonction en JavaScript
En JavaScript, la gestion des variables et des fonctions en JavaScript repose sur deux concepts clés : la portée (scope) et la pile de fonctions (function stack). Ces mécanismes déterminent comment et où les variables JavaScript sont accessibles et comment les fonctions sont exécutées.
Dans ce cours, nous verrons ces notions en détail, en expliquant leur fonctionnement et leur importance. Vous découvrirez aussi comment ces concepts influencent le comportement de votre code.
Pour commencer vous devez comprendre que la portée des fonctions détermine où et comment les fonctions peuvent être appelées dans votre code.
La portée des fonctions peut être globale ou locale en fonction de l’endroit où elles sont définies.
Comprendre ces concepts est essentiel pour structurer votre code de manière efficace et éviter des erreurs courantes.
Portée Globale des Fonctions
Les fonctions définies en dehors de tout bloc de code ou autre fonction ont une portée globale. Elles peuvent être appelées de n’importe où dans votre script (les outils pour créer son premier script en JavaScript ici).
function fonctionGlobale() {
console.log('Je suis une fonction globale');
}
fonctionGlobale(); // Appel valide
Dans cet exemple, fonctionGlobale peut être appelée de n’importe où dans le code, car elle a une portée globale.
Portée Locale des Fonctions
Les fonctions définies à l’intérieur d’autres fonctions ou blocs de code ont une portée locale. Elles ne peuvent être appelées qu’à l’intérieur de la fonction ou du bloc où elles ont été définies.
Exemple avec une Fonction Locale
function exterieure() {
function interieure() {
console.log('Je suis une fonction locale');
}
interieure(); // Appel valide
}
exterieure(); // Appel valide
interieure(); // Erreur : interieure n'est pas définie dans ce scope (portée)
Ici, interieure est définie à l’intérieur de exterieure, donc elle ne peut être appelée qu’à l’intérieur de exterieure.
Portée des Fonctions dans des Blocs de Code
Avec l’introduction de let et const en ES6, les fonctions peuvent également être définies dans des blocs de code tels que des boucles ou des conditions en Javascript, limitant leur portée à ce bloc spécifique.
Exemple avec une Fonction dans un Bloc
if (true) {
function fonctionDeBloc() {
console.log('Je suis une fonction de bloc');
}
fonctionDeBloc(); // Appel valide
}
fonctionDeBloc(); // Erreur : fonctionDeBloc n'est pas définie
Dans cet exemple, fonctionDeBloc est accessible uniquement à l’intérieur du bloc if. En dehors de ce bloc, elle n’est pas définie.
Fonction de Rappel (Callback) et Portée
Les fonctions de rappel, ou callbacks, sont souvent utilisées avec des fonctions de haute ordre comme setTimeout, forEach, etc. La portée de ces fonctions de rappel dépend de l’endroit où elles sont définies.
Exemple de Fonction de Rappel
function traiter(tableau, callback) {
tableau.forEach(callback);
}
const nombres = [1, 2, 3];
traiter(nombres, function(item) {
console.log(item); // Accès aux éléments du tableau
});
traiter, donc elle a accès aux éléments du tableau Js passé en argument.Maintenant qu’est-ce qu’une Pile ?
Une pile, ou stack en anglais, est une structure de données fondamentale en informatique, utilisée pour gérer l’ordre d’exécution des tâches ou des fonctions. La pile suit un principe simple : Avec le LIFO (Last In, First Out) l’inverse du FiFO (First in, Fisrt Out) voir article ici, Pour le LIFO cela signifie que le dernier élément ajouté est le premier à être retiré.
Caractéristiques d’une Pile en programmation
- LIFO (Last In, First Out) : Le dernier élément ajouté à la pile est le premier à en être retiré.
- Opérations de Base :
- Push : Ajouter un élément au sommet de la pile.
- Pop : Retirer l’élément du sommet de la pile.
- Peek/Top : Consulter l’élément au sommet de la pile sans le retirer.
- Accessibilité : Les éléments de la pile ne sont accessibles qu’à partir du sommet, contrairement à d’autres structures de données comme les tableaux.
Exemple Visuel
Imaginons une pile de livres où vous ne pouvez ajouter ou retirer des livres qu’en haut de la pile :
Pile Initiale :
Pile vide
Ajoute Livre 1
-----
Livre 1
Ajoute Livre 2
-----
Livre 2
Livre 1
Retire Livre 2
-----
Livre 1
Consulte le sommet : Livre 1
Application de la pile en Programmation
En programmation, la pile (en informatique ici) est couramment utilisée pour gérer les appels de fonctions. Chaque fois qu’une fonction est appelée, une nouvelle entrée est ajoutée (push) à la pile. Lorsque la fonction termine son exécution, elle est retirée (pop) de la pile. Cette gestion ordonnée permet de suivre le déroulement et le retour des fonctions.
Exemple en JavaScript
Reprenons l’exemple précédent de la pile de fonctions pour illustrer cela :
function fonctionA() {
console.log('Début de fonctionA');
fonctionB();
console.log('Fin de fonctionA');
}
function fonctionB() {
console.log('Début de fonctionB');
fonctionC();
console.log('Fin de fonctionB');
}
function fonctionC() {
console.log('Début de fonctionC');
console.log('Fin de fonctionC');
}
fonctionA();
Exécution et Pile de Fonctions
Appel de
fonctionA():fonctionAest ajoutée à la pile.- La pile contient : [fonctionA]
- Console :
Début de fonctionA
fonctionAappellefonctionB():fonctionBest ajoutée à la pile.- La pile contient : [fonctionA, fonctionB]
- Console :
Début de fonctionB
fonctionBappellefonctionC():fonctionCest ajoutée à la pile.- La pile contient : [fonctionA, fonctionB, fonctionC]
- Console :
Début de fonctionC - Console :
Fin de fonctionC
Retour de
fonctionCàfonctionB:fonctionCest retirée de la pile.- La pile contient : [fonctionA, fonctionB]
- Console :
Fin de fonctionB
Retour de
fonctionBàfonctionA:fonctionBest retirée de la pile.- La pile contient : [fonctionA]
- Console :
Fin de fonctionA
Fin de
fonctionA:fonctionAest retirée de la pile.- La pile est maintenant vide.
Définition : La Pile de Fonction (Function Stack)
La pile de fonctions, ou call stack, est une structure qui garde trace des fonctions en cours d’exécution. Chaque fois qu’une fonction est appelée, elle est ajoutée à la pile. Lorsque la fonction termine son exécution, elle est retirée de la pile.
Autre exemple de fonctionnement de la Pile de fonctions
Considérons ce code :
function premiere() {
console.log('Première fonction');
seconde();
console.log('Retour à la première fonction');
}
function seconde() {
console.log('Deuxième fonction');
}
premiere();
Lorsque vous exécutez premiere(), voici ce qui se passe :
premiere()est appelée et ajoutée à la pile.premiere()appelleseconde(), qui est ajoutée à la pile au-dessus depremiere().seconde()s’exécute et est retirée de la pile.- Le contrôle revient à
premiere(), qui termine son exécution et est retirée de la pile.
Ce mécanisme vous permet de suivre l’ordre d’exécution des fonctions et d’assurer que chaque fonction termine son travail avant de passer à la suivante.
Voici un exemple de Dépassement de la Pile
Un dépassement de pile en anglais stack overflow (tu comprendras maintenant enfin la définition du nom du célèbre site stack overflow) se produit lorsque la pile est saturée, souvent à cause de récursions infinies
function recursive() {
recursive(); // Appel infini
}
recursive(); // Dépassement de la pile
recursive s’appelle elle-même sans fin, provoquant un dépassement de la pile.Pourquoi dois je connaître cela ?
Maîtriser la portée d’une fonction et la pile de fonctions est essentiel pour écrire un code JavaScript sans bug et performant pour tes programmes.
Ces concepts t’aide à comprendre où tes fonctions sont accessibles et comment les fonctions sont exécutées.
Maintenant… Je t’offre ce Guide Bonus Exclusif
Oui un Guide Pépite rien que pour Toi !
Voici un guide complet le Kit JavaScript Pro Incubator™, où tu verras des techniques pour performer en programmation Js.
Ce guide te permettra de perfectionner tes compétences et de devenir un expert JavaScript. Ne le rate pas et développe ton expertise !
En adoptant ce qu’il contient, tu rends ton apprentissage de JavaScript plus performant avec une plus grande facilité tous les jours . Tu veux enrichir tout de suite ton savoir-faire ? Ce guide complet t’attend ici !
Quelques liens en supplément de cette article
Voici ma Chaîne YouTube sur la programmation et le métier de développeur : https://www.youtube.com/@Developpeur-Pro
Voici un Canal ou je partage sur LinkedIn des informations sur le développement : https://www.linkedin.com/company/developpeur-pro
Retrouve ici de nombreux articles sur le code et le métier de développeur : https://developpeur-pro.com/articles-developpeur


