How to create a grid in JavaScript using a one liner for loop?

Question

Good evening programmer community! Is it possible to create a one liner array in Javascript. To make my question clearer, I would like to emulate the following one liner that I usually do in Python on Javascript:

>>> arrAy=[['_' for i in range(10)] for j in range(10)]

which gives the following result:

>>> for i in arrAy:
    print(i)
>>> [['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_'],
['_', '_', '_', '_', '_', '_', '_', '_', '_', '_']]

Thank you

Well you can do everything in 1 line in JavaScript technically, just separate statements with `;` so `for(var i = 0; i < arrAy.length; i++) { console.log(arrAy[i]); }` is valid — Patrick Barr, May 17 '17 at 19:19
`for (var i = 0; i < 10; i++) for (var j = 0; j < 10; j++) doSomething(i, j);` is definitely a oneliner — CollinD, May 17 '17 at 19:19
I really wanted this to work `var myArr = new Array(10).map(function() { return new Array(10).map(function() { return "_"; }); });` but due to the way that `new Array()` initilizes the array with `undefined` values and how `map()` only runs the provided function on array indexes with values, it doesnt :(. You could do `var anArray = [[],[],[],[],[],[],[],[],[],[]].map(function(arr) { return ["_","_","_","_","_","_","_","_","_","_"]; });` though :) — Ken, May 17 '17 at 19:34
@PatrickBarr, I may not have perfectly understood your idea, but it seems to me that you don't quite get my question (I'm sorry for any ambiguity). I don't need to display the array arrAy, but to create it with a oneliner. Something like: `for ( i amount of iterations ) {for ( j amount of iterations ) { '_' }}` Thank you. — Chihab, May 17 '17 at 19:34
@Barmar, it is very important for me to write minimalistic code that is clean and does the job. — Chihab, May 17 '17 at 19:41
@Chihab sorry I wasn't trying to answer, just point out that javascript doesn't exactly follow "lines" like conventional languages, I think you should look at le_m's answer below, and javascript minification if you're looking for minimalist code — Patrick Barr, May 17 '17 at 19:43
In what context is this more important than writing clear code? If you need to reduce the download time, use a minifier. — Barmar, May 17 '17 at 19:43

score 2 · Answer 1 · edited May 23 '17 at 11:47

First of all, you would need to define a range generator as there is no built-in equivalent:

function* range(n) {
  for (let i = 0; i < n; i++) yield i;
}

Then, you would need to replace the generator comprehension with for...of loops as comprehensions are a non-standard feature in JavaScript and unlikely to be added to ECMAScript in the future.

const arrAy = [];
for (let i of range(10)) {
  let row = [];
  for (let j of range(10)) row.push('_');
  arrAy.push(row);
}

This is very close to the generator based python original, but neither idiomatic JavaScript nor a one-liner. Also, you don't really need the generators as you store the whole result in an array anyway.

A non-generator based one-liner could look as follows:

const arrAy = Array.from({length: 10}, () => Array.from({length: 10}, () => '_'));

or shorter

const arrAy = Array.from({length: 10}, () => Array(10).fill('_'));

Of course, as outlined in the comments, you could squeeze the plain old for-loop into a one-liner, too, but that's the job of a code minifier, not the programmer.

score 0 · Answer 2 · answered May 17 '17 at 19:48

0

Yes you can with the magic of map and fill.

const grid = (width, height, value) => new Array(width)
  .fill(null)
  .map(v => new Array(height)
    .fill(value));
const grid10x10 = grid(10, 10, "_");
console.log(grid10x10);  // tada!

answered May 17 '17 at 19:48

kamoroso94

1,713
1
16
19

How to create a grid in JavaScript using a one liner for loop?

2 Answers2