How can I tersely create JavaScript array of arrays, with different lengths for each array (each row has a different, specified length)?

Question

I need to create a Javascript array to represent the layout of tables in a room:

0 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 
17 18 19

I have done this so far:

this.CHART = Array(4).fill(0).map((x, i) => Array(5).fill(0).map((y, j) => j));

...which produces this array:

This is very close to the requirement, but now I'm in over my head trying to assign the correct values, and assigning a different size to each array.

This smelly version works to create the required array, but I think there must be a better way, that will be helpful to me and to others reading this post in the future:

ROW_1 = [];
ROW_2 = [];
ROW_3 = [];
ROW_4 = [];

const ROW_1_SIZE = 5;
const ROW_2_SIZE = 7;
const ROW_3_SIZE = 5;
const ROW_4_SIZE = 3;

ROW_1 = Array(ROW_1_SIZE).fill(0).map((x, i) => i + 1);
ROW_2 = Array(ROW_2_SIZE).fill(0).map((x, i) => i + 1 + ROW_1_SIZE );
ROW_3 = Array(ROW_3_SIZE).fill(0).map((x, i) => i + 1 + ROW_1_SIZE + ROW_2_SIZE );
ROW_4 = Array(ROW_4_SIZE).fill(0).map((x, i) => i + 1 + ROW_1_SIZE + ROW_2_SIZE + ROW_3_SIZE );

Nina Scholz · Accepted Answer · 2019-08-15 16:52:46Z

2

You could keep a counter for the values in a closure.

var lengths = [5, 7, 5, 3],
    result = lengths.map((i => length => Array.from({ length }, _ => i++))(0));

result.forEach(a => console.log(...a));

Without IIFE

mapWithValue is a function which expects a value and returns a callback for Array#map for creating an array and maps increased values.

const mapWithValue = i => length => Array.from({ length }, _ => i++);

var lengths = [5, 7, 5, 3],
    result = lengths.map(mapWithValue(0));

result.forEach(a => console.log(...a));

edited Aug 15, 2019 at 16:52

answered Aug 15, 2019 at 16:30

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

7 Comments

zfrisch Over a year ago

This is a great answer. I didn't realize that providing a length property inside of an object literal was enough to consider it array-like, and I'm really surprised and a bit confused by the persistence of i. I feel like I have a mental blind-spot, but could you explain how that works? I don't get how i carries over after the first IIFE is completed.

Nina Scholz Over a year ago

maybe the second approach with an outside function makes clear, what's happening. the closure covers i in the scope of the returned callback for further use.

John Marquez Over a year ago

GREAT answer! @NinaScholz is it against the rules to ask a follow-up question? I simplified my requirements for the sake of an easy to read question, but I actually need each element of the row arrays to be an object: { table_number: i, seats_left: s }...I'm still wrapping my head around your answer and can't see where to make that modification.

Nina Scholz Over a year ago

i have no idea of the wanted result.

John Marquez Over a year ago

@NinaScholz, sorry, should I clarify? In the question, for the sake of simplicity, I asked for an array with simple elements: [0, 1, 2, 3,...], but I probably should have specified that I actually need an array of objects: [{ num: 0, seats_left: null}, {num: 1, seats_left:null}, {num: 2, seats_left: null}...], where the nulls are just placeholders that I will assign values to later in my code.

|

Collectives™ on Stack Overflow

How can I tersely create JavaScript array of arrays, with different lengths for each array (each row has a different, specified length)?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related