Skip to main content

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​

Característicavarletconst
Scopefuncióblocbloc
Reassignació✅✅❌
Redeclaració✅❌❌
Hoisting✅ (undefined)❌ (Error)❌ (Error)

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.