Best way to populate array with strings

Question

Say I have an array :

var newArray = [];

I can add strings to it like so :

var thisString = 'watch';
newArray.push(thisString);

What I want to do is have an array of this string. So, for example, I want newArray to have 50 of these 'thisString'.

I can do this easily via a loop :

for(var i=0;i<50;i++){
  newArray.push(thisString);
}

But say if I have 3 strings :

var firstString = 'first', secondString = 'second', thirdString = 'third';

And I want to push the third one 30 times, second 40 times and third 50 times, is the only way of doing this via the loop above ? Or can I say

newArray.push(firstString * 50); //obviously not correct javascript (psuedo code)

I want to do this as in my project I could have over 10 strings. I know this is what loops are built for but I was wondering if there are simpler ways of doing this.

JQuery can be used.

Answer 1

This is the coolest way I found to fill an array (size of 10) with the same string:

const array = new Array(10).fill('my-string-value');

So using this we can do:

const array = [
  ...new Array(10).fill('first'),
  ...new Array(5).fill('second'),
  ...new Array(20).fill('third'),
];

And if you want to do it generic you could do something like this:

const data = [
  { value: 'first', count: 10 }, 
  { value: 'second', count: 5 }, 
  { value: 'third', count: 20 },
];

const myArray = data.map(({ value, count }) => 
  new Array(count).fill(value)).flat();

Answer 2

To get an array of repeated elements you can use this approach:

var count = 3;
var sizedArray = Array.apply(null, Array(count));

This returns the following:

[undefined, undefined, undefined]

Next, you can use map to project the intended value, effectively giving you an array of the value repeated count times:

var value = 'hello';
var result = sizedArray.map(function(o) {
    return value;
});
// ['hello', 'hello', 'hello']

Putting this all together, your request could be solved as follows:

function generateArray(value, size) {
  var sizedArray = Array.apply(null, Array(size));
  var result = sizedArray.map(function() {
    return value;
  });
  return result;
}

var firstArray = generateArray('first', 5);
var secondArray = generateArray('second', 10);
var thirdArray = generateArray('third', 15);
var result = firstArray.concat(secondArray).concat(thirdArray);
console.log(result);

This approach will work with any string, even those with commas, since we're not taking an approach that splits on commas similar to the solution in the comments which would work for a limited set of inputs.

JSBin: demo link

Alternately, if you're using LoDash, you could use the _.range method to generate an array to map on, which would replace my use of Array.apply above:

var range = _.range(4);
// [0, 1, 2, 3]