La Portée d'une Fonction et la Pile de Fonction en JavaScript

portée fonction et pile fonctions javascript image

 

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 });
 
 
Dans cet exemple, la fonction de rappel est définie à l’intérieur de l’appel de 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

 
 
  1. LIFO (Last In, First Out) : Le dernier élément ajouté à la pile est le premier à en être retiré.
  2. 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.
  3. 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

 
Ajouter un Livre au dessus de la pile  (Push) :
 
 
Ajoute Livre 1
-----
Livre 1

 
Ajouter un Autre Livre au dessus de la pile (Push) :
 
 
Ajoute Livre 2
-----
Livre 2
Livre 1

 
Retirer le Livre du Sommet de la pile  (Pop) :
 
 
Retire Livre 2
-----
Livre 1

 
Consulter le Livre du Sommet de la pile (Peek) :
 
 
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

 
  1. Appel de fonctionA() :

    • fonctionA est ajoutée à la pile.
    • La pile contient : [fonctionA]
    • Console : Début de fonctionA
  2. fonctionA appelle fonctionB() :

    • fonctionB est ajoutée à la pile.
    • La pile contient : [fonctionA, fonctionB]
    • Console : Début de fonctionB
  3. fonctionB appelle fonctionC() :

    • fonctionC est ajoutée à la pile.
    • La pile contient : [fonctionA, fonctionB, fonctionC]
    • Console : Début de fonctionC
    • Console : Fin de fonctionC
  4. Retour de fonctionC à fonctionB :

    • fonctionC est retirée de la pile.
    • La pile contient : [fonctionA, fonctionB]
    • Console : Fin de fonctionB
  5. Retour de fonctionB à fonctionA :

    • fonctionB est retirée de la pile.
    • La pile contient : [fonctionA]
    • Console : Fin de fonctionA
  6. Fin de fonctionA :

    • fonctionA est retirée de la pile.
    • La pile est maintenant vide.
 
 
Comme vous pouvez le voir la pile est une structure de données essentielle pour la gestion des appels de fonctions et de nombreuses autres tâches en programmation.
 
Elle garantit que les tâches sont exécutées dans le bon ordre et que les fonctions retournent correctement à leur point d’appel. Comprendre ce fonctionnement de la pile vous permettra d’écrire des fonctions et il sera plus facile pour vous de débuguer un programme.
 
 

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 :

  1. premiere() est appelée et ajoutée à la pile.
  2. premiere() appelle seconde(), qui est ajoutée à la pile au-dessus de premiere().
  3. seconde() s’exécute et est retirée de la pile.
  4. 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

 
Dans cet exemple, 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

Si vous avez aimé l’article, vous êtes libre de le partager : )

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *