Ambito de las variables en Javascript

  • Por
El ámbito de las variables en Javascript: qué son las variables locales y globales y cómo se trabaja con ellas en Javascript.
El ámbito de las variables es uno de los conceptos más importantes que deberemos conocer cuando trabajamos con variables, no sólo en Javascript, sino en la mayoría de los lenguajes de programación.

En el artículo anterior ya comenzamos a explicar qué son las variables y cómo declararlas. En este artículo del Manual de Javascript pretendemos explicar con detenimiento qué es este ámbito de las variables y ofrecer ejemplos para que se pueda entender bien.

Concepto de ámbito de variables

Se le llama ámbito de las variables al lugar donde estas están disponibles. Por lo general, cuando declaramos una variable hacemos que esté disponible en el lugar donde se ha declarado, esto ocurre en todos los lenguajes de programación y como Javascript se define dentro de una página web, las variables que declaremos en la página estarán accesibles dentro de ella.

En Javascript no podremos acceder a variables que hayan sido definidas en otra página. Por tanto, la propia página donde se define es el ámbito más habitual de una variable y le llamaremos a este tipo de variables globales a la página. Veremos también se pueden hacer variables con ámbitos distintos del global, es decir, variables que declararemos y tendrán validez en lugares más acotados.

Variables globales

Como hemos dicho, las variables globales son las que están declaradas en el ámbito más amplio posible, que en Javascript es una página web. Para declarar una variable global a la página simplemente lo haremos en un script, con la palabra var.

<SCRIPT>
var variableGlobal
</SCRIPT>


Las variables globales son accesibles desde cualquier lugar de la página, es decir, desde el script donde se han declarado y todos los demás scripts de la página, incluidos los manejadores de eventos, como el onclick, que ya vimos que se podía incluir dentro de determinadas etiquetas HTML.

Variables locales

También podremos declarar variables en lugares más acotados, como por ejemplo una función. A estas variables les llamaremos locales. Cuando se declaren variables locales sólo podremos acceder a ellas dentro del lugar donde se ha declarado, es decir, si la habíamos declarado en una función solo podremos acceder a ella cuando estemos en esa función.

Las variables pueden ser locales a una función, pero también pueden ser locales a otros ámbitos, como por ejemplo un bucle. En general, son ámbitos locales cualquier lugar acotado por llaves.

<SCRIPT>
function miFuncion (){
    var variableLocal
}
</SCRIPT>


En el script anterior hemos declarado una variable dentro de una función, por lo que esa variable sólo tendrá validez dentro de la función. Se pueden ver cómo se utilizan las llaves para acotar el lugar donde está definida esa función o su ámbito.

No hay problema en declarar una variable local con el mismo nombre que una global, en este caso la variable global será visible desde toda la página, excepto en el ámbito donde está declarada la variable local ya que en este sitio ese nombre de variable está ocupado por la local y es ella quien tiene validez. En resumen, la variable que tendrá validez en cualquier sitio de la página es la global. Menos en el ámbito donde está declarada la variable local, que será ella quien tenga validez.

