Introducció a JavaScript: variables, scope i hoisting

JavaScript és un llenguatge de programació lleuger, interpretat i orientat a objectes que s'executa en entorns de client (navegadors) i servidor (Node.js). Creat per Brendan Eich el 1995 en només 10 dies, inicialment es deia Mocha, després LiveScript, i finalment es va consolidar com a JavaScript per motius comercials.

---

Evolució històrica del llenguatge#

• 1995: Creació de JavaScript a Netscape.
• 1996–1999: Estàndard ECMAScript publicat per ECMA.
• 2009: Naixement de Node.js (JavaScript al servidor).
• 2015 (ES6): Introducció de let, const, arrow functions, classes, modules...
• 2024: JS continua essent essencial en el desenvolupament web modern.

---

Declaració de variables#

var (clàssic)#

var nom = "Joan";
var nom = "Marc"; // redeclaració permesa

• Declaració amb àmbit de funció
• Reassignable i redeclarable
• Afectat pel hoisting: es defineix com a undefined al principi del context

---

let (modern)#

let edat = 30;
edat = 31; // reassignació OK
let edat = 40; // ❌ Error: redeclaració no permesa

• Scope de bloc
• Només es pot declarar una vegada dins del mateix bloc

---

const (valor constant)#

const PI = 3.14;
PI = 3.1416; // ❌ Error

• Scope de bloc
• No es pot reassignar
• Obligatori assignar valor en el moment de declaració

---

Hoisting#

El hoisting és el comportament pel qual JS "puja" les declaracions a la part superior del seu context (funció o script), però només les declaracions, no les assignacions.

console.log(nom); // undefined
var nom = "Joan";

Amb let o const:

console.log(nom); // ❌ ReferenceError
let nom = "Joan";

Aquest error passa perquè les variables es col·loquen en un "Temporal Dead Zone (TDZ)" fins que s’inicialitzen.

---

Scope: àmbits de visibilitat#

Global Scope#

var global = "visible a tot arreu";

Function Scope#

function suma() {
  var resultat = 2 + 2;
}

Block Scope#

if (true) {
  let missatge = "Hola!";
}

---

Comparativa ràpida#

---

Errors habituals#

• Accedir a variables abans de declarar-les
• Redeclarar amb let o const
• Reassignar una const
• Malentendre el hoisting de funcions vs variables

---

Activitats#

Activitat 1: Exploració de var, let, const#

Prova els següents casos i analitza el comportament:

var a = 1;
let b = 2;
const c = 3;

a = 10; // OK
b = 20; // OK
c = 30; // ❌

var a = 100; // OK
let b = 200; // ❌

Activitat 2: Hoisting#

console.log(x); // ?
var x = 5;

console.log(y); // ?
let y = 10;

Activitat 3: Scope#

function test() {
  var dinsFuncio = "funció";
  if (true) {
    let dinsBloc = "bloc";
    var tambeFuncio = "funció 2";
  }
  console.log(dinsFuncio); // ?
  console.log(dinsBloc); // ?
  console.log(tambeFuncio); // ?
}

---

Reforç visual#

| Context | Declaració | Visibilitat |
|---------|------------|-------------|
| Global  | var        | Tota la pàgina o arxiu |
| Funció  | var        | Només dins la funció   |
| Bloc    | let/const  | Només dins el bloc `{}`|

---

Aquest capítol et proporciona una base sòlida sobre variables, àmbits i comportament intern de JavaScript per evitar errors habituals i escriure codi robust.