Why's the syntax different between these two arrays in JS?

Question

They both contain the same values, but I'm wondering why they look different when I console them out in Dev tools.

var values = [6, 6, 6, 19, 13, 50]; 

function boxWidth() {
    var widths = new Array();
    widths.push(values);
    console.log(widths);
    console.log(values);
}

To clarify, you're asking why `widths` is `[Array(6)]` but `values` is `[6,6,6,19,13,50]`? — Dai, Aug 31 '17 at 21:12
"*They both contain the same values*" - well no, they don't. Click the inspect button (grey triangle) to see how they differ. — Bergi, Aug 31 '17 at 21:15
To clarify. one looks like -> `[6,6,6,19,13,50]` and the other looks like `[[6,6,6,19,13,50]]` if that help you see the difference.. — Keith, Aug 31 '17 at 21:16

score 5 · Accepted Answer · answered Aug 31 '17 at 21:13

5

The widths array is an array that has a single member referencing the values array, whereas values is an array of 6 numbers.

To copy the numbers in individually, do this:

widths.push(...values);

Or do it when you create the array:

var widths = [...values];

Or to be legacy compatible:

var widths = values.slice();

You can serialize the arrays to get a clearer view.

var values = [6, 6, 6, 19, 13, 50]; 

function boxWidth() {
    var widths = new Array();
    widths.push(values);
    console.log(JSON.stringify(widths));
    console.log(JSON.stringify(values));
} 

boxWidth();

answered Aug 31 '17 at 21:13

spanky

2,768
8
9

Thanks, totally understand now. Was a bit confused. I see that I had an array inside an array, does that make sense? – Edgar Quintero Aug 31 '17 at 21:25
Yep, that's exactly what you had. :-) – spanky Aug 31 '17 at 22:28

score 4 · Answer 2 · answered Aug 31 '17 at 21:17

values is a 1-dimensional array containing 6 numbers.

widths is a 2-dimensional array. Its first dimension is a single element, which is a reference to values. The second dimension is the 6 numbers in values.

console.log() only displays the first dimension in detail by default. You can click on the disclosure triangle of widths to see the contents of the inner dimension. If you change it to log JSON, you'll see the full structure of each. Then you'll see the extra level of nesting in widths.

var values = [6, 6, 6, 19, 13, 50]; 

function boxWidth() {
    var widths = new Array();
    widths.push(values);
    console.log(JSON.stringify(widths));
    console.log(JSON.stringify(values));
} 

boxWidth();

That's exactly what I just did, thanks for clearing that up for me. — Edgar Quintero, Aug 31 '17 at 21:25

Why's the syntax different between these two arrays in JS?

2 Answers2