0

To whom it may concern

This post is actually an example of a kind of XY Problem.

The real issue ("X") of the person asking for help is obscured, because instead of asking directly about issue X, they ask how to solve a secondary issue ("Y") which they believe will allow them to resolve issue X.

My original problem was that the array (on line 127 in the pics) was becoming empty. While I was tracing down that problem, I was shocked to find that variables were becoming empty in the middle of execution. Even though that's what this post was about, had I been thinking, I wouldn't have needed to post.

The real problem? Look at line 131 of the images... 

if (siblings[childitem].my.parents.length = 0) {

The single-equal results in an empty array.

The original question follows.

I discovered this thru the chrome dev tools.

Here's the before pic.

before

You can see in the local scope all the relevant info, plus it's echoed in the yellow text inline with the real-time code. All the values are appropriate.

Upon executing the Next Step in the execution. . .

after

You can see the reticle/cursor has moved to the right in the real-time code. The previous local variables have disappeared. old parents is now [], and children is undefined.

Is it a reference problem somehow? I got the filter syntax from this post here.

What the heck is going on?

Here's the code in text for those of you that need it.

selected.my.children.forEach (childitem => {
    // let parentindex = siblings[child].my.parents.indexOf(selected.my.place);
    let oldparents = siblings[childitem].my.parents;
    let newparents = oldparents.filter(e => {e != selected.my.place});
    siblings[childitem].my.parents = newparents;
    // if (parentindex > -1) {
    //  siblings[child].my.parents.splice(parentindex, 1)
    // }
    if (siblings[childitem].my.parents.length = 0) {
        siblings[childitem].faceup();
    }
    console.log(siblings[childitem].my);
});
JJJ
  • 31,545
  • 20
  • 84
  • 99
monsto
  • 1,063
  • 1
  • 11
  • 20
  • 2
    Post the code, not images of code. – Ayush Gupta Oct 20 '18 at 06:37
  • Uh, they aren't in the local scope since you're in the scope of the callback. Are you sure they are "lost"? Because it seems they are simply not shown there but should still have values. You can try to verify this by stepping into the callback then typing `console.log(childitem)` into the console - that would be executed within the current context, so you would get the value of `childitem` if there is any. – VLAZ Oct 20 '18 at 07:16
  • On a separate note, I wouldn't be surprised if your `.filter` doesn't work - you have an arrow function with `{}` in the body, so it doesn't have an implicit return. – VLAZ Oct 20 '18 at 07:17
  • @vlaz does "Scope > Local" in the listing on the right not mean they're in local scope? In the 2nd pic, the output on the right shows the values removed. I've done console.log during the pause and it shows the same. also I added the `{}` as a troubleshooting step, but that effect is after the fact. The variables were losing their value anyway and the filter wasn't working originally without the `{}`. (I will change it back anyway as that makes sense) – monsto Oct 20 '18 at 07:30
  • @AyushGupta it's not "just" pics of the code, it's an in-context screen of step execution of the code. Without them, I would wind up manually answering all the questions about the context, console.log output, and everything else that is answered in variable listing on the right... not to mention responding to people suggesting that I use the chrome dev tools to verify. – monsto Oct 20 '18 at 07:34
  • I understand that, and a screen capture is fine too. But if someone wanted to debug this, It would be helpful to have a text (`copy-pastable`) version of the code in the question too. Right now, It would be really hard for someone to debug this. – Ayush Gupta Oct 20 '18 at 07:36
  • @AyushGupta I posted the code in text. I look forward to your code suggestions. – monsto Oct 20 '18 at 07:37
  • @monsto yes, Scope > Local shows *the local scope*. There are multiple layers of scopes - each function has its own local scope but can also access parent scope(s). In this case you are *inside* the callback function, so the local scope will have the parameter `e` it's accepting, while `childitem` belongs to the parent scope. – VLAZ Oct 20 '18 at 07:57
  • 1
    Does [this](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript?rq=1) or [this](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1) help clear things up regarding scope? – VLAZ Oct 20 '18 at 08:02
  • @vlaz After all this, I realize that this post is an XY problem. My real problem is that filter clears the array instead of returning the array without `selected.my.place`. I got so caught up in "why is my array disappearing" that I got sucked into the rest of it. I also didn't realize that block scope doesn't enter into an in-line callback function (the first link didn't really approach this) but it makes perfect sense. A callback function is still a function, and any data you want in there should either be global (`selected.my.place`) or passed in (`e`). Thanks. I will repost but better. – monsto Oct 20 '18 at 08:25
  • @vlaz dammit. . . look at line 131 in the image. thank you for your responses. – monsto Oct 20 '18 at 08:32
  • @monsto that's actually really funny :D – VLAZ Oct 20 '18 at 08:33

2 Answers2

1

Because you entered into a new function scope. That is the callback that you pass to filter function: 

e => {e != selected.my.place} // <- this is a new scope, no local variables other than `e`

You can clearly see that there are no local variables other than e.

You can however find childitem, newparents etc. in parent scope. In your example it is Closure (click on Closure (tap))

Nurbol Alpysbayev
  • 12,089
  • 2
  • 30
  • 57
  • The funny thing . . . I actually knew that. I was just so caught up in "the array is being cleared" that I saw it as being cleared as well. Check the op for the actual solution. Thanks for your response. – monsto Oct 22 '18 at 00:42
-2

ElementList is array like not array, you can not use the filter directly, you need transform it to array first:

let oldparents = [...siblings[childitem].my.parents];// or you can use Array.from
let newparents = oldparents.filter(e => e != selected.my.place); // here the arrow function also needs to be updated, remove the braces
Pengcheng
  • 293
  • 1
  • 5