Les fonctions et la portée

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.

function addition(a, b) {
  return a + b;
}

const addition = function(a, b) {
  return a + b;
};

const addition = (a, b) => {
  return a + b;
};

const addition = (a, b) => a + b;

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.

function isEven(number) {
	return number % 2 === 0;
}

const isEven = function(number) {
	return number % 2 === 0;
};

const isEven = (number) => {
	return number % 2 === 0;
};

const isEven = (number) => number % 2 === 0;

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.

console.log(isEven(4)); // true
console.log(isEven(5)); // false

Dans cet exemple, nous avons appelé la fonction isEven avec les nombres 4 et 5 en tant qu'arguments.

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.

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.

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.

let x = 10;

if (true) {
	let x = 20;
	console.log(x); // 20
}

console.log(x); // 10

const x = 10;

if (true) {
	const x = 20;
	console.log(x); // 20
}

console.log(x); // 10

var x = 10;

if (true) {
	var x = 20;
	console.log(x); // 20
}

console.log(x); // 20

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.

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.

let x = 10;
		
function example() {
	let x = 20;
	let y = "Bonjour !";

	if (true) {
		let x = 30;
		console.log(x); // 30
	}

	console.log(x); // 20
}

example();
console.log(x); // 10
console.log(y); // ReferenceError: y is not defined

const x = 10;

function example() {
	const x = 20;
	const y = "Bonjour !";

	if (true) {
		const x = 30;
		console.log(x); // 30
	}

	console.log(x); // 20
	console.log(y); // Bonjour !
}

example();
console.log(x); // 10
console.log(y); // ReferenceError: y is not defined

var x = 10;

function example() {
	var x = 20;
	var y = "Bonjour !";

	if (true) {
		var x = 30;
		console.log(x); // 30
	}

	console.log(x); // 30
}

example();
console.log(x); // 10
console.log(y); // ReferenceError: y is not defined

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.

Petit exemple pour illustrer ça :

console.log(x); // ReferenceError: Cannot access 'x' before initialization

let x = 10;
console.log(x); // 10

console.log(x); // ReferenceError: Cannot access 'x' before initialization

const x = 10;
console.log(x); // 10

console.log(x); // undefined

var x = 10;
console.log(x); // 10

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 ?

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 !