How to put together two arrays?

I would like to read your opinions on this issue…
I have two arrays. One has three items ['A', 'C', 'E'] and the other has two items ['B', 'D']. I need to combine them like this: 'ABCDE'.

I came up with two solutions

first:

const arrayOne = ['A', 'C', 'E'];
const arrayTwo = ['B', 'D'];

let result = arrayOne.shift();
for (let i = 0; i < arrayOne.length; i++) {
  result += arrayTwo[i] + arrayOne[i];
}

console.log(result);
// ABCDE

second

const arrayOne = ['A', 'C', 'E'];
const arrayTwo = ['B', 'D'];

let result = arrayOne.reduce(
  (acc, curr, index) => acc + arrayTwo[index - 1] + curr
);

console.log(result);
// ABCDE

Which solution do you think will be better?
Do you have any others?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

If you can change the order in the arrays maybe the concat method would work.

@grindd What if the first array has two elements and the second array has three elements? Neither of these approaches will produce the same result.

const arrayOne = ['B', 'D'];
const arrayTwo = ['A', 'C', 'E'];

console.log(result);

Please pretend that the first always has one more element than the other each time.

Why? That’s a good way to write bugs. You can handle the case where the two arrays come in a different order, and the case where one array is much longer than the other with some small changes.

1 Like

I know it will always be that way.
I came across this problem in this project: https://www.freecodecamp.org/learn/quality-assurance/quality-assurance-projects/american-british-translator
Here is my repl: https://replit.com/@PerfectAndrej/boilerplate-project-american-british-english-translator#components/translator.js

Here a particular function

  replace(text, phrase, translation, highlight) {
    const regex = RegExp('\\b' + phrase + '(?![a-z])', 'gi');
    const textWithoutPhrases = text.split(regex);
    let phrases = text.match(regex);

    if (phrases) {
      phrases = phrases.map((phrase) => {
        let translated;
        if (this.checkIsUppercase(phrase)) {
          translated = translation.toUpperCase();
        } else if (this.checkIsCapitalized(phrase)) {
          translated = this.capitalize(translation);
        } else {
          translated = translation;
        }
        if (highlight) {
          return '<span class="highlight">' + translated + '</span>';
        } else {
          return translated;
        }
      });
    }

    return textWithoutPhrases.reduce(
      (acc, curr, index) => acc + phrases[index - 1] + curr
    );
  }

It sounds like you already have an approach you don’t want to change at all.

1 Like

I know it will always be that way.

Your confidence reminds me of General Custer. :wink:

Why would you want a solution that may fail one day? This is a real issue in development. You have a battle between what is the bare minimum to meet the immediate needs and what would be “fool proof” in the future. In reality, neither is “correct” and we often have to make compromises and make tough decisions.

But in this case, a robust solution is easier than what you are trying to do:

const result = arrayOne.concat(arrayTwo).sort().join('');

That is more compact, easier to read, and will work no matter how many are in each and what order they start out in. What does it cost you? A tiny bit of pride and it takes 0.00017 seconds longer. In general, that’s a great trade off.

2 Likes