title: Split array into two different arrays using functional JavaScript
body: <p>I was wondering what would be the best way to split an array into two different arrays using JavaScript, but to keep it in the realms of functional programming.</p>
  
  <p>Let's say that the two arrays should be created depending on some logic.  For instance splitting one array should only contain strings with less than four characters and the other the rest.</p>
  
  <pre><code>const arr = ['horse', 'elephant', 'dog', 'crocodile', 'cat'];
  </code></pre>
  
  <p>I have thought about different methods:</p>
  
  <p><strong>Filter</strong>:</p>
  
  <pre><code>const lessThanFour = arr.filter((animal) =&gt; {
      return animal.length &lt; 4;
  });
  const fourAndMore = arr.filter((animal) =&gt; {
      return animal.length &gt;= 4;
  });
  </code></pre>
  
  <p>The problem with this for me is that you have to go through your data twice, but it is very readable.  Would there be a massive impact doing this twice if you have a rather large array?</p>
  
  <p><strong>Reduce</strong>:</p>
  
  <pre><code>const threeFourArr = arr.reduce((animArr, animal) =&gt; {
    if (animal.length &lt; 4) {
      return [[...animArr[0], animal], animArr[1]];
    } else {
      return  [animArr[0], [...animArr[1], animal]];
    }
  }, [[], []]);
  </code></pre>
  
  <p>Where the array's 0 index contains the array of less than four and the 1 index contains the array of more than three.</p>
  
  <p>I don't like this too much, because it seems that the data structure is going to give a bit of problems, seeing that it is an array of arrays.  I've thought about building an object with the reduce, but I can't imagine that it would be better than the array within an array solution.</p>
  
  <p>I've managed to look at similar questions online as well as Stack Overflow, but many of these break the idea of immutability by using <code>push()</code> or they have very unreadable implementations, which in my opinion breaks the expressiveness of functional programming.</p>
  
  <p>Are there any other ways of doing this? (functional of course)</p>