<SCRIPT>
var numero = 2
function miFuncion (){
    var numero = 19
    document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
</SCRIPT>


Un consejo para los principiantes podría ser no declarar variables con los mismos nombres, para que nunca haya lugar a confusión sobre qué variable es la que tiene validez en cada momento.

Diferencias entre declarar variables con var, o no declararlas

Como hemos dicho, en Javascript tenemos libertad para declarar o no las variables con la palabra var, pero los efectos que conseguiremos en cada caso serán distintos. En concreto, cuando utilizamos var estamos haciendo que la varible que estamos declarando sea local al ámbito donde se declara. Por otro lado, si no utilizamos la palabra var para declarar una variable, ésta será global a toda la página, sea cual sea el ámbito en el que haya sido declarada.

En el caso de una variable declarada en la página web, fuera de una función o cualquier otro ámbito más reducido, nos es indiferente si se declara o no con var, desde un punto de vista funcional. Esto es debido a que cualquier variable declarada fuera de un ámbito es global a toda la página. La diferencia se puede apreciar en una función por ejemplo, ya que si utilizamos var la variable será local a la función y si no lo utilizamos, la variable será global a la página. Esta diferencia es fundamental a la hora de controlar correctamente el uso de las variables en la página, ya que si no lo hacemos en una función podríamos sobreescribir el valor de una variable, perdiendo el dato que pudiera contener previamente.

<SCRIPT>
var numero = 2
function miFuncion (){
    numero = 19
    document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
//llamamos a la función
miFuncion()
document.write(numero) //imprime 19
</SCRIPT>


En este ejemplo, tenemos una variable global a la página llamada numero, que contiene un 2. También tenemos una función que utiliza la variable numero sin haberla declarado con var, por lo que la variable numero de la funcion será la misma variable global numero declarada fuera de la función. En una situación como esta, al ejecutar la función se sobreescribirá la variable numero y el dato que había antes de ejecutar la función se perderá.

En el próximo artículo continuaremos hablando de variables y mostraremos que en ellas se pueden guardar distintos tipos de información.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Sergio

24/11/2005
Conectar javascript con php y viceversa

Si llamo a una funcion en javascript pasandole un parametro (numero), Este parametro es el indice de un array de php pero no logro que funcione. Si en lugar de la variable faqid le coloco un numero, funciona. Agradeceria algun consejo para resolverlo. Slds.

La sentencia que utilizo es:

<script type="text/javascript">

function ShowFAQ(faqid){

window.document.labeltitlefaq.innerText='<?php echo($arrayFAQtitle[faqid])?>' ;

}

</script>

felipe

15/9/2006
esta parte de codigo deberia funcionar en mi navegador y no muestra el numero a imprimir

function miFuncion (){
var numero = 19
document.write(numero) //imprime 19
}

ricardo

20/10/2006
Sergio, probá con:
<script type="text/javascript">

function ShowFAQ(faqid){

window.document.labeltitlefaq.innerText='<?php echo($arrayFAQtitle[' + faqid + '])?>' ;

}

</script>

Alex

07/5/2007
Hola, una pregunta

Hay alguna forma de usar una variable global dentro de una función? Me explico:

Estoy usando AJAX, y me devuelve un objeto JSON que puedo usar para maquetar todo dentro de la función, pero lo que necesito es guardar ese objeto para volver a usarlo después. Hay alguna forma de guardarlo en una var global?

gaston

08/6/2007
<script type="text/javascript">

function ShowFAQ(faqid){

window.document.labeltitlefaq.innerText='<?php echo($arrayFAQtitle[faqid])?>' ;

}

las variables de javascript no son vistas por php
ya que un se ejecuta en el servidor y el otro en el cliente

lo que podes hacer es utilizar php para generar los links y pasas por get o post una variable que indique la pos del array para mostrar

a href = "pagina.php?index=<?echo numeropos?>" por ejemplo y desde pagina.php lees la variable $_get correspondiente. sino tendrias que usar un poquito de ajax para eso te recomiendo PROTOTYPE una muy buena libreria de ajax. cualquier duda consultame por mail . gastonmusante{@}gmail.{com}

</script>

Josh

29/10/2007
Ya intentaste poniendole $ a la variable faqid?, tal vez sea que php no reconoce la variable por que no lleva el signo

bikutoru

16/4/2009
documento.write
Hola.
Cómo lo hago para pasar desde document.write(variable1) a una variable php???

La idea es capturar document.write(variable1) y pasarlo a Flash....pero no sé cómo!!!

Roberto Salazar

18/6/2009
manual de javascript
Está muy bueno, todo muy claro

Elías

14/2/2010
variables locales accesibles desde fuera
He descubierto que las variables locales no "mueren" al terminar la función, y se pueden usar como "atributos" de una especie de "objeto-función", por ejemplo:


var setLocal, getLocal;
(function(){
var local = 0;
setLocal = function(valor){
local=valor;
};
getLocal = function(){
return local;
};
})();

alert(getLocal()); // muestra 0
setLocal(123); // asigna 123 a la "local"
alert(getLocal()); // muestra 123


Lo he probado bastante y parece que no falla nunca en ningún navegador y facilita el tratamiento de eventos y la compresión (yuicompressor minimiza todas las locales), pero me pregunto si será seguro o simplemente funciona porque javascript use borrado "vago" (no eliminar, sino marcar como borrado/reemplazable) y por consiguiente dichas locales están accesibles desde el exterior mientras no sea necesario su espacio para otras variables (pila bastante llena), otra opción es que trate esas variables como objetos en java y al estar referenciadas desde el exterior no "mueran" nunca. ¿Que pasa realmente con esas variables?

Carlos

23/2/2011
No es nada de recoleccion de basura son clousures
En el codigo que agregaste incluiste una funcionalidad de javascript denominada clousures, esta permite almacenar el contexto de un ambito particular despues que este haya terminado exactamente lo haces en:

(function(){
var local = 0;
setLocal = function(valor){
local=valor; //aqui estas usando una variable disponible fuera de la funcion y el preservada mientras exista la variable setLocal
};

})();

nostradamus21b

29/12/2012
Puede utilizarse repetidamente una var global?
Trato de volver a utilizar una var global pero no resulta. Sólo la imprime 1 sola vez.
En una div tengo un <p> con id="ancla". Cerrada la div existe un botón que llama la función agregar().

<script type="text/javascript">
_saludo = document.createTextNode('OLA K ASE');
_padre = document.getElementById('ancla')

function agregar(){
_padre.appendChild(_saludo);
}
</script>

El problema es que al presionar reiteradamente el botón sólo se me ejecuta el programa 1 sola vez imprimiéndome la oración "OLA K ASE"... y lo que quiero es que se me imprima todas las veces que la presiono.

¿Qué es lo que estoy haciendo mal? Saludos y gracias de antemano por vuestra ayuda.