# \[JS\] Accessing an object's property in a nested function?

**URL:** <https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852>\
**Category:** web dev\
**Created:** [January 15, 2015, 8:46pm UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852 "2015-01-15T20:46:12Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 15, 2015, 8:46pm UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/1 "2015-01-15T20:46:15Z")

</div>

Hello guys, I am want to make key binding work. I would like to make the **paddle\_y\_pos** property accessible from within the function keyDown(), which is nested within a different function, called update(), which updates the animation frames. Can you expain to me how I can accomplish this? Thank you!

---

<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:** [January 15, 2015, 9:22pm UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/2 "2015-01-15T21:22:31Z")

</div>

`paddle_y_pos` is accessible as long as the Paddle instance you’re referencing it from is accessible. The only Paddle instance I see you using is paddleLeft, but I’m not seeing that defined (or declared) anywhere prior. You define it in keyDown, but after you access paddle\_y\_pos which will fail because it doesn’t yet exist.

I’m not seing anything dynamic in the Paddle instance created there; the input values are all constant. So I’m assuming what you really want is for it to be defined in your script scope? For example, above update:

```javascript
// moved out of keyDown:
var paddleLeft = new Paddle(20, HEIGHT / 2 - 25, PADDLE_WIDTH, PADDLE_HEIGHT);

function update() { ...

```

This way, paddleLeft will be defined when keyDown gets called.

And I assume you have HEIGHT, PADDLE\_WIDTH, and PADDLE\_HEIGHT defined somewhere else too? I don’t see them but assume you’re distinguishing their difference between Paddle.PADDLE\_WIDTH and Paddle.PADDLE\_HEIGHT.

One more thing: update should **really** be:

```javascript
function update() {
   paddleLeft.draw();
}

```

Take everything else out of it. You don’t need to set up key listeners every time you update - with a new function on top of that. You’re leaking listeners like crazy doing this. All you want to do is set up key listeners once on init, have data updated in those listeners when those events occur (`paddleLeft.paddle_y_pos -= paddleLeft.paddle_y_pos;`) and then your screen can get redrawn in an update based on anything that might have changed since the last time it happened.

If you want to take it a step further, you can ditch `setInterval` and use the recommended `requestAnimationFrame` instead

> **[window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)**
>
> You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second, but...

Going beyond that you can prevent updates unless something has changed (validation). But thats an optimization I wouldn’t worry about just yet 😉

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 15, 2015, 9:46pm UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/3 "2015-01-15T21:46:11Z")

</div>

Thanks for the useful tips. I moved the functions defining the keyb controls outside the `update()` function. Now the console outputs `ReferenceError: Can't find variable: ball`.

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 15, 2015, 10:04pm UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/4 "2015-01-15T22:04:30Z")

</div>

I don’t get it: I declare and assign a variable `ball` to the new instance of the `Ball` object. This variable should be accessible everywhere in the code. But I receive the error I mentioned above…

---

<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:** [January 15, 2015, 10:56pm UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/5 "2015-01-15T22:56:15Z")

</div>

ball (and a bunch of others) are defined with var in a function. When you use var in a function, it makes a variable that’s local to that function and (typically) only lasts until that function has completed executing.

```javascript
// ball doesn't exist
draw(); // ball exists in the block of this function while its called...
// ball doesn't exist
draw(); // a new ball is created and lasts for only this function call...
// no balls

```

If you want ball to be accessible anywhere, then you need to define it outside of a function, as I suggested with paddleLeft.

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 16, 2015, 12:17am UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/6 "2015-01-16T00:17:10Z")

</div>

This is clear now, thank you. I made quite a few changes to the code and I would like to know what you think about them:

- Moved most of the vars inside the function `init()` and attached them  
to the `Window` object to make them public.
- Added the `requestAnimationFrame()` call (with a callback to the function  
`draw()`) to the anonymous function `window.onload`. I am also  
calling it recursively within the `draw()` function, as I found suggested elsewhere.
- Moved the ball collision detection into a `Ball.collide()` method.
- Moved the ball vector incrementer into the `Ball.draw()` method.

Bottom line, the code stopped working, but I am using all this situation as a learning tool, since I am pretty new to this level of programming complexity. Thank you for helping me learn. 😄

---

<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:** [January 16, 2015, 1:11am UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/7 "2015-01-16T01:11:00Z")

</div>

Using window works, but not recommended. In HTML (JavaScript in HTML), window is considered global. And most of the time - with good reason - you’ll hear people warn against making global variables where possible. The fewer you have, the better. This helps keep the global space clean reducing collisions; something important if you ever need to decide to include any 3rd party code.

For example, did you know that in the chrome console there’s already a window.keys function defined?

> **[Command Line API Reference  |  Tools for Web Developers
       |  Google...](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3)**
