El scope hace referencia a las variables que estan disponibles en cierta parte del codigo. Por default cualquier vairable que declaremos va al window scope.
Código :
var iconDefault = 'images/default.png'; // como se pega al scope de window lo siguiente es true console.log(iconDefault == window.iconDefault);
Pero como se crean nuevos scopes? Es muy simple cada funcion tiene su propio scope:
Código :
var icon = 'images/default.png';
function twitterIcon(userId)
{
var icon = 'images/twitter.png';
if (userId)
{
return 'images/' + userId + 'icon.png';
}
return icon;
}
// como se pega al scope de window lo siguiente es true
console.log(icon == window.icon);
// retorna images/twitter.png por que en la funcion se redefinio la vairable, dentro de la funcion y solo ahi
console.log(twitterIcon());
// retorna true, sigue siendo el valor de un inicio por que no se modifico la variable mas que dentro de la funcion en el scope de la funcion y no en el de window
console.log(icon == 'images/default.png');
He aqui el problema y por que el scope es tan importante si no delcaramos la vairable dentro de la funcion, entonces js buscara la variable en el scope de quien llamo la funcion, en este caso window ejemplo:
Código :
var icon = 'images/default.png';
function twitterIcon(userId)
{
if (userId)
{
return 'images/' + userId + 'icon.png';
}
//como no esta definido se busca en el scope de quien llamo la funcion, al ser window, entonces icon es window.icon
return icon;
}
// como se pega al scope de window lo siguiente es true
console.log(icon == window.icon);
// retorna images/default.png
console.log(twitterIcon());
// retorna true, sigue siendo el valor de un inicio por que no se modifico la variable
console.log(icon == 'images/default.png');
Este problema te puede perseguir por todo el codigo si no tienes cuidado, se han modificado variables de la nada sin que tu lo hayas ordenado? Probablemente el problema es que una funcion lo esta modificando por que no encontro su variable en el scope, en el anterior ejemplo mostre algo que podria ser util, ahora aqui abajo viene algo que puede ser una conducta inesperada.
Se nos olvido declarar icon dentro de la funcion (falto el var), pero que tan malo puede ser?
Código :
var icon = 'images/default.png';
function twitterIcon(userId)
{
//como no esta definido se busca en el scope de quien llamo la funcion, al ser window, entonces icon es window.icon, y esa fue la variable que se modifico
icon = 'images/twitter.png';
if (userId)
{
return 'images/' + userId + 'icon.png';
}
//como no esta definido se busca en el scope de quien llamo la funcion, al ser window, entonces icon es window.icon
return icon;
}
// como se pega al scope de window lo siguiente es true
console.log(icon == window.icon);
// retorna images/default.png
console.log(twitterIcon());
// retorna false, pues dentro de la funcion se modifico, y ahora es 'images/twitter.png'
console.log(icon == 'images/default.png');
Como pueden ver al llamar la funcion cambio el valor de la variable en el scope de window, y si pensabamos que tenia el valor original nos llevaremos una amarga sorpresa y un bug que sera dificil de encontrar. Es por eso que debemos entender los scopes para evitar resultados inesperados y posibles bugs. Para finalizar debo aclarar que no es muy bueno dejar variables en el window scope, por que otros podrian modificarlas, esa es parte del problema por el cual 2 librerias no pueden trabajar juntas como jquery que usa $ y otras que usan $, afortunadamente jQuery tiene una funcion llamada noConflict con lo cual ya no usa $ sino jQuery asi que en vez de escribir $('#msg') seria jQuery('#msg'), en el ejemplo anterior podria haber hecho esto
Código :
var PATHS = {};
PATHS.icon = 'images/default.png';
function twitterIcon(userId)
{
//como no esta definido se busca en el scope de quien llamo la funcion, al ser window, al no encontrar esto es un error que aparecera en la consola
icon = 'images/twitter.png';
if (userId)
{
return 'images/' + userId + 'icon.png';
}
//como no esta definido se busca en el scope de quien llamo la funcion, al ser window, entonces icon es window.icon
return icon;
}
// undefined pues la vairable ya no esta en window, sino en window.PATHS
console.log(window.icon);
// retorna 'images/default.png'
console.log(window.PATHS.icon);
// causa errror que aparecera en la consola y sera facil de debugear
console.log(twitterIcon());
Pero eso significa que nadie puede modificar el valor? No pero significa que cuando quieras modificarlo tendras que hacer PATHS.icon, haciendote mas conciente de lo que haces, y evitando que cometas un error simplemente por no agregar var, basicamente asi modificas el valor solo cuando quieres y no inesperadamente, excelente para los que inician en javascript
