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
– Patrick Barr, Commented May 17, 2017 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
– CollinD, Commented May 17, 2017 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
– Ken, Commented May 17, 2017 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. — chihabeddineAourinmouche
– chihabeddineAourinmouche, Commented May 17, 2017 at 19:34
@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
– Patrick Barr, Commented May 17, 2017 at 19:43

Community · Accepted Answer · 2017-05-23 11:47:19Z

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.

kamoroso94 · Accepted Answer · 2017-05-17 19:48:31Z

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, 2017 at 19:48

kamoroso94

1,7351 gold badge16 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related