Tutorial JS

JS INICIO JS Introducción JS Dónde Salida JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS JS Vamos Constante JS Operadores JS Aritmética JS Tarea JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadena JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matriz JS Iteración de matriz JS Constante de matriz JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Matemáticas JS JS al azar Booleanos JS Comparaciones JS Condiciones JS Interruptor JS Bucle JS para Bucle JS para entrada Bucle JS para de Bucle JS mientras descanso JS Iterables JS Conjuntos JS Mapas JS JS Tipo de Conversión de tipo JS JS bit a bit JS expresión regular Errores JS Alcance JS JS Elevación Modo estricto JS JS esta palabra clave Función de flecha JS Clases JS JSJSON Depuración JS Guía de estilo JS Prácticas recomendadas de JS Errores JS Rendimiento JS Palabras reservadas de JS

Versiones JS

Versiones JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Borde Historia de JS

Objetos JS

Definiciones de objetos Propiedades del objeto Métodos de objetos Visualización de objetos Accesores de objetos Constructores de objetos Prototipos de objetos Objeto iterables Conjuntos de objetos Mapas de objetos Referencia de objeto

Funciones JS

Definiciones de funciones Parámetros de función Invocación de funciones Llamada de función Función Aplicar Cierres de funciones

Clases JS

Introducción a la clase Herencia de clase Clase estática

JS asíncrono

Devoluciones de llamada JS JS asíncrono Promesas JS JS asíncrono/espera

JS HTML DOM

Introducción al DOM Métodos DOM Documento DOM Elementos DOM DOM HTML Formularios DOM DOM CSS Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos DOM

Lista de materiales del navegador JS

Ventana JS Pantalla JS Ubicación de JS Historia de JS Navegador JS Alerta emergente JS Tiempo JS Galletas JS

API web de JS

Introducción a la API web API de formularios web API de historial web API de almacenamiento web API de trabajo web API de búsqueda web API de geolocalización web

JS AJAX

Introducción a AJAX AJAX XMLHttp Solicitud AJAX Respuesta AJAX Archivo XML AJAX AJAXPHP Ajax ASP Base de datos AJAX Aplicaciones AJAX Ejemplos de AJAX

JSJSON

Introducción JSON Sintaxis JSON JSON frente a XML Tipos de datos JSON Análisis JSON Cadena JSON Objetos JSON Matrices JSON Servidor JSON JSONPHP JSONHTML JSON JSONP

JS frente a jQuery

Selectores jQuery HTML de jQuery CSS de jQuery DOM de jQuery

Gráficos JS

Gráficos JS Lienzo JS JS Trazado Gráfico JS.js Gráfico de Google JS JS D3.js

Ejemplos de JS

Ejemplos de JS JS HTML DOM Entrada HTML JS Objetos JS HTML Eventos JS HTML Navegador JS Editor JS Ejercicios JS Prueba JS Certificado JS

Referencias JS

Objetos JavaScript Objetos HTML DOM


Ámbito de JavaScript

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

JavaScript tiene 3 tipos de alcance:

  • Ámbito de bloque
  • Alcance de la función
  • Alcance global

Ámbito de bloque

Antes de ES6 (2015), JavaScript solo tenía Global Scope y Function Scope .

ES6 introdujo dos nuevas e importantes palabras clave de JavaScript: lety const.

Estas dos palabras clave proporcionan Block Scope en JavaScript.

No se puede acceder a las variables declaradas dentro de un bloque { } desde fuera del bloque:

Ejemplo

{
  let x = 2;
}
// x can NOT be used here

Las variables declaradas con la varpalabra clave NO pueden tener alcance de bloque.

Se puede acceder a las variables declaradas dentro de un bloque { } desde fuera del bloque.

Ejemplo

{
  var x = 2;
}
// x CAN be used here

Ámbito Local

Las variables declaradas dentro de una función de JavaScript se vuelven LOCALES para la función.

Ejemplo

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Las variables locales tienen alcance de función :

Solo se puede acceder a ellos desde dentro de la función.

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.


Alcance de la función

JavaScript tiene un alcance de función: cada función crea un nuevo alcance.

Las variables definidas dentro de una función no son accesibles (visibles) desde fuera de la función.

Las variables declaradas con var, let y constson bastante similares cuando se declaran dentro de una función.

Todos ellos tienen alcance de la función :

function myFunction() {
  var carName = "Volvo";   // Function Scope
}
function myFunction() {
  let carName = "Volvo";   // Function Scope
}
function myFunction() {
  const carName = "Volvo";   // Function Scope
}

Variables globales de JavaScript

Una variable declarada fuera de una función, se convierte en GLOBAL .

Ejemplo

let carName = "Volvo";
// code here can use carName

function myFunction() {
// code here can also use carName
}

Una variable global tiene alcance global :

Todos los scripts y funciones de una página web pueden acceder a ella. 


Alcance global

Las variables declaradas Globalmente (fuera de cualquier función) tienen Alcance Global .

Se puede acceder a las variables globales desde cualquier lugar en un programa de JavaScript.

Las variables declaradas con var, let y constson bastante similares cuando se declaran fuera de un bloque.

Todos tienen Alcance Global :

var x = 2;       // Global scope
let x = 2;       // Global scope
const x = 2;       // Global scope

Variables JavaScript

En JavaScript, los objetos y las funciones también son variables.

El alcance determina la accesibilidad de variables, objetos y funciones desde diferentes partes del código.



Automáticamente globales

Si asigna un valor a una variable que no ha sido declarada, automáticamente se convertirá en una variable GLOBAL .

Este ejemplo de código declarará una variable global carName, incluso si el valor se asigna dentro de una función.

Ejemplo

myFunction();

// code here can use carName

function myFunction() {
  carName = "Volvo";
}

Modo estricto

Todos los navegadores modernos admiten la ejecución de JavaScript en "Modo estricto".

Aprenderá más sobre cómo usar el modo estricto en un capítulo posterior de este tutorial.

En el "Modo estricto", las variables no declaradas no son automáticamente globales.


Variables globales en HTML

Con JavaScript, el ámbito global es el entorno de JavaScript.

En HTML, el alcance global es el objeto de ventana.

Las variables globales definidas con la varpalabra clave pertenecen al objeto ventana:

Ejemplo

var carName = "Volvo";
// code here can use window.carName

Las variables globales definidas con la letpalabra clave no pertenecen al objeto ventana:

Ejemplo

let carName = "Volvo";
// code here can not use window.carName

Advertencia

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

Sus variables globales (o funciones) pueden sobrescribir variables de ventana (o funciones).
Cualquier función, incluido el objeto de la ventana, puede sobrescribir sus funciones y variables globales.


La vida útil de las variables de JavaScript

La vida útil de una variable de JavaScript comienza cuando se declara.

Las variables de función (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 función (parámetros) funcionan como variables locales dentro de las funciones.