ProgramaciónJavaScript4. Scope

Determina el conjunto de variables que podemos acceder. JavaScript tiene Scope Léxico (Lexical Scoping). El scope de cada variable se determina leyendo el código del programa, sin ejecutarlo. Cuando hablamos de Scope nos referimos al entorno.

function teamCap () {
    var heroe = "Capitan America";
    console.log(heroe);
    // Capitan America
}

function teamIronMan () {
	var heroe = "Iron Man";
    console.log(heroe);
    // Iron Man
}

En cada función héroe significa algo diferente

En JavaScript tenemos diferentes Scope

  • Local Scope: Son aquellas variables definidas dentro del cuerpo de la función, estas son solo accedidas desde dentro de la misma función.

  • Global Scope: Pueden ser accedidas desde un scope local o global. Las variables globales son definidas fuera de las funciones.

    Variables que pueden ser accedidas y procesadas por cualquier función dentro del código. Cuando declaramos fuera de toda función o bloque de código.

    var comic = 'X-Men';
    
    function comprar() {
    	console.log("Compraste el comic ${comic}");
    	// Compraste el comic X-Men
    }
    
    function leer() {
    	console.log("Estas leyendo ${comic}");
    	// Estas leyendo X-Men
    }
    
    comprar();
    leer();
    

    La variable comic se podrá usar a lo largo de todo nuestro programa

  • Block Scope: Puede ser un if, while, for, etc. Es decir que están entre llaves

    function mutantes() {
    	const mutante = 'Wolverine';
    	if(true){
    		// Esta variable se quedara solo entre estas llaves
    		const mutante = 'Ciclope';
    		console.log(mutante);
    		// Ciclope
    	}
    	
    	console.log(mutante);
    	// Wolverine
    }
    
  • Function Scope: Accesibles dentro de toda la funcion, pero no fuera de la misma

function justiceLeague() {
    var heroes = ['Batman', 'Superman', 'Aquaman'];
    console.log(heroes);
    // ['Batman', 'Superman', 'Aquaman']
}

function teenTitans() {
    var heroes = ['Robin', 'Raven', 'Terra'];
    console.log(heroes);
    // ['Robin', 'Raven', 'Terra']
}
console.log(heroes);
// ReferenceError: heroes is not defined

Para evitar que las funciones se vuelvan impredecibles debemos declarar dentro del scope mas adecuado.

Built with LogoFlowershow