0

Why this f value() cannot access the const num = 3 inside another function though it's being called there but can access the variable below it?

function xyz() {
    const num = 3
    value()   // <-- why this *f value()* cannot access the **num** from here
}

function value() {
    console.log(num)
}

const num = 100  // <-- but it can access the **num** here even though it's below of it.
xyz()

the Output is num = 100

I expected the output would be the num = 3.

kal_stackO
  • 11
  • 4
  • 1
    Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) – Ivar Nov 08 '22 at 08:22
  • @Ivar - I wondered about that too, but is this really covered by those answers? It's certainly closely related. – T.J. Crowder Nov 08 '22 at 08:24
  • @T.J.Crowder I'd say so. It explains how these variables are block-scoped and that `const`/`let`/`var` variables are hoisted. – Ivar Nov 08 '22 at 08:27
  • @Ivar - I don't see how block scoping or hoisting relates to the above, though. I wonder about [this](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) though... – T.J. Crowder Nov 08 '22 at 08:29
  • All that said, I'm sure this is covered specifically *somewhere*. :-) – T.J. Crowder Nov 08 '22 at 08:34
  • @T.J.Crowder With block scoping I was referring to "_why this \*f value()\* cannot access the \*\*num\*\* from here_". They cannot access that specific `num` because it is block/function scoped and doesn't exist in the other function. With hoisting I was referring to "_but it can access the \*\*num\*\* here even though it's below of it._", though that doesn't _entirely_ apply since the function is executed after it has been defined anyway. I'd argue that because the outer `num` is in scope of the function, it should still explain it. – Ivar Nov 08 '22 at 08:46
  • But I value your judgement of course. :) If you feel like it doesn't apply, then you can not vote to close it or reopen it if it gets closed. – Ivar Nov 08 '22 at 08:46
  • @Ivar - And I yours. :-) I can totally see it either way, frankly. – T.J. Crowder Nov 08 '22 at 08:49

3 Answers3

1

Let's take a look at your scopes here, you have your main scope with the 2 function declarations and the constant, the scope of value, and the scope of xys. In the value function, the num is the one from the root scope because it is its parent scope. When setting num to 3. You create a new variable that is not the one referenced in the value function. That's why it keeps the one from the root scope

Anthony Quéré
  • 51
  • 5
1

Because JavaScript defines what variables a function can access by where the function is created, not by where it's called. If you want to provide information to a function from where it's called, you do that by passing it arguments instead.

Consider this example:

function handleInputEvents(selector) {
    function showChange(value) {
        console.log(`Value for "${selector}" changed to "${value}"`);
    }
    document.querySelector(selector).addEventListener("input", (event) => {
        showChange(event.currentTarget.value);
    });
}

handleInputEvents(".first");
handleInputEvents(".second");
<div>
    <label>
        First:
        <input type="text" class="first">
    </label>
</div>
<div>
    <label>
        Second:
        <input type="text" class="second">
    </label>
</div>

In that code, each call to handleInputEvents creates a new showChange function. The showChange function uses two things:

  • selector, which it can access because it was created where selector is in scope, and
  • value, which it can access because value is a parameter of showChanges; value is provided by the caller as an argument

The showChanges function wouldn't be able to access anything from where it's called (it can't access event, for instance), but it can access things in scope where it was created.

Related:

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • it's getting clear to me now thanks.... and wherever the f xyz() gets called all the functions that called inside of it are now also have access to the variables that f xyz() has access to? am I right...... sorry for the late reply :) I am just new here and self-learner and I am almost 3 months on learning fron-end html, css, and now am focusing deeper on js. – kal_stackO Nov 10 '22 at 16:34
  • @kal_stackO - *"and wherever the f xyz() gets called all the functions that called inside of it are now also have access to the variables that f xyz() has access to?"* No, only functions **created** inside it would have access to everything it has access to. – T.J. Crowder Nov 11 '22 at 07:49
  • I mean the global scope variables that the f xyz() has access to – kal_stackO Nov 11 '22 at 13:44
  • @kal_stackO - *Globals*, yes, but otherwise no. Again, this is entirely determined by *where the function is created*, not where it's called from. Where it's called from doesn't come into it at all. – T.J. Crowder Nov 11 '22 at 14:27
0

Because num = 3 is local variable for xyz().

You need to pass it as a parameter of value() function if you want to access that.

function xyz() {
const num = 3
value(num)   // <-- call it with params *num*

function value(num) {
    console.log(num)
}

const num = 100  
xyz()
Jaona
  • 1
  • 2