Tutorial de JavaScript : Conceptos

Las variables locales se definen dentro de una función y solo se tiene acceso dentro de la misma función. Una variable local se la define antecediendo la palabra clave var al nombre de la variable.

<html>
<head>
</head>
<body>

<script type="text/javascript">

  function imprimir()
  {
    var x=10;
    document.write(x);
  }

  imprimir();

</script>

</body>
</html>

Luego decimos que x es una variable local que solo se la puede acceder dentro de la función imprimir. Si intentamos acceder a la variable x fuera de la función se produce un error en tiempo de ejecución:

<script type="text/javascript">

  function imprimir()
  {
    var x=10;
    document.write(x);
  }

  imprimir();
  document.write(x);  //error en tiempo de ejecución

  </script>

Las variables globales son las que definimos fuera de cualquier función. Una variable global tenemos acceso fuera y dentro de las funciones:

<html>
<head>
</head>
<body>

<script type="text/javascript">

  function imprimir()
  {
    document.write(global1+'<br>');  // muestra un 100
    global1++;
  }

  var global1=100;
  imprimir();
  document.write(global1);  // muestra un 101

</script>

</body>
</html>

Como podemos observar el programa anterior hemos definido la variable global1 e inicializado con el valor 100. Luego dentro de la función podemos acceder para imprimirla y modificarla. Podemos ver luego si la accedemos fuera de la función su valor fue modificado.

Todas las variable globales se convierten en atributos del objeto window, luego podemos acceder a la variable por su nombre o antecediendo el nombre del objeto:

<html>
<head>
</head>
<body>

<script type="text/javascript">

  var global1=100;
  document.write(global1+'<br>');        //100
  document.write(window.global1+'<br>'); //100

</script>

</body>
</html>

Cuidado

Cuando definimos variables locales dentro de una función tenemos que no olvidarnos de anteceder al nombre de la variable la palabra var, en caso de olvidarnos se creará automáticamente una variable global con dicho nombre:

<html>
<head>
</head>
<body>

<script type="text/javascript">
  
  function imprimir()
  {
    x=100;
    document.write(x+'<br>');
  }

  imprimir();
  document.write(x+'<br>');
  
</script>

</body>
</html>

En el ejemplo superior en la función imprimir se está creando una variable global llamada x. Como podemos ver luego fuera de la función cuando imprimimos x vemos que no produce error y muestra el valor 100. Con solo agregar la palabra clave var vemos que nos muestra un mensaje de error al tratar de acceder a una variable inexistente:

  function imprimir()
  {
    var x=100;
    document.write(x+'<br>');
  }

  imprimir();
  document.write(x+'<br>');

El JavaScript moderno introduce una directiva para salvar este y otros problemas muy comunes. Si activamos modo estricto todas las variables en JavaScript deben declarase sino se produce un error. Veamos como introducimos esta directiva de modo estricto:

<html>
<head>
</head>
<body>

<script type="text/javascript">
  
  'use strict';

  function imprimir()
  {
    x=100; //error
    document.write(x+'<br>');
  }

  imprimir();
  document.write(x+'<br>');
  
</script>

</body>
</html>

La directiva de modo estricto se emplea las palabras claves use strict entre comillas simples o dobles y un punto y coma. Solo los navegadores modernos implementan los análisis de modo estricto.

La razón de disponer la directiva entre comillas y con un punto y coma es para que navegadores antiguos pasen por alto el string (ya que el string no se asigna a nadie el navegador antiguo no lo tiene en cuenta)

Activando el modo estricto luego cuando tratamos de asignar el valor 100 a la variable x se produce un error ya que no se nos permite crear una variable global (esto nos evita problemas de crear variables globales en funciones por error)

Funciones: variables locales y variables globales

Retornar