[Resuelto] -¿Se puede modificar el valor de una variable por fuera? - JavaScript - Closures

JavaScript Desde Cero (gratis) | Funciones

Avatar
David Rivadeneyra

@davidrivadeneyra

Estimada comunidad, estoy practicando y me he topado con esto, cuando ejecuto una función con addEventListener modifico el valor de la variable, pero solo por dentro de la función sumar(), que pasa si lo que necesito es modificar el valor de la variable en el scope global? Llevo mucho rato con este bug mental 😐, les dejo el ejercicio que aun no puedo resolver.

1const next = document.getElementById('next')
2
3let i = 0
4const sumar = () => {
5 i++
6 console.log(i) // aquí si incrementa cada vez que pulso el botón next
7}
8
9next.addEventListener('click', sumar)
10
11console.log(i) // aquí no incrementa al ejecuar el addEventListener (cuando presiono el botón next)
Avatar
Marlon Velásquez

@sargentogato

Voy a intentar que esto se vea bien, la verdad que es un autentico coñazo editar código y texto en el foro, espero que lo solucionen pronto porque es desesperante.

Vamos por partes. Tenias un error de sintaxis, pero tranquilo, nos pasa a todos, yo también soy principiante como tú y entiendo lo frustrante que puede ser cuando algo así te pasa. En tu caso, todo estaba bien, sólo que como te dije antes, la sintaxis no era la correcta. La primera parte está perfecta, me hubiera encantado ponerte el código aquí abajo, pero es imposible o yo no sé cómo hacerlo, así que lo pondré todo al final.

El error estaba cuando llamabas a la función con el click. Si mal no recuerdo, los eventos disparan una función que ejecuta lo que este dentro de ella, pero no puedes llamar a otra función directamente, utilizando el camino que planteas, si es posible hacerlo, pero de otra manera, si estoy equivocado seria genial que alguien lo comentara.

Primero te pongo tú código con la pequeña corrección y luego el otro camino para hacerlo.

1let i = 0
2const sumar = () => {
3 i++
4 console.log(i) // aquí si incrementa cada vez que pulso el botón next
5}
6
7next.addEventListener('click', e =>{
8 sumar()
9})
10
11La otra opción
12
13let i=0
14function sumar(){
15 i++
16 console.log(i)
17Esta opción es llamar a la función desde el HTML
18<button id="next" onclick="sumar()" >Next</button>
Avatar
Marlon Velásquez

@sargentogato

me falto esto al final de la función }

Avatar
David Rivadeneyra

@davidrivadeneyra

Hola Marlon ,gracias por responder, he pasado a código ambas instrucciones que me indicas, es cierto que el el valor de i incrementa, pero dentro del scope de la función sumar(), si hago un console.log(i) por fuera de la función (es decir por ejemplo, en la línea 13) el valor de i sigue siendo 0. De qué forma se puede hacer que el valor de i cambie por fuera en el scope global?

1const next = document.getElementById('next')
2
3let i = 0
4const sumar = () => {
5 i++
6 console.log(i) // aquí si incrementa
7}
8
9next.addEventListener('click', e => {
10 sumar(e)
11})
12
13console.log(i) // aquí no incrementa al ejecuar el addEventListener (cuando presiono el bontón) - línea 13
Avatar
Marlon Velásquez

@sargentogato

Vale, he estado intentando hacer lo que comentas, pero nada, así que me he puesto a buscar información y todo lo que he encontrado, indica que no se puede.

https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/ Scoping rules vary from language to language. JavaScript has two scopes – global and local. Any variable declared outside of a function belongs to the global scope, and is therefore accessible from anywhere in your code. Each function has its own scope, and any variable declared within that function is only accessible from that function and any nested functions. Because local scope in JavaScript is created by functions, it’s also called function scope. When we put a function inside another function, then we create nested scope.

Viene a decir que cuando se declara una variable dentro de una función, dicha variable no es accesible fuera de la función.

En el caso que planteas, aunque la variable es definida fuera de la función, el incremento de la variable i++ se queda dentro de la variable y el console.log(i) sólo recoge el valor que le diste a i al inicio.

Aquí vienen a decir lo mismo https://www.w3schools.com/js/js_scope.asp JavaScript has function scope: Each function creates a new scope. Scope determines the accessibility (visibility) of these variables. Variables defined inside a function are not accessible (visible) from outside the function.

https://ultimatecourses.com/blog/everything-you-wanted-to-know-about-javascript-scope If I define a function and create variables inside it, those variables becomes locally scoped. Any locally scoped items are not visible in the global scope – unless exposed, meaning if I define functions or variables within a new scope, it’s inaccessible outside of that current scope.

Estuve viendo la los standere del ECMA pero ufffff es un documento farragoso y lo poco que puede sacar en claro es que no se puede. Ojalá alguien más arroje algo de luz sobre el tema.

Ver más comentarios

Avatar

Escribe una respuesta