Why this Javascript code is behaving asynchronous?

Question

I have a html-file, looks like:

...
<div class="colorbox" data-product="oldUpload" data-color="brown" style="background-color: #31261d" title="Brown"></div>
<div class="colorbox" data-product="oldUpload" data-color="cranberry" style="background-color: #6e0a25" title="Cranberry"></div>
...
<div class="colorbox" data-product="TSHIRT" data-color="brown" style="background-color: #31261d" title="Brown"></div>
<div class="colorbox" data-product="TSHIRT" data-color="cranberry" style="background-color: #6e0a25" title="Cranberry"></div>
...
<script src="profiles.js"></script>

And following JavaScript file:

function getSelectedColors() {
  let colorboxes = document.getElementsByClassName('colorbox');
  let selectedColors = [];
  for (let colorbox of colorboxes) {
    if (colorbox.classList.contains('checked')) {
        selectedColors[colorbox.dataset.product] = (selectedColors[colorbox.dataset.product] || '') + colorbox.dataset.color + ',';
    }
  }
  console.log('Colors:' + selectedColors);
  console.log(selectedColors);
  return selectedColors;
}

If I run the function getSelectedColors() the output in console is:

Line 1: "Colors: "

Line 2: "[oldUpload: "brown,cranberry,pink,purple,", TSHIRT: "cranberry,...]"

So it seems, the code in function is asynchronous, because "selectedColors" is an empty array directly after for-loop and the function also returns an empty array. But at the moment, I don't understand why, because I think, there's nothing asynchronous in my code.

So why this JS code is behaving asynchronous?

Thanks, Klaus

Are you running this in Chrome? The Chrome console is fairly notorious for doing weird things like this. — Pointy
– Pointy, Commented May 1, 2019 at 17:05
@Pointy: Yeah, that was just an error in writing my question. I just fixed it. — Klaus Schreiber
– Klaus Schreiber, Commented May 1, 2019 at 17:07
@MaheerAli: The script tag is already at the end. I will edit my question to clarify this. — Klaus Schreiber
– Klaus Schreiber, Commented May 1, 2019 at 17:07
No, your code is not asynchronous. ""selectedColors" is an empty array directly after for-loop" - what makes you think that? Though yes, of course, the array will still have a .length of 0. What the console shows you are non-index properties of the array object. Don't abuse arrays like that! — Bergi
– Bergi, Commented May 1, 2019 at 17:08
@Eric yes, th doc should be definitly ready, beause the javascript file is included at the end — Klaus Schreiber
– Klaus Schreiber, Commented May 1, 2019 at 17:11

Kai Lehmann · Accepted Answer · 2019-05-01 17:13:52Z

2

Change let selectedColors = []; to let selectedColors = {};

In JS spec arrays only have a numeric index. Other indices are not enumerated and so "invisible" in your console.

answered May 1, 2019 at 17:13

Kai Lehmann

5084 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonas Wilms · Accepted Answer · 2019-05-01 17:19:34Z

0

  'Colors:' + selectedColors

Through concatenating the array with a string, the array gets implicitly converted to a string. That will join all the values of the array:

 "" + [1, 2, 3] // "1,2,3"

In your case the array is actually empty, it contains no numerical keys.

answered May 1, 2019 at 17:19

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Collectives™ on Stack Overflow

Why this Javascript code is behaving asynchronous?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related