# Weird Variable Scope ?

**URL:** <https://forum.kirupa.com/t/weird-variable-scope/635426>\
**Category:** web dev\
**Created:** [October 17, 2016, 3:57pm UTC](https://forum.kirupa.com/t/weird-variable-scope/635426 "2016-10-17T15:57:51Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jonny\_Silva](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jonny_silva/32/7836_2.png) [@Jonny\_Silva](https://forum.kirupa.com/u/Jonny_Silva)\
**Post date:** [October 17, 2016, 3:57pm UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/1 "2016-10-17T15:57:52Z")

</div>

Hey there, I’ve been learning Javascript for about a week now and I have this thing going:

```
var input = {
        
        inputNumber: "0",
        bool: true,
        
        setInputNumber: function(id){
            return function(e){
                   alert(inputNumber); //undentified
            }
        }
}

```

So my question is, why I can’t acess the inputNumber atribute from inside the function i’m returning ? I already read the Variable Scope article here, so I probably missed something. Thanks for the help 🙂

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 17, 2016, 4:11pm UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/2 "2016-10-17T16:11:06Z")

</div>

This is one of the confusing parts about the bracket characters - they have dual meanings. They 1) define code blocks (which themselves have different scope behaviors) and 2) are used to in object literals for property definitions.

The big difference being, when used in an object literal, such as `input = { ... }` there is no scope. All the brackets are doing is marking the start and ending point of where the properties are defined. Ultimately, what your code resolves to is something more like:

```auto
var input = new Object();
input.inputNumber = "0";
input.bool = true;
input.setInputNumber = function(id){
    return function(e){
        alert(inputNumber); //undentified
    }
};

```

In that format, its clear to see there is no `inputNumber` within the current scope that can be accessed. It’s only accessible directly through the `input` object because that’s where `inputNumber` is being defined.

This can get confusing when dealing with functions in object literals like this, because naturally you want to look at the code and consider each `{...}` block a scope, but they’re not. The object literal syntax is a shorthand for property definitions only and do not create a scope within which those properties can be accessed.

---

<div class="post-metadata">

**Author:** ![Jonny\_Silva](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jonny_silva/32/7836_2.png) [@Jonny\_Silva](https://forum.kirupa.com/u/Jonny_Silva)\
**Post date:** [October 17, 2016, 4:44pm UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/3 "2016-10-17T16:44:01Z")

</div>

I see ! Thank you ! I learned OOP with Java, so dealing with it in Javascript feels a bit weird haha

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 17, 2016, 5:19pm UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/4 "2016-10-17T17:19:22Z")

</div>

You’ll find some similarities here and there, but other things will be completely different. There are some severe limitations with OOP in JS which take a while to get your head around, but once you understand prototypal inheritance, it makes sense. It doesn’t make it _better_, but at least you grasp what’s going on which helps you make decisions about your code.

If you’re looking for a smoother transition, you might want to consider [TypeScript](http://www.typescriptlang.org/) which is a JS superset but handles some things with OOP a little better (or at least calls you out on doing things you shouldn’t) and includes type annotations among other things.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 17, 2016, 7:14pm UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/5 "2016-10-17T19:14:10Z")

</div>

This is a great explanation, sen! I knew that `inputNumber` would return **undefined** , but my reasoning for why was flawed. Your snippet helped clarify this! 😛

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 17, 2016, 9:21pm UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/6 "2016-10-17T21:21:15Z")

</div>

What was your original reasoning?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 18, 2016, 4:32am UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/7 "2016-10-18T04:32:20Z")

</div>

It’s silly. I had assumed it would check in the global scope and just stop. Not sure why I thought that. I’m probably going more insane.

---

<div class="post-metadata">

**Author:** ![TheCanadian](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@TheCanadian](https://forum.kirupa.com/u/TheCanadian)\
**Post date:** [October 18, 2016, 7:02am UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/8 "2016-10-18T07:02:04Z")

</div>

Who would’ve thought that was possible! :run\_in\_fear:

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 18, 2016, 8:19am UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/9 "2016-10-18T08:19:14Z")

</div>

> [@kirupa](#):
>
> I had assumed it would check in the global scope and just stop.

That’s not far off from what’s happening. Since the function is defined directly within the global scope, there is no additional scope except for its own local scope to check for that variable. So the pecking order for scope checking would be: local scope (as always), global scope. And since its in neither, the variable comes back with an undefined value.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 18, 2016, 10:50am UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/10 "2016-10-18T10:50:42Z")

</div>

Actually, that’s not exactly true. I just realized that the variable is in a function returned by _another_ function, so there is that additional scope in there: local (`function(e)`), parent function (`function(id)`), and then global.

But if you want to be technical about it, that scope isn’t checked in the same sense that the global scope is. When the function is created the parent function scopes are checked for variables to bind to the closure. When not found, lookup then resorts to resolving what’s in global, if anything. So really, @kirupa, you’re right. Global is checked and then it stops, because its when the function is created it found that there are no parent scopes to bind a `inputNumber` from, so the lookup becomes a lookup from global and then that’s it.

---

<div class="post-metadata">

**Author:** ![Jonny\_Silva](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jonny_silva/32/7836_2.png) [@Jonny\_Silva](https://forum.kirupa.com/u/Jonny_Silva)\
**Post date:** [October 18, 2016, 2:23pm UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/11 "2016-10-18T14:23:47Z")

</div>

Thank you @senocular, now scopes and closures became a bit more clear for me. At first I solved it by simply doing something like `alert(input.inputNumber)`, but that’s a litle unintuitive. After your explanation a tried doing:

```
 input.setInputNumber = function(id){
 var number = this.InputNumber;
    return function(e){
        alert(number);
    }
}

```

This makes more sense to me, Kirupa had already showed a similiar example when he talked about Objects but the returned Function tricked me. 😥

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 18, 2016, 2:57pm UTC](https://forum.kirupa.com/t/weird-variable-scope/635426/12 "2016-10-18T14:57:14Z")

</div>

This is a pretty good way of doing it. This gives you a reliable closure variable, `number`, which is defined in the parent function of the function returned for better encapsulation. Using `input.inputNumber` would be less reliable because you’re bound to the variable in the global scope which someone could come along and delete, or rename or something else, causing the reference to break in the function.

```auto
var input = {
        
        inputNumber: "0",
        bool: true,
        
        setInputNumber: function(id){
            return function(e){
                   alert(input.inputNumber);
            }
        }
}
var f = input.setInputNumber(5);
f(); // 0
input = null;
f(); // Error

```

At this point, the only concern with this approach is `setInputNumber` context - another wonderful issue to deal with in JS 😃