>
> A reference of convenience functions available in the Chrome DevTools Console.

Your keys variable would replace this preventing you from being able to use the original if you ever wanted to.

That being said, if you were to define vars outside of any functions in this context, they would actually be defined in window. So what’s the difference? With this set up, there isn’t much one. But, using var outside of a function is less typing. 😉 It also makes your code more portable since you’re not explicitly targeting an external object for variables to be defined. What if window didn’t exist? Everything would break! (Node.js, for example, has no window and instead uses an object called global for a global namespace). Similarly, and I wouldn’t worry about this too much right now, its been an increasingly more popular pattern to define applications in a single, self-contained, self-executing function (a.k.a. an IIFE, or Immediately Invoked Function Expression). That looks something like…

```javascript
(function(){ // <- IIFE

   var myThis = 1;
   var myThat = "2";
   function thisOrThat (value) {
      return value === this ? "this" : "that";
   }

})(); // <- IIFE getting called just as its defined

```

Again, I wouldn’t worry about this too much right now, but you might see it appear now and then. The point is, using var instead of window means if you wrapped your entire code in one of these, it would still work, even without window.

But I digress. This window stuff is not likely related to your problems.

It seems to me your problem is the fact that you’re changing these ball\_vel\_x/y\_pos variables which are defined in window but only _used_ when creating your ball instance. Being globally defined, its fine (good) to have them as init values, though more likely they would be defined in the CONSTANT style. Then the ball is created with those start values and changes to those values would be handled through the ball instance, e.g. ball.ball\_center\_x\_pos = upper\_left[0]; I think you just need to make sure you’re using the right variables there.

P.S. Good job with requestAnimationFrame!

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 17, 2015, 9:19pm UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/8 "2015-01-17T21:19:04Z")

</div>

Thanks for your great insights. I have one more question before going on with the development: my animation shows all the frames that have been painted on the canvas. Is there a built-in function to clear the previously drawn frame? Also, which online JS reference docs you suggest me to keep at hand during the development?

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [January 17, 2015, 10:13pm UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/9 "2015-01-17T22:13:27Z")

</div>

[`clearRect`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.clearRect). To clear the whole thing: `CANVAS.clearRect(0, 0, WIDTH, HEIGHT)`

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 18, 2015, 1:52am UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/10 "2015-01-18T01:52:23Z")

</div>

Thanks, I placed it in the draw() function, before the requestAnimationFrame() call, but I am not sure it is correct. I assume you first want to clear the canvas and then request the new frame…

Can you also suggest me one online JS reference doc to keep at hand during development?

---

<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:** [January 18, 2015, 8:03pm UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/11 "2015-01-18T20:03:32Z")

</div>

You want to clear the canvas as the first step of drawing a frame. This would mean before any other draw calls. People see the results of a frame after the requestAnimationFrame has completed. So everything you do up to that point is what the user sees. Clearing at the end of that step (since draw is called in a requestAnimationFrame()) would mean the user sees nothing.

requestAnimationFrame(fn) is more of a `setFunctionToCallDirectlyBeforeNextFrameRefresh(fn)`. What makes it a little tricky is that if you want to keep doing things before each frame, you have to call it again every time your before-frame-refresh function (draw) is called (which then applies to the next frame).

As for references go, Mozilla is pretty good (the fist link I posted in this thread is their documentation). They’re the boy scouts of HTML/JS and have decent docs, though not without its holes. Anything else you can usually google. If you want to get specific, theres also the specs for the features themselves, but thats usually overkill. Good if you really want to understand the intent and whats really going on.  
[http://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-requestanimationframe](http://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-requestanimationframe)

The Mozilla docs often references these too (though not always correctly, the example above being one those - right page, wrong anchor)

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 21, 2015, 8:28am UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/12 "2015-01-21T08:28:14Z")

</div>

Got it. Thank you. I found the “anatomy of a videogame” article pretty interesting, and it also touches on what you said about requestAnimationFrame(callback).

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 21, 2015, 8:40am UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/13 "2015-01-21T08:40:33Z")

</div>

I am trying to make the code more correct by nesting the properties in sub properties, but the first line of this code returns a `SyntaxError: Unexpected token '.'. Expected a ')' or a ',' after a parameter declaration.` How do you correctly write function arguments nested in a sub object initializer or function?

```
function PitchLine(from.x, from.y, to.x, to.y) {
    this.from = {
        x: null,
        y: null
    };
    this.to = {
        x: null
        y: null
    };
}

```

Thank you )

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [January 21, 2015, 10:50am UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/14 "2015-01-21T10:50:15Z")

</div>

