As you may have seen if you’ve been following the interwebs lately, these new methods to flatten arrays have triggered quite a bit of a stir. Now known at the #Smooshgate, the gist of it is that Array.prototype.flatten() is being monkey-patched by MooTools, which is still used by some websites, so at some point a suggestion popped-up to name the method smoosh instead of flatten as a joke, to avoid breaking some websites still relying on MooTools. A lot of people took the smoosh suggestion seriously, and quite a bit of keystrokes were lost over this.
Let’s go over them now.
— Sorry to interrupt this program! 📺
Given the current situation with COVID-19, times are hard for most of us, but if you're stuck at home you can perhaps use that extra time to work on your front-end skills. Wes put all of his courses at 50% off to help out with the current challenge we're facing.
Plus, these are affiliate links, so if you purchase a course you help Alligator.io continue to exist at the same time! 🙏
As its name suggests, the flat() method available on the Array prototype returns a new array that’s a flattened version of the array it was called on. Without arguments passed-in, a depth of 1 is assumed. Otherwise, if a number is passed-in as the first argument, it’s used as the maximum depth to flatten the array.
Here’s a simple example:
const animals = [['🐕', '🐶'], ['😺', '🐈']]; const flatAnimals = animals.flat(); // same as: const flatAnimals = animals.flat(1); console.log(flatAnimals); // ['🐕', '🐶', '😺', '🐈']
And notice what happens when the total depth of the array is larger than the maximum depth for the flat method:
const animals = [['🐕', '🐶'], ['😺', '🐈', ['😿',['🦁'], '😻']]]; const flatAnimals = animals.flat(2); console.log(flatAnimals); // ['🐕', '🐶', '😺', '🐈', '😿',['🦁'], '😻']
You can use Infinity if you want to flatten an array of arbitrary depth:
const animals = [['🐕', '🐶'], ['😺', '🐈', ['😿',['🦁'], '😻']]]; const flatAnimals = animals.flat(Infinity); console.log(flatAnimals); // ['🐕', '🐶', '😺', '🐈', '😿', '🦁', '😻']
The flatMap() method available on the Array prototype has the same effect as using the map() method followed by the flat() method with the default depth of 1. In other words, flatMap() maps each value to a new value and then the resulting array is flatten up to a maximum depth of 1.
Here’s an example:
const animals = ['🐕', '🐈', '🐑', '🐮']; const noises = ['woof', 'meow', 'baa', 'mooo']; const mappedOnly = animals.map((animal, index) => [animal, noises[index]]); const mappedAndFlatten = animals.flatMap((animal, index) => [animal, noises[index]]); console.log(mappedOnly); // [['🐕', 'woof'], ['🐈', 'meow'], ['🐑', 'baa'], ['🐮', 'mooo'] console.log(mappedAndFlatten); // ['🐕', 'woof', '🐈', 'meow', '🐑', 'baa', '🐮', 'mooo']
The callback function passed-into flatMap() expects the same arguments as the ones that can be passed-in to the traditional map() method, the first being the current value, the second being the index of the current value in the array and the third being the full array being mapped over.
Support is already pretty good, with the latest version of most recent browsers supporting both methods. For example, the methods are supported in Chrome 69+, Firefox 62+ and Safari 12+. There currently is no support for any version of Internet Explorer or Edge, at the time of this writing.