Execution context and Closures - Problem with a specific code

Question

 1. function  test(language){
 2.   return function(set){
 3.       if(set)
 4.           {
 5.       language=set;
 6.       console.log("Changed "+language);
 7.           }
 8.       else
 9.           {
 10.               console.log(language);
 11.           }
 12.   }
 13. }
 14.
 15. var a=test("en");
 16. var b=test("es");
 17. a("Spanish");
 18. a();
 19. b();

Here the execution context of lines 17 and 18 will be separate but the closure that will be created will have reference to the same instance of "language" because a function is returned in line number 15 and that will be having the same "language" in closure. Now line 18 will have a different execution context along with different instance of language because of a different initialization of function "test" in line 16. So, the output will be

Changed Spanish
Spanish
es

But now,

 1. function  test(){ language = "English"
 2.   return function(set){
 3.       if(set)
 4.           {
 5.       language=set;
 6.       console.log("Changed "+language);
 7.           }
 8.       else
 9.           {
 10.               console.log(language);
 11.           }
 12.   }
 13. }
 14.
 15. var a=test();
 16. var b=test();
 17. a("Spanish");
 18. a();
 19. b();

Here line 17 and 18 will have different execution contexts but same instance of "language". But "a" and "b" variable's closures will have different instances of "language", just as the previous example where even after the value was changed to "Spanish" by "a" still the value shown was "es" when "b" was called because b's "language" is different from a's "language". But here as I checked the output when I've changed a's language to "Spanish" in line 17, b's "language" is also changed giving me the output as follows:

Changed Spanish
Spanish
Spanish

Now, first and second lines are understood because the same instance of "language" is present in all the "a" function calls just like the first example but b's closure must be having a different instance of language. Then why isn't the output as follows:

Changed Spanish
Spanish
English

Omitting `var`, `let` or `const`, causing errors still in 2020. Use `let language = "English"`, and go to strict-mode, where this will throw and make you notice the problem immediately. — ASDFGerte, Apr 23 '20 at 18:12
Yes, @ASDFGerte. I have added the same yet more explained in Answers. Please check it out. — Abhishek Agarwal, Apr 23 '20 at 18:16

score 0 · Answer 1 · answered Apr 23 '20 at 18:13

The answer was lying in the concept of declaring the variable without the keyword var in line 1 of the second code snippet. As found on other resources, if we declare the variable as it is, it is declared in the global context.

Change the code as follows,

 1. function  test(){ var language = "English"
 2.   return function(set){
 3.       if(set)
 4.           {
 5.       language=set;
 6.       console.log("Changed "+language);
 7.           }
 8.       else
 9.           {
 10.               console.log(language);
 11.           }
 12.   }
 13. }
 14.
 15. var a=test();
 16. var b=test();
 17. a("Spanish");
 18. a();
 19. b();
 20. console.log(this.language)

I added extra 20th line in the code to demonstrate the fact that the variable is not present in window scope so the output of the above code snippet is as follows:

Changed Spanish
Spanish
English
undefined

In the second code snippet of the question, the "language" variable was present in the global scope and thus it would return "Spanish" instead of undefined.

Execution context and Closures - Problem with a specific code

1 Answers1