78

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

15627Puntos

hace 4 años

Fundamentos de JavaScript 2017
Fundamentos de JavaScript 2017

Fundamentos de JavaScript 2017

Domina JavaScript, el lenguaje más versátil y demandado de la actualidad. Trabajarás en más de 20 proyectos para entender y construir con JavaScript desde cero.

¿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.

Fundamentos de JavaScript 2017
Fundamentos de JavaScript 2017

Fundamentos de JavaScript 2017

Domina JavaScript, el lenguaje más versátil y demandado de la actualidad. Trabajarás en más de 20 proyectos para entender y construir con JavaScript desde cero.
Fannytaviles
Fannytaviles
fannytaviles

15627Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
5
1247Puntos

Excelente 😄 me lo aclaraste completamente!

4
14332Puntos

Muy buen post ! Podrías también explicar el concepto de this, creo que es también un apartado importante y complicado de JS.

3
15627Puntos
4 años

Claro que sí, puedo explicar un poco cómo funcionan los constructores en javascript 😉 lo tendré presente.

3
5089Puntos

Excelente Post. El concepto no solo aplica para JavaScript. Aplica para la mayoria de Lenguajes, a esto se le llama Variables Locales y Globales y su Alcance. Aprendi Esto por primera vez con C++! Saludos

0
15627Puntos
4 años

Tienes razón. El término existe en más lenguajes de programación aunque la forma de aplicarlo puede variar.

2
16417Puntos

Excelente post con ejemplos muy precisos para entender el ámbito de las variables, saludos.

1
15627Puntos
4 años

Qué cool que lo hayas entendido 😄

1
1302Puntos

Muy bien, excelente.
Para aclarar:

  • let significa que el identificador puede ser reasignado

  • const significa que el identificador no puede ser reasignado.

1
15627Puntos
4 años

Justo eso, const es una constante y let una variable

0
4 años

Claro como el agua.
Pero me costó entenderlo.
Recién ahora lo manejo mejor.
Mil gracias

1
9283Puntos

buenísimo post, gracias!

1
2743Puntos

Muchas gracias por la explicación fue realmente clara.

1
6980Puntos

Gracias. Me ayudó a aclararme con el tema.

1

Excelente tutorial. Conceptos claros y bien documentados.
Congratulations!

0
15627Puntos
4 años

Me da gusto que te haya agradado Germán 😃

1
7134Puntos

Gracias fue una muy buena explicación.

1
4771Puntos

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

🙂

1
9644Puntos

Buena explicacion 😄

1
12823Puntos

Mavarilloso tutorial!!! te felicito!

1
18017Puntos

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.

0
3112Puntos

Muy buena esta explicación, muchas gracias 😃

0
9644Puntos

woah

0
323Puntos

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

0
9644Puntos

y en un articulo del 2017 D:

0
9644Puntos
4 meses

vaya que ya es mucho tiempo 😄