JavaScript: How to add x to an array x times?

Question

I imagine this is similar to array padding, but I wonder if it can be simplified at all.

var arr = [1,2,3],
    x   = 5;

for (var i=0; i<x; i++) {
  arr.push(x);
}

console.log(arr);
//=> [1, 2, 3, 5, 5, 5, 5, 5]

Is there any way to do this without using the for loop?

---

Update

Even though there's mover clever solutions, the for-loop seems to be the most performant

Benchmarks on jsperf

Solution 1

Unless you get penalised for each line of code you write, that code is fine: succinct and very understandable.

If you do get penalised, just use:

for (var i = 0; i < x; i++) arr.push(x);

on a single line :-)

Beyond that, your best bet would be a function along the lines of:

arr = appendXCopiesOfX (arr, x);

but I don't think you're really gaining anything there since, as mentioned, there should be very little problem understanding such a small loop.

All in all, it's probably a waste of time and effort trying to improve what you currently have.

Solution 2

Without for loop:

var arr = [1,2,3], x   = 5;
arr = arr.concat(Array.apply(null, Array(x)).map(function() { return x; }));

// or even
arr = arr.concat(Array.apply(null, Array(x)).map(x.valueOf, x));

Solution 3

For those using ES6 and have come across this issue. Try using Array.fill() https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

I used this method in testing to generate mock data for x rows without needing to loop.

Edit: Sorry, I was off on this one. This code will generate an array x long, but they would all have the same value. A better code snippet is at the end of this post.

newOrdersX: function(x) {
  return Array(x).fill({
    name: faker.random.name()
  });
}`

This one will be an array x levels long, but each value will be different. Note that .fill() still needs to be called or it won't work.

newOrdersX: function(x) {
  return Array(x).fill().map(() => ({
    name: faker.random.name()
  }));
}`