142

Qué es y cómo funciona el scope en JavaScript

16158Puntos

hace 5 años

¿Qué es el scope en JavaScript?

El scope puede definirse como el alcance que una variable tendrá en tu código. En otras palabras, el scope decide a qué variables tienes acceso en cada parte del código. Existen dos tipos de scope, el scope global y el scope local. A continuación te mostraré un par de ejemplos explicando en qué consiste cada uno de ellos.

Qué es el Scope Local

Cuando puedes acceder a una variable únicamente en cierta parte del código, se dice que esa variable está declarada en el scope local. Estas también son conocidas como variables locales. Un ejemplo de esto es cuando una variable está declarada dentro de un bloque o una función. Si tratas de acceder a esta variable fuera de esta función o bloque, tendrás un error que dirá que la variable no está definida.

functionplatzi() {
	const soyEstudiante = true;
	console.log(soyEstudiante);
}

platzi(); // trueconsole.log(soyEstudiante); // soyEstudiante is not defined

Qué es el Scope Global

Se dice que una variable está en el sope global cuando está declarada fuera de una función o de un bloque. También son conocidas como variables globales. Puedes acceder a este tipo de variables desde cualquier parte de tu código, ya sea dentro o fuera de una función.

const soyEstudiante = true;

functionplatzi() {
	console.log(soyEstudiante);
}

platzi(); //trueconsole.log(soyEstudiante); //true

A pesar de que JavaScript nos permite declarar una variable como global, no es una buena práctica. Una de las razones es porque tenemos la posibilidad de declarar dos variables globales en distintas partes del código con el mismo nombre sin notarlo.

Diferencias entre let, const y var

  • Variables declaradas con let o const. Cuando declaramos una variable let o const dentro de un bloque, el alcance o scope que tendrá será sólo dentro de ese bloque. Además, si existe una colisión de nombres entre dos variables let o const recibiremos un mensaje de error. Esto hace que seamos menos susceptibles a cometer errores al utilizarlas, es por esto que desde que salió ES6 es más recomendable utilizar let o const a la hora de declarar una variable en lugar de usar var.
let platzi = 'Esto está fuera del bloque';

if (true) {
	let platzi = 'Esto está dentro del bloque';
	console.log(platzi); //Esto está dentro del bloque
}

console.log(platzi) //Esto está fuera del bloque

Como podemos ver en el código anterior 👆🏻, aún y cuando declaré dos variables con el mismo nombre no se pisaron, ya que una de ellas está declarada dentro de un bloque y sólo es posible acceder a su valor dentro de éste. Por otro lado, si ambas variables estuvieran declaradas dentro del mismo scope, un mensaje de error sería mostrado en nuestra consola.

let platzi = 'Esto está afuera del bloque';

if (true) {
	...
}

let platzi = 'Misma variable declarada dos veces'; // Error, platzi has already been declared
  • Variables declaradas con var. Si en los ejemplos anteriores, cambiamos las variables declaradas con let por variables declaradas con var, su valor sí se va a rescribir. Obviamente no es nada recomendable utilizar este tipo de variables porque puede ser más susceptible a bugs.
var platzi = 'Esto está afuera del bloque';

if (true) {
	var platzi = 'Esto está dentro del bloque';
	console.log(platzi); //Esto está dentro del bloque
}

console.log(platzi); //Esto está dentro del bloque

Otros ejemplos

Puede ser común también que tengas una función dentro de otra. En este caso, la función que está por fuera no tendrá acceso a las variables que se encuentran en la función de adentro, sin embargo, la función de adentro sí tendra acceso a las variables que se encuentran declaradas en la función de afuera.

functionafuera() {
	let variable_afuera = 'Esta variable está declarada afuera';

	functionadentro() {
		let variable_adentro = 'Esta variable está declarada adentro';
		console.log(variable_afuera); // Esta variable está declarada afuera
	}

	console.log(variable_adentro); // variable_adentro is not defined
}

En conclusión, el término scope no es tan extremadamente difícil de entender, es simple una vez que sabes la diferencia entre los distintos tipos que existen. Recuerda: cuando declaras una variable en una función sólo podrás acceder a su valor dentro de esa función. Si después de haber leído este tutorial sigues confundido con este concepto, no dudes en dejar tus preguntas en los comentarios.

Aprende más: ¿Qué son variables y constantes?

asdad
asdad
fannytaviles

16158Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
17
21775Puntos

Llegué a esta entrada luego de haber tomado la clase de scope del curso de JS Básico, y el ejemplo que más me funcionó es este: la variable local es como algo que está en tu casa, la variable global es algo que está en la calle: desde tu casa puedes ver lo que está adentro Y lo que está en la calle, pero desde la calle no puedes ver lo que hay dentro de tu casa.

1
10348Puntos
2 meses

Muy buen ejemplo

2
16367Puntos

Este término me pareció complejo cuando Freddy lo comento en el primer curso básico de programación, pero lo explicaste muy bien, por el momento no tengo dudas.

Muchas gracias.

1
5405Puntos

Muy buen aporte muchas gracias 💚 Eres lo maximo!

1
11Puntos

Very well information, thanks you ❗

1
2102Puntos

vengo de la ruta de algoritmos y pensamiento lógico y wow es increíble como algo tan simple como un try…catch me trajo asta aquí… Y mas cuando la lectura me da sueño pero leyendo artículos sobre programación no siento en que momento se me va el tiempo. Gracias por tu aporte me fue muy útil

1
5739Puntos

Si, la verdad es que esta muy bien explicado, incluir el código para observarlo es una gran idea

🙂

1
26897Puntos

Gracias. Me ayudó a aclararme con el tema.

1
10945Puntos

Buena explicacion 😄

1
9423Puntos

buenísimo post, gracias!

1
5995Puntos

Muchas gracias por la explicación fue realmente clara.

1
15710Puntos

Mavarilloso tutorial!!! te felicito!

1
16173Puntos

Gracias fue una muy buena explicación.

0
832Puntos

fanny con todo respeto, te vez divina en tu foto de perfil.

0
10945Puntos

y en un articulo del 2017 D:

0
10945Puntos
2 años

vaya que ya es mucho tiempo 😄

0
10945Puntos

woah

0
5357Puntos

Muy buena esta explicación, muchas gracias 😃