6

I am trying to populate items of an array with same items and order.

As an example, I have an array like this, with two string elements.

const myArr = ['A','B'];

What I'm trying to do is something like that. I need to populate items 10 times or more. I'm thinking of a for loop but maybe there are more efficient alternatives.

const myArr2 = ['A','B','A','B','A','B','A','B','A','B'];

How can I achieve this with Vanilla JS ?

Improve this question
4
  • I would be interested to know if there is a way to do it without a loop. I would have done a loop to achieve that. Commented Mar 11, 2021 at 17:12
  • @MrJami It's really strange though. I'm making a marquee animation. By default, there are almost 100 lines of html and looks very unprofessional. In my mind, creating array and populating it before html injection would be a good shortcut. Could you please share your approach with loop? Commented Mar 11, 2021 at 17:16
  • You could use array fill method to populate the same values 'n' no: of times as per your requirement. Example - let filledArray = new Array(10).fill('A'); Commented Mar 11, 2021 at 17:19
  • There are several ways to do this in some way, but sadly, i still don't know an equivalent of the low level TypedArray.prototype.set for normal arrays. Therefore, something like Array.from({ length: 10 }, () => ['A', 'B']).flat() is the best i can think of, or similar ways, that result in useless intermediary arrays, and pray the function inliner works properly Commented Mar 11, 2021 at 17:20

7 Answers 7

Reset to default
5

You could take a standard approach with an array constructor, the length, a filling and flattening.

const
    pattern = ['A','B'],
    times = 5,
    result = Array(times).fill(pattern).flat();

console.log(...result);

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

1 Comment

This is exactly what has been asked, and in the most elegant way
2

If you're not opposed to loops, you could use the spread syntax to push the contents of your array a number of times.

const myArr = ['A', 'B'];

let myArr2 = [];
for (let i = 0; i < 5; i++) {
  myArr2.push(...myArr);
}

console.log(myArr2);

If you don't like loops, Array.map could work.

const myArr = ['A', 'B'];

let myArr2 = Array.from({ length: 10 })
                  .map((x, i) => x = myArr[i % 2]); 

console.log(myArr2);

Improve this answer

2 Comments

I've achived this with an old school loop, I was wondering if it's possible in other ways. Thank you for sharing your mapping approach it looks perfect.
Array.from has built-in mapping ...
2

With a simple for loop:

const myArr = ['A','B'];

const times = 10;

let newArr = [];
for (let i=0;i<times;i++){
  newArr = newArr.concat(myArr);
}

console.log(newArr)

Oneliner:

const myArr = ['A','B'];
const times = 10;
const len = myArr.length;

const newArr = Array(len*times).fill(0).map( (x,i) => myArr[i%len]);

console.log(newArr)

Improve this answer

1 Comment

Thank you, it's a descent approach, I've achived it like this. ``` const myArr = ['A','B']; const secondArr = []; for(let i = 0; i<20; i++){ myArr.forEach(item =>secondArr.push(item)) } ```
1

As requested, this would be my approach with loop:

I would use a negative while loop (explanation why) You can also check the methods out to see which method is the fastest one. I made a test here comparing the push method in a for loop and Array.map and also the negative while loop. On my browser the negative while loop was the fastest. If you want to have much more duplicates (e.g. 1000 duplicates) then the difference of the methods will be even larger (benchmark test for 1024 array length and various methods).

It seems that chromium based browsers (Opera, Edge, google chrome) get the fastest results with a negative while loop and for firefox the array.from map function delivers the fastest results.

let myArray = ['A', 'B'];

let k = 10; //array.length^k = new array length

while (--k){
    myArray.push(...myArray);
}

console.log(myArray);

Improve this answer

4 Comments

Thank you for sharing, this is the first time I'm seeing a negative while loop in action.
@Çetin you can also test this in a benchmark jsben.ch/MBG1a I also added the answer above to the benchmark, the negative loop is even duplicating more and it still is the fastest method
Now I see... your implemention is WRONG according to what OP asked. It creates arrays with length raised to the power of 2. If I want to replicate 19 times, how would I do?
@testing_22 he asked me to show him my approach :) that's what I did ^^
1

You can simply use push and recursion WITHOUT loops

const newArr = []    
const myArr = ['A','B']

const replicate = n => 
(n === 0 ? [] : newArr.push(...myArr) & replicate(n-1));

replicate(3)
console.log(newArr)

Improve this answer

1 Comment

This method is the slowest method on any browser, it is 80+ times slower than other methods (while duplicating over 500 times)
1

Using Array.prototype.join("") and String.prototype.repeat().

const
    data = ['A','B'],
    result = Array.from(data.join("").repeat(5));

console.log(result);

Improve this answer

Comments

-1

Try

myArr.push('A');

foreach element you want to add.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.