Entiende el scope de las variables

Clase 14 de 51 • Fundamentos de JavaScript 2017

Resumen

Escope es el conjunto de variables y funciones que podemos llamar en una parte del código

Si definimos una variable en el scope global (window en el navegador) podemos acceder a ella dentro de cualquier lugar del código.

Si definimos una variable dentro de una función solo lo podemos utilizar dentro de esa función si lo declaramos con var, si lo declaramos con let solo podemos acceder a ella en el bloque de código.

Javier Albadan

student•

Estuve buscando respecto al término que utilizó Sacha, y se denomina HOISTING. Aquí un artículo al respecto para profundizar! http://funnyfrontend.com/variables-javascript/

Fernando Espinoza

student•

Muy interesante el articulo y sobre este tema del HOISTING 😄

Alberto Hernández López

student•

Un articulo muy completo, gracias por el aporte

Julio J Yépez

student•

Al scope también se le conoce como ámbito, contexto o alcance.

Elvis Milan

student•

Exactamente mi kerido watson

Joaquin Garcia Real Joya

student•

Como entender el Scope de Javascript

Para todos aquellos que no logran entender del todo el Scope, aqui les dejare un ejemplo y más recursos en donde encontrarán más información sobre el Scope:

//Burbuja 1

function foo(a) {
	//Burbuja 2
	var b = a * 2;
	function bar (c) {
		//Burbuja 3
		console.log(a,b,c);
	}

	bar(b * 3)
}

foo(2); // 2 , 4, 12

Los Scopes de este código funcionan de la siguiente manerá:

Burbuja 1 engloba el Scope Globlal (windos.ejemplo), y este tiene solo una variable(por asi llamarlo, o un identifier): foo.

Burbuja 2 engloba el Scope de foo y este tiene tres variables: a, bar y b.

Burbuja 3 engloba el Scope de bar y este tiene solo una variable; c.

Esto quiere decir que cada burbuja o Scope son definidas dependiendo de en que bloque del Scope son escritas.

Otro concepto muy importante que tienen que saber como puedes usar las variables dentro de los Scopes. Para esto quiero usar una clase de antología divertida que nos ayude a entender:

Imaginen que un Padre y su hijo van juntos a comprar galletas, galletas de chocolate para el padre y de fresa para el hijo. El padre como bueno que es comparte de sus galletas con el hijo, pero el hijo como es malo, no le gusta compartir con su padres de sus galletas.

Esto como se traduce en código?

function padre() {
	var galletasDeChocolate = 'galletas de papá';

	function hijo() {
		var galletasDeFresa = 'galletas del hijo'
		console.log(galletasDeChocolate)
	}
	hijo()
	console.log(galletasDeFresa)

}

padre() 
//Galletas de Papá
// galletasDeFresa is **not defined at padre**

Como ven el hijo es un poco envidioso con el padre, pero el padre no lo es y siempre comparte con su hijo de sus galletas.

El concepto de Scope es un poco complicado al inicio, pero como ven, no es tan intimidante como parece, pero si realmente quieren aprender como funciona, les dejo los siguientes links para que puedan entenderlo aún mejor:

