Alcance en Javascript

El alcance determina la accesibilidad (visibilidad) de las variables.

Funciones de alcance en Javascript

En Javascript hay dos tipos de alcance:

  • Alcance local
  • Alcance global

JavaScript tiene un alcance de función: cada función crea un nuevo alcance. El alcance determina la accesibilidad (visibilidad) de estas variables. Las variables definidas dentro de una función no son accesibles (visibles) desde fuera de la función.

Variables locales en Javascript

Las variables declaradas dentro de una función, se convierten en LOCAL para la función. Las variables locales tienen ámbito de función: solo se puede acceder a ellas desde dentro de la función.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
<h2>Alcance Javascript</h2>
<p>Fuera de myFunction() carName no está definido</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>
myFunction();

function myFunction()
{
var carName = "Volvo";
document.getElementById("demo1").innerHTML = typeof carName + " " + 
carName;
}
document.getElementById("demo2").innerHTML = typeof carName;
</script>
</body>
</html>

Dado que las variables locales solo se reconocen dentro de sus funciones, las variables con el mismo nombre se pueden usar en diferentes funciones.

Las variables locales se crean cuando se inicia una función y se eliminan cuando se completa la función.

Variables Javascript globales

Una variable declarada fuera de una función es una variable GLOBAL. Una variable global tiene un alcance global, por lo que todos los scripts y funciones de una página pueden acceder a ella.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
<h2>Alcance Javascript</h2>

<p>Una variable global puede ser accedida por cualquier script o función</p>

<p id="demo"></p>

<script>
var carName = "Volvo";
myFunction();

function myFunction()
{
document.getElementById("demo").innerHTML = "Se puede mostrar" + carName;
}
</script>
</body>
</html>

Variables Javascript

En Javascript, los objetos y funciones son también variables. El alcance determina la accesibilidad de variables, objetos y funciones de diferentes partes del código.

Automáticamente global

Si asignas valor a una variable que no ha sido declarada, automáticamente será una variable global. Veamos el siguiente ejm.

Ejm

<!DOCTYPE html>
<html>
<body>

<p>If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable:</p>

<p id="demo"></p>

<script>
myFunction();
// code here can use carName as a global variable
document.getElementById("demo").innerHTML = "I can display " + carName;
function myFunction() {
carName = "Volvo";
}
</script>

</body>
</html>

Modo estricto

Todos los navegadores modernos soportan Javascript en modo estricto. En “Modo estricto”, las variables no declaradas no son automáticamente globales.

Variables globales en HTML

Con JavaScript, el alcance global es el entorno completo de JavaScript.

En HTML, el ámbito global es el objeto window. Todas las variables globales pertenecen al objeto window.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Scope</h2>

<p>In HTML, global variables defined with <b>var</b>, will become window variables.</p>

<p id="demo"></p>

<script>
var carName = "Volvo";

// code here can use window.carName
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>

</body>
</html>

Peligro

NO crees variables globales a menos que tenga la intención de hacerlo.

Tus variables (o funciones) globales pueden sobrescribir las variables (o funciones) window.
Cualquier función, incluido el objeto window, puede sobrescribir sus variables y funciones globales.

El tiempo de vida de las variables en Javascript

La vida útil de una variable de JavaScript comienza cuando se declara. Las variables locales se eliminan cuando se completa la función. En un navegador web, las variables globales se eliminan cuando cierra la ventana (o pestaña) del navegador.

Argumentos de función

Los argumentos de las funciones (parámetros) funcionan como variables locales dentro de las funciones.