Passer au contenu principal

Comprendre le Scope, le Hoisting et les Opérateurs en JavaScript

Le Scope en JavaScript

En JavaScript, le scope fait référence à la portée d'une variable, c'est-à-dire où elle est accessible dans le code. Les variables déclarées avec let ou const ont un scope limité au bloc {} dans lequel elles sont définies, ainsi qu'aux sous-blocs qui suivent leur déclaration.

Exemple de Scope

let a = 1;

{
  let a = 2;
  let b = 3;
  
  console.log(a); // Affiche 2, car cette variable "a" est locale à ce bloc
}

console.log(a); // Affiche 1, car ici on retourne à la variable "a" définie en dehors du bloc
console.log(b); // Erreur : "b" n'est pas défini en dehors du bloc

Dans cet exemple, la variable a définie à l'intérieur du bloc {} masque temporairement celle qui est définie en dehors. Cela signifie qu'elles coexistent, mais la variable a du bloc interne a la priorité dans ce contexte. Cependant, la variable b n'est pas accessible en dehors du bloc où elle a été déclarée, ce qui entraînera une erreur si l'on tente de l'utiliser.

Vous ne pouvez pas déclarer deux fois une variable avec le même nom dans un même scope. Cela génèrerait une erreur.

Le Hoisting en JavaScript

Le hoisting est un mécanisme par lequel les déclarations de variables et de fonctions sont "remontées" en haut de leur contexte d'exécution avant l'exécution du code. Ce comportement est spécifique aux variables déclarées avec var et aux fonctions classiques.

Exemple de Hoisting avec var

console.log(a); // Affiche "undefined"

var a = 1;

Dans cet exemple, même si la variable a est déclarée après l'instruction console.log(), elle est en réalité "remontée" en haut du contexte, mais sans sa valeur initiale. Ainsi, le programme ne lève pas d'erreur, mais renvoie undefined.

Exemple de Hoisting avec une Fonction

Les fonctions classiques sont également "hoistées", ce qui permet de les appeler avant leur déclaration :

hello(); // Affiche "hello world"

function hello() {
  console.log('hello world');
}

Cependant, ce mécanisme ne s'applique pas aux fonctions définies sous forme de variables, comme avec une expression de fonction ou une fonction fléchée.

Exemple avec une Fonction Fléchée

hello(); // Erreur : Cannot access 'hello' before initialization

const hello = () => {
  console.log('hello world');
}

Dans ce cas, la fonction fléchée se comporte comme une variable déclarée avec const ou let, et ne peut être appelée qu'une fois initialisée.

Les Valeurs Falsy en JavaScript

JavaScript considère certaines valeurs comme "falsy", c'est-à-dire qu'elles sont évaluées comme false dans un contexte booléen. Les principales valeurs falsy sont :

  • null
  • undefined
  • Chaîne de caractères vide ""
  • Le nombre 0
  • Tableau vide []

Les Opérateurs Logiques || et &&

L'Opérateur || (OU logique)

L'opérateur logique || (ou "ou") renvoie le premier opérande si celui-ci est vrai, sinon il retourne le second. Cet opérateur est très utile pour définir des valeurs par défaut.

let name = userInput || "Nom par défaut";

Dans cet exemple, si userInput est falsy, la variable name prendra la valeur "Nom par défaut".

L'Opérateur && (ET logique)

L'opérateur logique && (ou "et") renvoie le second opérande si le premier est vrai, sinon il retourne false. Cet opérateur est souvent utilisé pour conditionner l'exécution d'un élément à la vérification d'une condition.

isLoading && <Loader />

Dans cet exemple, le composant Loader ne sera rendu que si isLoading est vrai, ce qui est très utile pour afficher un indicateur de chargement pendant qu'une requête est en cours.

Retour en haut