Arguments are identifiers. What that means is that the comma-separated list between `function PitchLine{` and `){` can’t be more complex than the syntax you can use for variables names. (Not withstanding `...` rest parameters in ES6, or what not). So `$fromX` is okay, `fromX` is okay, `from_X` is okay, but `from.x` is invalid, `from[x]` is invalid, `from{x}` is invalid, and `{ from: x }` is invalid.

In general, you shouldn’t be thinking about properties and subproperties in argument lists. There’s a really significant difference between variables and properties. Variables correspond more closely to identifiers, which are the things which correspond to names you give to things which can’t be easily changed after you write the program.

I can imagine a function like this:

```javascript
function PitchLine(from, to){
    from.x = null, from.y = null,
    to.x = null, to.x = null
}

```

* * *

You seem to be inventing terminology as you go along, which is fine, but the terms you invent don’t necessarily exist in a language someone else created (ex: JavaScript). For instance, a “sub object initializer” isn’t a particularly concrete term; you might know what you mean by it, but it’s only half helpful to people who know a lot about extant JS terms. It’s typically more useful to describe what you want to happen using less technical terminology, rather than inventing it on your own without any sort of consensus.

* * *

I realize it’s probably frustrating that I’m criticizing the syntax you’ve invented, but it’s pretty difficult to infer meaning from something when you only have a single example. Imagine trying to learn Quenya from LotR with only 1 or 2 words as an example, rather than a grammar. And it’s understandable that you don’t know what should and shouldn’t work in JS, but it’s hard to know what you mean when you express problems you’ve encountered as making things ‘more correct’, when it’s unclear what you’re using as a basis for correctness.

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 21, 2015, 11:27am UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/15 "2015-01-21T11:27:33Z")

</div>

Thanks for your insights.

Terminology-wise, isn’t the following called object initializer (also called object literal)?

MyObject = {  
}

therefore I thought the following (in the context of my code) to be a nested object initializer/literal, or sub object initializer/literal:

```
this.from = {
    x: null,
    y: null
};

```

And I thought this is a property:

x: “some-value”

and this is a variable:

x = “some-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:** [January 21, 2015, 7:49pm UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/17 "2015-01-21T19:49:32Z")

</div>

Terminology aside, the big thing here is that function parameters must be simple variables. They cannot be complex, as seen with all of krilnon’s examples.

Object initializers/literals can be used in a function body as you have, but you have to manually make the connections between the parameter list and those variables

```javascript
function PitchLine(from_x, from_y, to_x, to_y) { // no dots, just variables
    this.from = {
        x: from_x, // from from_x argument value to this.from.x value
        y: from_y
    };
    this.to = {
        x: to_x
        y: to_y
    };
}

```

To add to this, I wouldn’t say this makes your code “more correct”. In fact theres a law or something that talks about how you should limit the number of references you make through objects to get to a certain value. In fact I think its suggested that it should never go beyond 1? I can’t remember who said this or how it goes, but the gist it basically: This.isGood; This.is.not.good; Obviously different circumstances favor having deeper referencing so its not something you can be too religious about, but I think a takeaway is this: keep things simple. Limit what you can do with objects and have them abstract away as much of their implementation as possible so working with them is easy and concise.

Additionally, getting back to the intialization/parameter thing, if you ever decide to get into something like CoffeeScript, you can set up your parameters with names that automatically set variables of the same name in `this` when the function (as method or constructor) gets called. Go over to [http://coffeescript.org/](http://coffeescript.org/) , hit the Try CoffeeScript tab and throw this in there:

```auto
class PitchLine
   constructor: (@fromX, @fromY, @toX, @toY) ->

```

Simple! It would be more complex if you needed to cram those values into other objects defined in the constructor

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [January 24, 2015, 1:53am UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/18 "2015-01-24T01:53:19Z")

</div>

> [@senocular](#):
>
> In fact I think its suggested that it should never go beyond 1? I can’t remember who said this or how it goes, but the gist it basically: This.isGood; This.is.not.good;

Tell that to the graphics API people.

To me it sounds like a rule mostly coming from people talking about too many chained references messing up [memory locality](http://en.wikipedia.org/wiki/Locality_of_reference). Rather than something that necessarily influences code comprehension by humans. :shrug:

---

<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:** [January 25, 2015, 4:51am UTC](https://forum.kirupa.com/t/js-accessing-an-objects-property-in-a-nested-function/472852/19 "2015-01-25T04:51:11Z")

</div>

Found it

> **[Law of Demeter](https://en.wikipedia.org/wiki/Law_of_Demeter)**
>
> The Law of Demeter (LoD) or principle of least knowledge is a design guideline for developing software, particularly object-oriented programs. In its general form, the LoD is a specific case of loose coupling. The guideline was proposed by Ian Holland at Northeastern University towards the end of 1987, and can be succinctly summarized in each of the following ways: The fundamental notion is that a given object should assume as little as possible about the structure or properties of anything else ...