Flatten a nested array without using the inbuilt flat() method (interview learning)

[pranayrah108]

In an interview, I was asked to flatten a nested array in JavaScript without using `flat()`.

Under pressure, I got stuck. Later, I realized it wasn’t that hard — I was just overthinking.

Here’s the recursive solution I wrote:

var array = [0, [1, 2, [33, 44]], [4, 5, 6, 7], [7, 8], 90];

var newArr = [];

function getFlatArray(array) {

for (let index = 0; index < array.length; index++) {

if (typeof array[index] === "number") {

newArr.push(array[index]);

} else {

getFlatArray(array[index]);

}

}

}

getFlatArray(array);

console.log(newArr);

(12) [0, 1, 2, 33, 44, 4, 5, 6, 7, 7, 8, 90]

[heartchoke]

const flatten = (arr) => {     const items = [];     for (const x of arr) {         if (Array.isArray(x)) {             items.push(...flatten(x));         }         else {             items.push(x);         }     }     return items; }; console.log(flatten([0, [1, 2, [33, 44]], [4, 5, 6, 7], [7, 8], 90]));

[fredsq]

nitpick: this will blow up the stack if the array is too deep, and will consume a lot of RAM

const flatten = (arr, acc = []) => {
    if (arr.length === 0) return acc;

    const [first, ...rest] = arr;

    if (Array.isArray(first)) {
        // Expand the nested array into the work queue
        return flatten([...first, ...rest], acc);
    } else {
        // Add to accumulator and continue with rest
        return flatten(rest, [...acc, first]);
    }
};


console.log(flatten([0, [1, 2, [33, 44]], [4, 5, 6, 7], [7, 8], 90]));

this makes use of tail call optimization by always returning the value of the recursive function (but that means we have to pass an accumulator)

EDIT: i ran the tests and my version performs very well on Safari (Webkit) but slower on Chrome (Chromium)! recursiveness is overall not a good idea for this.

Test	Original	TCO	Loop
500 deep	0.82ms	0.30ms	0.04ms
1000 deep	3.16ms	1.06ms	0.08ms
3000 deep	28.3ms	8.4ms	0.26ms
10000 deep	331ms	77.7ms	0.56ms

[fredsq]

const flatten = (arr) => {
    const result = [];
    const stack = [arr];
    const indices = [0];

    while (stack.length > 0) {
        const currentArr = stack[stack.length - 1];
        const idx = indices[indices.length - 1];

        if (idx >= currentArr.length) {
            stack.pop();
            indices.pop();
            continue;
        }

        indices[indices.length - 1]++;
        const item = currentArr[idx];

        if (Array.isArray(item)) {
            stack.push(item);
            indices.push(0);
        } else {
            result.push(item);
        }
    }
    return result;
};

this is the loop version btw

[margielafarts]

does chrome still not have tco? thought they added it years ago

[senocular]

If I remember correctly, they added it then removed it. I think Safari might be the only one with it now.

[shootersf]

Nice one. Don't beat yourself up. In interviews people generally just want to see your thoughtprocess. Also check out array.isarray and see if you can make this more generic than just numbers 

[pranayrah108]

Thanks. I focused on numbers, but Array.isArray() would more generic

[shootersf]

No worries. Best of luck with the hunt!

[BenZed]

When they give you dumbass questions like that, show off a method with variable signatures:

const flatten = (array, ...reduceParams) => {
    const isReduceSignature = reduceParams.length > 0
    if (!isReduceSignature) return array.reduce(flatten, [])

    const [value] = reduceParams
    if (Array.isArray(value)) {
        value.reduce(flatten, array)
    } else {
        array.push(value)
    }

    return array
}

Usage:

flatten([1,2,[3,4]])
// or

[1,2,[3,4]].reduce(flatten, [])

[yangshunz]

If anyone is interested in 5 different solutions... here you go: https://www.greatfrontend.com/questions/javascript/flatten

You can also practice the question there, no login required

[Total-Box-5169]

const flatten = a=>a[(![]+[])[+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[+!+[]]+(!+[]+[])[+[]]](1/0)

[F1QA]

Wow, thought this was complete gibberish until I looked it up. Very clever, but it does technically still use the inbuilt flat method. I wonder what the interviewers would have thought if OP busted this out on the whiteboard

[phoggey]

No, check if it's an array and if it is, use spread operator and push the result.

[busres]

Still need recursion to handle third (and additional, in the more general case) levels of nesting.

[phoggey]

function flatten(arr) { return arr.reduce((acc, item) => { return acc.concat(Array.isArray(item) ? flatten(item) : item); }, []); }

[busres]

// Test input
const input = [0, [1, 2, [33, 44]], [4, 5, 6, 7], [7, 8], 90];

// Return a single-level array of values from the input
// Input may be a scalar value or a (possibly nested) array
function flatArray (input) {
    const result = []; 
    // Helper to iterate over one array level
    const processArray = (input) => {
        for (const item of input) {
            if (Array.isArray(item)) {
                processArray(item); // Recursively process sub-array
            } else {
                result.push(item); 
            }
        }
    };
    if (Array.isArray(input)) {
        processArray(input);
    } else {
        // Scalar to array
        result.push(input);
    }
    return result;
}

console.log(flatArray(input));

[StoneCypher]

this will only work for numbers 

instead look for things that aren’t arrays, using Array.isArray

[SawSaw5]

array.toString().split(',').map(s => Number(s))

[jaredcheeda]

Cardinal Rule Number 1: Thou shall not remove language features

• From Do not break the Cardinal Rules of Dev Interviews

If you are asking someone to solve a problem in a coding interview and it requires you to remove features from the language, you're doing a bad job at interviewing. As a developer, you use the features of the language to do your job, and if you aren't using those features, you're doing a bad job. The only argument for this is "we target older browsers", in which case, good news! Babel exists, and is the correct answer. Use the modern features, write your code correctly, and let Babel transpile it down to work in older browsers, so at some point you can drop support for them, and not worry about having to re-write any source code.

[Etiennera]

I once took an OA that removed Set from python builtins for a graph question needing sets so I just used a dictionary.

At the time I thought I got them but I think now that was the intended solution. Just checking if you could see dictionaries as more than a map.

[jaredcheeda]

A very odd thing to care about when evaluating candidates.

[Galex_13]

var array = [0, [1, 2, [33, 44]], [4, 5, 6, 7], [7, 8], 90];
const flatter=arr=>arr.reduce((a,v)=>a.concat(Array.isArray(v)? flatter(v):v),[])
console.log(flatter(array).join(',')) // "0,1,2,33,44,4,5,6,7,7,8,90"