Why is JavaScript adding extra square brackets when I push a sub array into another array?

Question

I am working on a CodeWars kata that involves multidimensional arrays. I have an array with three elements. Each element is an array with a name (string) and a sum (number). I am checking the numbers. If they exceed a certain amount, I want to remove the sub array with that number and put it at the end of the array. I used splice() and push().

In a test case that had a sub array that had to be moved, the sub array was pushed to the end of the parent array. But, it had an extra set of brackets. I was wondering why this happened. Is JavaScript automatically adding the brackets when the push takes place because the parent array has only sub arrays as elements?

Here is a link to some screenshots of the Chrome Dev Tools and one from CodeWars. I combined them into one image. The sub array at index 2 in the pop out window shows the sub array at the end that was moved/pushed in the first screenshot. The second screenshot shows the expanded view. The final screenshot I am attaching is the result shown in CodeWars where you can see the double brackets on the last sub array.

I cannot get the image to upload. So, here is a link to it online. https://sta.sh/01tp7y7zaayi

Here is the section of code where this is happening. I included the sort. But, I don't think it is affecting anything.

Note: I had a loop to go through the three elements to check them where the comment is located. But, I removed it because one shouldn't loop through an array and make changes to that array. I am coding a map() method for this to return a new array. But, I noticed that the double brackets were appearing. So, I didn't finish the map() part. I am trying to figure out what is happening in that splice() / push() section first.

var arrNew = [["Ben", sumBen], ["Amy", sumAmy], ["Sam", sumSam]];

arrNew.sort(function (a,b) {
    if (a[1] < b[1]) return  1;
    if (a[1] > b[1]) return -1;
    if (a[0] > b[0]) return  1;
    if (a[0] < b[0]) return -1;
    return 0;
});

// If someone's score is over 21, move them to the back.
var forMoving = arrNew.splice(0, 1);
arrNew.push(forMoving);

Please, add your code to the question itself.

Ángela
– Ángela

2017-12-04 19:29:40 +00:00
Commented Dec 4, 2017 at 19:29 — Ángela
– Ángela, Commented Dec 4, 2017 at 19:29
Please add the code you are using to the question. See MCVE

jrook
– jrook

2017-12-04 19:29:52 +00:00
Commented Dec 4, 2017 at 19:29 — jrook
– jrook, Commented Dec 4, 2017 at 19:29

Bsalex · Accepted Answer · 2017-12-04 19:42:43Z

1

Use Array.concat instead of push to concat arrays.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

edited Dec 4, 2017 at 19:42

answered Dec 4, 2017 at 19:39

Bsalex

2,9701 gold badge18 silver badges22 bronze badges

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

3 Comments

Janet Over a year ago

Thanks, Bsalex. But, can you please explain why the push does what it is doing even if it is a bit complex?

Bsalex Over a year ago

Because Array.splice returns an array (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) and Array.push adds an element, not an array (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)

Janet Over a year ago

Thanks. I will try to read more of the documentation next time instead of just skimming for an answer.

Collectives™ on Stack Overflow

Why is JavaScript adding extra square brackets when I push a sub array into another array?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related