L’àmbit d’una variable es pot definir com l’àrea del programa en que aquesta és visible i accessible.
Com a la majoria de llenguatges de programació, en javascript pots declarar una variable com a global, definida en tot l’àmbit del codi javascript, o com a local, definida només dins de l’àmbit de la funció que la defineix.
var a = 0; // variable global
function foo() {
var b = 1; // variable local
}
Cal tenir sempre en compte que una variable local sempre té precedència davant d’una variable global, és a dir, si una paràmetre d’una funció o una variable declarada dins del seu àmbit té el mateix nom que una variable global, aquesta darrera queda oculta per la nova declaració.
var ambit = 'global'; // Declarem una variable global
function foo() {
var ambit = 'local'; // Declarem una variable local
document.write(ambit); // Usem la variable local
}
foo(); // Imprimeix 'local'
Fins aquí tot força senzill, no? Però si us fixeu, encara no he dit res sobre la paraula reservada var.
Javascript ens deixa usar variables sense haver-les de definir amb la paraula var, però què passa si no ho fem? Doncs bé, si l’interpretador troba que s’està assignant un valor en una variable que no està declarada, la declara com a global i llavors li assigna el valor. Llavors cal tenir en compte que sempre que vulguem declarar una variable local, hem d’usar var.
ambit = 'global'; // Declarem una variable global (sense var)
function foo() {
ambit = 'local'; // Ostres! Hem canviat el valor de la variable global!
document.write(ambit); // Usa la variable global
nou_ambit = 'local'; // Declarem una nova variable global
document.write(nou_ambit); // Usa la nova variable global
}
foo(); // Imprimeix 'locallocal'
document.write(ambit); // Imprimeix 'local' (el valor s'ha canviat dins la funció)
document.write(nou_ambit); // Imprimeix 'local' (la variable s'ha creat a la funció però amb àmbit global)
En general, una funció no sap quines variables estan definides en l’àmbit global i quines no. Així, si una funció usa una variable global en comptes d’una local sense saber-ho, pot estar modificant un valor que pot afectar a d’altres parts del programa. Per sort, la solució a tota aquesta problemàtica és ben senzilla: declareu sempre totes les variables amb var.
Però si seguim estirant del fil, podem trobar altres coses curioses relacionades amb l’àmbit de variables.
A diferència d’altres llenguatges de programació, javascript no defineix l’àmbit d’una variable a nivell de bloc (només existeixen àmbits a nivell global o local!). Així, totes les variables declarades dins d’una funció, sigui on sigui, estan definides a nivell de tota la funció. Si mirem el següent codi podrem entendre-ho:
function foo(a) {
var i = 0; // i està definida a tota la funció
if (a == 5) {
var j = 23; // j està definida a tota la funció, no només en aquest bloc
for(var k = 0; k < 20; k++) { // k està definida a tota la funció, no només en aquest bucle
document.write(k);
}
document.write(k); // k està definida, i té valor 20
}
document.write(j); // j està definida però pot ser que no estigui inicialitzada
}
Cal tenir en compte que el fet que una variable declarada dins d’una funció està definida per tota la funció pot donar-nos alguna que altra sorpresa. Per exemple:
var ambit = 'global';
function foo() {
alert(ambit); // Mostra 'undefined', no pas 'global'
var ambit = 'local'; // Variable inicialitzada aquí, però definida en tot l'àmbit de la funció
alert(ambit); // Mostra 'local'
}
foo();
Pot semblar-nos que el primer cop que es crida a la funció alert() hauria de mostrar-nos “global” ja que la declaració de la variable local encara no s’ha executat. Però si tenim en compte les regles d’àmbit que he anat explicant, la variable local està definida en tot l’àmbit de la funció, ocultant la variable global que du el mateix nom. Però igualment, encara que la variable local està definida, aquesta no està inicialitzada fins que no s’executa la sentència var. Així, la funció foo() anterior és equivalent a la següent:
var ambit = 'global';
function foo() {
var ambit; // La variable local es defineix a l'inici de la funció
alert(ambit); // En aquest punt existeix, però té valor 'undefined'
var ambit = 'local'; // En aquest punt la inicialitzem i li donem un valor
alert(ambit); // Aquí ja té valor!
}
Amb aquest exemple il·lustra perfectament el perquè és una bona pràctica el declarar totes les variables a l’inici de cada funció.
Tots els exemples que s’usen en aquesta entrada estan basats en els que es poden trobar al del llibre Javascript: The Definitive Guide