Accessing function variable global variable question

I am trying to understand how the call stack and global execution context works.

Note: I do understand this is the bad way of implementation. I come from a java background and trying to understand how things work behind the scenes in JavaScript. I have intentionally added var x at multiple locations. I am trying to find out if it cannot be accessed at all or there is a way it can be accessed.
Question#1: I wanted to access function a() - x variable in function b(). able to access global x and local x.

Question#2: I was able to view Global Execution Context and Local Execution Context of function b() but global execution context of function a () is not visible in Chrome source tab. Trying to understand why only one global and one local context data is available at a given point of time during debugging in Chrome.

If there are any resources to read through how call stack and global execution works is appreciated. I wanted to understand the flow when multiple levels are involved. I do understand how it works for one level.

var x = 1;
a();
function a() {
    var x = 30;
    var y = 10;
    function b() {
        var x = 100;
        console.log(x);
        console.log(this.x); // how to access function a() x variable here...
        console.log(y);     
    }
    b()
    console.log(x);
    console.log(this.x);
}

Hey there @mahigenny thanks for writing in. Have you taken the JavaScript Algorithms and Data Structure course here? In the course is a section about global vs. local scope of variables in functions and how it works (In the Basic JavaScript and ES6 sections of the course).

If you haven’t started that course, I would highly recommend doing so as it can help explain the global vs. local scope of variables.

Thanks. I will go through the course and see if that course my answer to the specific example mentioned. There are three levels of scope here for the variable x. I could not find any where how to refer to the immediate parent reference when the current scope also has the same variable.

You generally want to avoid global variables.
They are a huge source of error in a larger codebase because it’s hard to keep track of which function might change it’s value.

Like, you got b() here - there is no indication it would change x.

You should always work with local variable and return-values.

1 Like

i dont see a reason to want to access an old value of a variable, if you reassign it on purpose; if you want to have access to old/new variables, simply use different names. Sharing the same names is considered bad practice because it can lead to lot of misconception and unwanted code behavior and is usually made by error and not on purpose. The advise you got to look up FCC JS curriculum is good one. There you can get a better grasp on variables, scope and you will find useful let and const keywords, which are related to the topic you bring up

2 Likes

I am not trying to use that on a project. I am trying to understand how JS works in the backend. How the scoping works and whether it can be accessed or not

If you choose to shadow a variable from an outer context, then no… you can’t get access to the value that you choose to shadow. At the risk of sounding like a broken record, this sort of thing is why repeating variable names and relying upon global variables can cause confusion and bugs.

1 Like

Thank you. I thought shadow applies only for block scope and not at a function scope. In shadow value of x should be overridden if I am not wrong… but last second statement prints the value as as 30. I’m still confused how the scoping is working here. I know it is ridiculous thing but want to understand the backend how the GEC is working in this example.

You’re making it more complicated than it is. Shadowing occurs any time you redefine a variable inside of a smaller scope. Once you shadow, you loose access to the value you shadowed.

var operates on function scope and you have shadowed x inside of your functions, so you loose access to the value of the variable in the larger scope.

2 Likes

Thanks. This answers my confusion.

1 Like