Introducció

En aquest tema, explorarem dos conceptes fonamentals en JavaScript: l'àmbit (scope) i els tancaments (closures). Aquests conceptes són essencials per entendre com funciona la visibilitat de les variables i com es poden crear funcions amb comportaments més avançats.

Àmbit (Scope)

L'àmbit es refereix a la visibilitat de les variables en diferents parts del codi. En JavaScript, hi ha dos tipus principals d'àmbit:

Àmbit Global: Les variables declarades fora de qualsevol funció tenen àmbit global i són accessibles des de qualsevol part del codi.
Àmbit Local: Les variables declarades dins d'una funció tenen àmbit local i només són accessibles dins d'aquesta funció.

Exemple d'Àmbit Global i Local

// Variable global
var globalVar = "Sóc global";

function exempleFuncio() {
    // Variable local
    var localVar = "Sóc local";
    console.log(globalVar); // Accessible
    console.log(localVar);  // Accessible
}

exempleFuncio();

console.log(globalVar); // Accessible
console.log(localVar);  // Error: localVar no està definida

Àmbit de Bloc

Amb l'arribada d'ES6, es van introduir les paraules clau let i const, que permeten declarar variables amb àmbit de bloc. Això significa que les variables declarades amb let o const només són accessibles dins del bloc on es declaren.

if (true) {
    let blocVar = "Sóc una variable de bloc";
    console.log(blocVar); // Accessible
}

console.log(blocVar); // Error: blocVar no està definida

Tancaments (Closures)

Un tancament és una funció que recorda l'àmbit en el qual es va crear, fins i tot després que aquest àmbit hagi finalitzat. Això permet que la funció accedeixi a les variables de l'àmbit extern en què es va definir.

Exemple de Tancament

function crearSalutacio(nom) {
    return function() {
        console.log("Hola, " + nom);
    };
}

var salutacioJoan = crearSalutacio("Joan");
salutacioJoan(); // Hola, Joan

En aquest exemple, la funció retornada per crearSalutacio recorda la variable nom del seu àmbit extern, fins i tot després que crearSalutacio hagi finalitzat la seva execució.

Exemple Pràctic amb Tancaments

Els tancaments són especialment útils per crear funcions amb estat privat.

function contador() {
    let comptador = 0;
    return function() {
        comptador++;
        console.log(comptador);
    };
}

var incrementar = contador();
incrementar(); // 1
incrementar(); // 2
incrementar(); // 3

En aquest exemple, la variable comptador és privada per a la funció retornada, i només es pot modificar mitjançant aquesta funció.

Exercicis Pràctics

Exercici 1: Àmbit de Variables

Declara una variable global.
Declara una funció que defineixi una variable local i imprimeixi tant la variable global com la local.
Intenta imprimir la variable local fora de la funció i observa què passa.

Exercici 2: Creació de Tancaments

Escriu una funció crearMultiplicador que prengui un número com a argument i retorni una funció que multipliqui qualsevol número per aquest número.
Utilitza la funció retornada per crear un multiplicador per 2 i un altre per 3.
Prova els multiplicadors amb diferents números.

Solucions

Solució a l'Exercici 1

// 1. Variable global
var globalVar = "Variable Global";

// 2. Funció amb variable local
function exempleFuncio() {
    var localVar = "Variable Local";
    console.log(globalVar); // Variable Global
    console.log(localVar);  // Variable Local
}

exempleFuncio();

// 3. Intentar imprimir la variable local fora de la funció
console.log(localVar); // Error: localVar no està definida

Solució a l'Exercici 2

// 1. Funció crearMultiplicador
function crearMultiplicador(multiplicador) {
    return function(numero) {
        return numero * multiplicador;
    };
}

// 2. Crear multiplicadors
var multiplicarPer2 = crearMultiplicador(2);
var multiplicarPer3 = crearMultiplicador(3);

// 3. Provar els multiplicadors
console.log(multiplicarPer2(5)); // 10
console.log(multiplicarPer3(5)); // 15

Conclusió

En aquesta secció, hem après sobre l'àmbit de les variables i els tancaments en JavaScript. Aquests conceptes són fonamentals per escriure codi eficient i comprensible. Els tancaments, en particular, són una eina poderosa per crear funcions amb estat privat i comportaments avançats. Amb la pràctica, aquests conceptes esdevindran una part natural del teu repertori de programació.

Àmbit i Tancaments

Introducció

Àmbit (Scope)

Exemple d'Àmbit Global i Local

Àmbit de Bloc

Tancaments (Closures)

Exemple de Tancament

Exemple Pràctic amb Tancaments

Exercicis Pràctics

Exercici 1: Àmbit de Variables

Exercici 2: Creació de Tancaments

Solucions

Solució a l'Exercici 1

Solució a l'Exercici 2

Conclusió

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final