JS Array Flat Method: Flatten Nested Arrays Fast

const nested = [[1, 2], [3, 4], [5, 6]];
 
const flat = nested.flat();
console.log(flat); // [1, 2, 3, 4, 5, 6]
 
// Original unchanged
console.log(nested); // [[1, 2], [3, 4], [5, 6]]

const newArray = array.flat(depth)

const data = [1, [2, 3], [4, [5, 6]]];
 
const flat1 = data.flat();      // depth = 1 (default)
console.log(flat1); // [1, 2, 3, 4, [5, 6]]
// One level flattened: [2, 3] spread out, but [5, 6] inside [4, ...] stays nested

const data = [1, [2, [3, [4, [5]]]]];
 
const flat2 = data.flat(2);
console.log(flat2); // [1, 2, 3, [4, [5]]]

const deeplyNested = [1, [2, [3, [4, [5, [6, [7]]]]]]];
 
const fullyFlat = deeplyNested.flat(Infinity);
console.log(fullyFlat); // [1, 2, 3, 4, 5, 6, 7]

const sparse = [1, , 3, , 5];
console.log(sparse.flat()); // [1, 3, 5]
 
const nestedSparse = [1, , [2, , 3], [, 4]];
console.log(nestedSparse.flat()); // [1, 2, 3, 4]

const holey = [1, , 2, , 3];
const clean = holey.flat(); // Removes holes and returns [1, 2, 3]
console.log(clean); // [1, 2, 3]

const page1 = [{ id: 1, name: "Widget" }, { id: 2, name: "Gadget" }];
const page2 = [{ id: 3, name: "Gizmo" }, { id: 4, name: "Doohickey" }];
const page3 = [{ id: 5, name: "Thingamajig" }];
 
const allPages = [page1, page2, page3];
const allProducts = allPages.flat();
console.log(allProducts.length); // 5

const articles = [
  { title: "React Basics", tags: ["React", "Frontend"] },
  { title: "Node.js Guide", tags: ["Node.js", "Backend"] },
  { title: "Full Stack", tags: ["React", "Node.js", "Full Stack"] },
];
 
const allTags = articles.map(a => a.tags).flat();
console.log(allTags);
// ["React", "Frontend", "Node.js", "Backend", "React", "Node.js", "Full Stack"]
 
// Remove duplicates
const uniqueTags = [...new Set(allTags)];
console.log(uniqueTags);
// ["React", "Frontend", "Node.js", "Backend", "Full Stack"]

const fileSystem = [
  { folder: "src", files: ["index.ts", "app.ts"] },
  { folder: "lib", files: ["utils.ts", "helpers.ts", "constants.ts"] },
  { folder: "tests", files: ["app.test.ts"] },
];
 
const allFiles = fileSystem.map(dir => 
  dir.files.map(f => `${dir.folder}/${f}`)
).flat();
 
console.log(allFiles);
// ["src/index.ts", "src/app.ts", "lib/utils.ts", "lib/helpers.ts", "lib/constants.ts", "tests/app.test.ts"]

// Some entries are arrays, some are single values
const rawInput = ["alice", ["bob", "carol"], "dave", ["eve", "frank", "grace"]];
 
const normalized = rawInput.flat();
console.log(normalized);
// ["alice", "bob", "carol", "dave", "eve", "frank", "grace"]

const nested = [[1, 2], [3, 4], [5, 6]];
 
// Old way: reduce + concat
const flatOld = nested.reduce((acc, arr) => acc.concat(arr), []);
 
// New way: flat()
const flatNew = nested.flat();
 
// Both produce: [1, 2, 3, 4, 5, 6]

// Old way: recursive function
function deepFlatten(arr) {
  return arr.reduce((acc, val) => {
    return acc.concat(Array.isArray(val) ? deepFlatten(val) : val);
  }, []);
}
 
// New way
const result = deeplyNested.flat(Infinity);

const sentences = ["Hello world", "Good morning", "Nice day"];
 
// map + flat (two passes)
const words1 = sentences.map(s => s.split(" ")).flat();
 
// flatMap (one pass)
const words2 = sentences.flatMap(s => s.split(" "));
 
// Both: ["Hello", "world", "Good", "morning", "Nice", "day"]

const data = [[1, 2], [3, 4]];
 
// flat() returns a NEW array
data.flat();
console.log(data); // [[1, 2], [3, 4]] — unchanged!
 
// Fix: assign the result
const result = data.flat();
console.log(result); // [1, 2, 3, 4]

const users = [
  { name: "Alice", hobbies: ["reading", "hiking"] },
  { name: "Bob", hobbies: ["gaming", "cooking"] },
];
 
// Two-pass approach (wasteful intermediate array)
const hobbies1 = users.map(u => u.hobbies).flat();
 
// Better: single-pass with flatMap()
const hobbies2 = users.flatMap(u => u.hobbies);

const sparse = [1, , 3, , 5];
 
// flat() removes holes reliably
const clean = sparse.flat();
console.log(clean); // [1, 3, 5]
 
// For arrays without nesting, filter() also works
const cleaned = sparse.filter(() => true);
console.log(cleaned); // [1, 3, 5]

// Data where nesting carries meaning
const orgChart = [
  "CEO",
  ["VP Engineering", ["Senior Dev", "Junior Dev"]],
  ["VP Marketing", ["Designer"]],
];
 
// flat(Infinity) destroys the hierarchy
const destroyed = orgChart.flat(Infinity);
console.log(destroyed);
// ["CEO", "VP Engineering", "Senior Dev", "Junior Dev", "VP Marketing", "Designer"]
// The organizational structure is lost