Javascript: why can I access the inner name declared inside a function in global scope?

Question

In chrome developement console, I created a function f with two more embeded function

> var a = 'ga';
  var b = 'gb';
  var c = 'gc';
  var f = function(){
      var a = 'fa';
      var b = 'fb';
      ff = function(){
          var a = 'ffa';
          fff = function(){
              console.log("a,b,c is: " + a + "," + b + "," + c);
          };
          fff();
      };
      ff();
  };
< undefined

Then, I input ff to console, found that I still can access it, while it was defined in the inner scope of f

> ff     // why can I still access the name ff ?
< function (){
         var a = 'ffa';
         fff = function(){
             console.log("a,b,c is: " + a + "," + b + "," + c);
         };
         fff();
     }

And so does the name fff

> fff   // why can I still access the name fff ?
< function (){
             console.log("a,b,c is: " + a + "," + b + "," + c);
         }

I am a C/C++ developer, and currently toddling in javascript.

This phenomeon seems tricky for me to understand.
Because in Cpp, it's an error to access the name inside inner scope.
for example:

#include <iostream>

using namespace std;

int main(int argc, char *argv[]){
    auto f = [](){
        std::cout << "in f() now" << std::endl;
        auto ff = [](){
            std::cout << "in ff() now" << std::endl;
            auto fff = [](){
                std::cout << "in fff() now" << std::endl;
            };
            fff();
        };
        ff();
    };

    f(); //it's okay
    ff(); // not okay, error: use of undeclared identifier 'ff'
    fff(); // not okay too, error: use of undeclared identifier 'fff'

    return 0;
}

And even in python, we can't do that too:

def f():
    print("in f() now")
    def ff():
        print("in ff() now")
        def fff():
            print("in fff() now")
        fff()
    ff()

f()   # okay
ff()  # NameError: name 'ff' is not defined
fff() # NameError: name 'fff' is not defined

So, I am wonderring why it is possible to access the name in a inner scope even if I am out of it ?

Thanks in advance!

Answer 1

Variables with no var are generated in global context.

Assigning a value to an undeclared variable implicitly creates it as a global variable (it becomes a property of the global object) when the assignment is executed.

Answer 2

You haven't used var to declare ff or fff . If you don't declare them, they automatically get declared globally, not locally.

So I've not tried it, but this should behave more like what you're after...

  var a = 'ga';
  var b = 'gb';
  var c = 'gc';
  var f = function(){
      var a = 'fa';
      var b = 'fb';
      var ff = function(){
          var a = 'ffa';
          var fff = function(){
              console.log("a,b,c is: " + a + "," + b + "," + c);
          };
          fff();
      };
      ff();
  };