Libro You Don’t Know JS (https://github.com/getify/You-Dont-Know-JS/blob/master/scope %26 closures/ch1.md).

Este capitulo en especial de YDKJS te enseña muy a fondo como funciona, explicando desde como se complia el codigo (Javascript si se compila a su nivel), como funciona el Scopre y los errores que pueden surgir al escribir código, muy recomendado.

**Javascript Scope Tutorial - What Makes Javascript Weird…and Awesome **(https://www.youtube.com/watch?v=SBwoFkRjZvE)

Este video, te da una explicación más corta, pero muy enfocada a como funciona el Scope.

Understanding Scope in Javascrip (https://scotch.io/tutorials/understanding-scope-in-javascript)

Este es un artículo muy muy completo sobre como el Scope funciona, y asi mismo como funciona: The context, The Execution Context, The Lexical Scope, The Public and Private Scope, etc.

Les recomiendo leer y ver todos los videos, para entender como funciona un concepto tan core de Javascript, como lo es el Scope, esto les ayudará a escribir mejor código y código más eficiente.

Espero les sirva de ayuda este pequeño comentario. Si tienen alguna duda no duden en contactarme, de igual manera si ustedes conocen otro artículo o video que nos pueda ayudar a todos, dejalo en un comentario.

Muchas gracias, Saludos :cat

Jorge Toledano

student•

¡Muchas gracias, joaquinjoya! He estado batallando con este tema y creo que por fin empiezo a ver claro.

David Santiago González Ramos

student•

Felicitaciones @slifszyc, muy buena y clara tu explicación! Personalmente es uno de los temas que más me ha costado entender, pero con esta clase ya me queda muy claro el scope de las variables.

Wiliam Quispe

student•

El scope, también llamado contexto o alcance, es el ámbito que tienen las variables para poder ser utilizadas, depende mucho de con qué palabra reservada (let, var, const) se declaren las variables para que éstas pueden tener un comportamiento determinado en los scopes.

Var: Con var existe algo llamado hoisting, que consiste en que las variables se “elevan” al principio de la función en donde fueron declaradas, incluso si fueron declaradas dentro de un scope, lo que hace var es declarar esa variable al principio de la función.
Let: let es la forma correcta con la que debemos de declarar las variables, ya que respeta el scope y no genera información innecesaria
Const: const es la palabra ideal que representa que un programador tiene el cuidado y el conocimiento necesario para poder declara una variable que no va a cambiar.

En conclusión, lo ideal es saber qué usar en base a nuestras necesidades, pero lo que si es cierto es que no se recomienda usar var.

Ignacio Esteban Aredez Diaz

student•

Importante

Recordar utilizar const si la variable no va a cambiar

Alexis Antonio Moraga Gallardo

student•

Hola les comparto mi repositorio en GitHun con el avance del curso

Repositorio

/*Scope
Que es el scope y para que sirve

el scope es basicamente el alcance de una variable, y por ende desde donde podemos accesar a ella
para explicar mejor usaremos algunos ejemplos

-> Scope global. es cuando declaramos una variable fuera de cualquier funcion o metodo
   esta variable puede ser accesada desde dentro de cualquier funcion que nosotros creemos

-> podemos acceder al scope global desde cualquier funcion cuando usamos variables de tipo var, pero con esto
   contaminamos el scope global, y esto es algo que devemos evitar.

-> para evitar contaminar el scope global podemos usar variables de tipo let o constantes
*/


var nombre = `Alexis`//creamos una variable con scope global

function saludar(){
  console.log(`Hola ${nombre} como estas`)
  //estamos accediendo a la variable nombre, que se encuentra en scope global
}


//Ejemplo 02 Scole local
function saludoar2(){
  var nombre =`antonio`//scope local, a pesar de que en el scope global tenemos una variable llamada nombre
  //con el valor de alexis, esta funcion imprimira el nombre antonio, ya que en el scope local de esta funcion
  //existe otra variable llamada nombre con el valor antonio
  console.log(`Hola ${nombre} como estas`)
}


//Ejemplo 3 Cambiando el scope global desde una funcion
function saludar3(){
  nombre = `pedro`//si no usamos la palara reservada var, javascript esta buscando la declaracion de la variable nombre un escalon mas arriba
  //y nos permite cambiar el valor de una variable almacenada en el scope global
  console.log(`Hola ${nombre} como estas`)
  //esta funcion imprimira pedro, ya que al no usar la palabra reservada var javascript salto al scope global y modifico la variable nombre que estaba en el scope global
}

//ejemplo 04 contaminando el scope

function saludar4(){
  var nombre2 = `pablo`
  for (var i = 0; i < 10; i++) {//creamos un ciclo que iterara 10 veces
  console.log(`Hola  ${nombre2}`)
  }
console.log(i)//desde acae podemos acceder al scope de la variable i que usamos oara iterar en el ciclo
// esto deveriamos evitarlo, y para eso usamos la palara resercada let, que nos permite declarar variables que no salgan de su scope
}

//Ejemplo 05 usando let y const para no contaminar el scope

function saludar4(){//seguimos el ejemplo anterior, pero en esta ocacion usaremos let para no contaminar el scope de la funcion con la variable i
  const nombre2 = `pablo`//es una buena practica usar constantes para aquellas variables que no seran modificadas durante la ejecucion
  for (let i = 0; i < 10; i++) {
  console.log(`Hola  ${nombre2}`)
  }
console.log(i)//ya no podemos accesar al scope de la variable y, ya que ahora es una variable local de la funcion que estamos usando
}```

Víctor Rueda

student•

Desde un punto de vista de arquitectura del software, no tiene lógica que la variable x del bucle siga existiendo más allá de éste, contaminando el contexto global.

Diego Forero

Team Platzi•

Por esto en ecmascript 6 apareció let y const, let permite definir variables que respetan el scope de donde son definidas, const permite definir constante ya que esto no existía en JavaScript.

LUIS JAVIER BAUTISTA BARAHONA

student•

Scope Conjunto de variables y funciones al cual podemos acceder en una determinada linea de código

Closures Funciones que recuerdan el scope (encotorno) en el que fueron creadas y pueden acceder a todas la variables y funciones que pertenecen a ese scope pero con los valores que tienen al momento en que se invoca ese closure

**Let ** permite asignar valor a nuestras variables con visibilidad / validez únicamente dentro del contexto (llaves {}) en el que se ha definido.

hoisting Las variables JavaScript pueden hacer referencia a una variable declarada más tarde, sin obtener un error. Este concepto es conocido como hoisting, es decir, una variable declarada se “eleva” o “sube” a la parte superior de la función (closure) en la que se encuentra, independientemente de donde la declaremos.

Joshua Hernán Gómez Torres

student•

Estimados en el minuto 02:43 hay un salto en el vídeo, por favor revisar, saludos!

Yeison Daza

student•

Gracias por reportar, lo estamos solucionando

Javier Sain Osorno Aguirre

student•

En cada situación que se presente dentro de la programación de
javascript se debe tener en cuenta que tipo de variable vamos a manejar
para evitar errores de programación y utilizar al máximo todas las características del
lenguaje, saber también cuando es necesario usar let o** const** y ademas tener muy claro las consecuencias del uso de var

Luis Felipe Silgado Cortázar

student•

Me ha surgido una duda no relacionada con esto del scope, pero que hasta ahora no había visto y es que no usas ’ ; ’ en el código, acaso esto ya no es necesario? como hace el compilador para saber cuando acaba una instrucción?

Yeison Daza

student•

Justo un par de vídeos más adelante, Sacha explica esto

Victor Alfonso Caballero Cabrera

student•

@yeison spoilea normal xD

Noe Mikhael Huaccharaque Ruiz

student•

👀lo que diferencia de programador a otro es en como utiliza bien las caracteristicas de cada lenguaje y su 🙃creatividad tmb

Felipe Osorio

student•

Minuto 1:50 estoy mas que seguro que en otros lenguajes de programación si se puede hacer, de hecho en Python es algo muy común.

# Python 3
name = 'Andres'

def saludation():
	return name

saludation()

Harold Sánchez

student•

Excelente @slifszyc queda muy claro el tema del Scope, lo nuevo de Javascript y el diferenciador entre un buen desarrollador, el cual es utilizarlos y saber como hacerlo.

Luis Fernando Niño Gonzalez

student•

Hoisting es una propiedad de JS que declara al principio las variables de cada bloque para que puedan estar disponibles, siempre y cuando este con var

buena practica declarar variables con let y const

Michael Bolaños Vargas

student•

Hay algo que podria tender a confundir, en el siguiente codigo, muestra i = undefined… a pesar que este declarado una linea posterior. Entonces lo se dice en el video acerca de las var, no es del todo cierto.

Sino, al poner var i = -1; deberia retornar -1 no undefined… porque todas las variables tipo var se definen como si estuvieran en la primera linea de codigo…

function saludar()
{
console.log(i)
var i = -1
}
saludar()```

Manuel Sandoya

student•

Lo que dice en el video si es cierto, y esto es a lo que se refieren con el Hoisting.
En este caso, el comportamiento del código que mencionas, JavaScript lo toma así:

function saludar() {
	var i
	console.log(i)
	i = -1
}
saludar()

Es decir, manda el var arriba de la función, pero sin la asignación. Por eso muestra undefined cuando procesa el console log

CarlosHP

student•

¿Qué es SCOPE?
Scope es la accesibilidad de las variables, funciones y objetos en alguna determinada parte del código en tiempo de ejecución.

Una ventaja es que el Scope proporciona cierto nivel de seguridad al código. Un principio de la seguridad informática es que los usuarios sólo deben tener acceso a las cosas que necesitan a la vez.

Elvis Milan

student•

Ambito, al final javascript empezaron a utilizarlo como AngularJs la vs 1, pero ya luego todos se dan cuenta que no lo estan haciendo segun las normas o como debe ser y empiezan a sacar sus versiones

Javier Nava

student•

Realice una prueba de velocidad, declarando los valores de la forma convencional se demora en firefox 5.7 ms mientras declarando las variables por lo que van a hacer 2.02 ns , eso indica que por la funcion que declaramos mal puede duplicar el uso de memoria en el cliente

**El codigo para que prueben **

function saludar(){
      var nombre = "saluda1"    
      for (var i = 0; i < 10; i++) {
        console.log(`el nombre es ${nombre}`)
      }
    }
    function saludar2(){
      const nombre = "saludar 2"    
      for (let i = 0; i < 10; i++) {
        console.log(`el nombre es ${nombre}`)
      }
    }

    console.time('Function #1');
          saludar();
    console.timeEnd('Function #1')
    
    console.time('Function #2');
          saludar2();
    console.timeEnd('Function #2')

Francisco Javier Rodriguez Gomez

student•

Hice la prueba pero no funciona del modo que pensamos @jnzulia.
Siempre la primera ejecución tarda más que la segunda, aún si intercambiamos el orden.
Quizá algún tema de cache.

Es decir si corres este test:

    console.time('Function #1');
          saludar();
    console.timeEnd('Function #1')
    
    console.time('Function #2');
          saludar2();
    console.timeEnd('Function #2')

saludar() tarda más

Pero si lo haces al contrario, da al contrario

    console.time('Function #2');
          saludar2();
    console.timeEnd('Function #2')

    console.time('Function #1');
          saludar();
    console.timeEnd('Function #1')

Ahora saludar2() tarda más.

Incluso probé con otro método de medición recomendado pero sucede igual:

{
  let start = window.performance.now();
  saludar();
  let end = window.performance.now();
  console.log(end - start);
}
  
{
  let start = window.performance.now();
  saludar2();
  let end = window.performance.now();
  console.log(end - start);
}

Si alguno encuentra un comportamiento distinto por favor nos comentan.

Juan Jose Rojas Rojas

student•

¿El concepto de Scope es a Javascript
como lo es el Encapsulamiento a Java?

Diego Forero

Team Platzi•

Si es similar, es la visibilidad que puede tener una variable donde se declara y si es o no visible (tener acceso) desde otras funciones de forma directa.

José Tuzinkievicz

student•

El scope, me atrevería a decirte que es propio de cualquier lenguaje de programación, ya sea estructurada u orientada a objetos. El encapsulamiento es propio de la orientación a objetos y es algo conceptual.

Entiende el scope de las variables

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial