Reactivity issue/confusion

[dkrasne]

I have a constant wordsFiltered that's an array of objects, which adjusts itself based on choices in some selectors. I'm trying to pull out some of the properties into a new constant.

If I just do wordsFiltered[0].directIntertextIDs in its own cell, it works fine, both when the page is first refreshed and when I make selections and subsequent selections in the selectors.

However, if I do:

const passageIntxts = [];

if (wordsFiltered.length > 0) {
for (let i in wordsFiltered) {
	let word = wordsFiltered[i];
	let dirIntxts = word.directIntertextIDs;
	passageIntxts.push(dirIntxts);
}}

then I start having issues (calling passsageIntxts in its own cell).

On page refresh, and when I make an initial selection in my selectors, something causes word.directIntertextsIDs to be undefined just in passageIntxts. When I make a change in the selectors that causes wordsFiltered to change without being temporarily empty, then it works. Then if wordsFiltered is ever temporarily empty again, based on other selections, it goes back to being undefined within passageIntxts until I make another change, even though wordsFiltered is itself not actually empty.

I can give you the code that's producing wordsFiltered, but I don't think that's the issue, because it works to just access it directly. I've tried this in a thousand different ways, including even trying to write this as a function in case that works, but it's the same problem (or worse, sometimes).

Thanks in advance for any help!

ETA: I tried pushing first the whole object and then just the object property, in order, to see what would happen, and here's what I get -- as you can see, it thinks the property directIntertextIDs (array index 1) doesn't exist, even though it's obviously there in the object (array index 0):

The code for this is:

const passageIntxts = [];

if (wordsFiltered.length > 0) {
for (let i in wordsFiltered) {
	let word = wordsFiltered[i];
	passageIntxts.push(word);
	passageIntxts.push(word.directIntertextIDs);
}}

So something really isn't making a whole lot of sense.

[dkrasne]

I solved half of the issue, but not the other half, so I'd still appreciate understanding what's going on.

I had defined wordsFiltered in one cell, with the first nine properties, and then added the remaining properties (including directIntertextIDs) to it in a second cell (all separate from the cells I'm working with now). For some reason, even though the properties were clearly part of the object that was being pushed into my test array, other forms of accessing them (such as calling them directly or -- as I eventually discovered -- using Object.entries()) won't find the properties. So I've joined the two cells, and now (I think) everything is working as it should, but I'd like to understand why there's such an inconsistency as to when the object does or doesn't have that property.

[mbostock]

You shouldn’t mutate a variable defined in another cell (without understanding the consequences). If you mutate a variable defined in another cell, then it’s likely that other cells will see the variable in an underdefined state. For example, consider these three cells:

const foo = {};

foo.bar = "bar";

display(foo.bar);

There’s no guarantee that the third cell here will see the value of foo.bar as "bar"; it could be undefined if the third cell happens to run before the second cell. The only guarantee is that the second and third cell run after the first cell (because the first cell defines foo, while the second and third cells reference foo). The evaluation graph looks like this:

What you should do instead is to combine mutation into the defining cell:

const foo = {};
foo.bar = "bar";

display(foo.bar);

The corresponding graph:

Now the second cell is guaranteed to run after the first cell, and is guaranteed to see foo only after foo.bar has been assigned.

Note that you can also ensure deterministic behavior by creating an explicit reference:

const foo = {};

let foo_bar; // a variable that exists solely so other cells can refer to it and guarantee order of execution
foo.bar = "bar";

foo_bar; // force this cell to run after the `foo_bar` cell that assigns `foo.bar`
display(foo.bar);

The corresponding graph: