# Trouble comprehending this Steamroller code

``````function steamrollArray(arr) {

var myArr = [];

for (var i=0; i<arr.length; i++) {

if (!Array.isArray(arr[i])) {
myArr.push(arr[i]);
}

else {
var subArray = steamrollArray(arr[i]);
myArr = myArr.concat(subArray);
}
}
return myArr;
}
steamrollArray([1,[2],[[3]]]);
``````

Just trying to make sense of what is going on here.

-The first number in the array is easy; that gets pushed right away.

-The second number is an array. Ok, so we call the function again with this value as itâ€™s argument. Because itâ€™s only one level deeper it should be pushed on that iteration.

-What I really donâ€™t get is how line 13 comes into play. I would think that since we are calling the function again for `[2]` that it would be pushed to `myArray` by the first if statementâ€¦ if this were true than line 13 would be redundant. Obviously itâ€™s vitally necessary, could someone talk me through why? (Preferably really slowly, recursion makes my head hurt!)

Yes, youâ€™re right, since `2` is not an array, it gets pushed to `myArr`.But which one ?

Each time `steamrollArray` (or any function, actually) is called, a new context is created.Think of it as creating a new tiny universe.

So this is how the story begins :

At line 20, when you call `steamrollArray([1,[2],[[3]]])`, you create a universe.Letâ€™s call it universe A.

Within this universe A, you are using the `var` keyword on myArr, which means youâ€™re creating a new variable called `myArr`, and this variable belongs to universe A.

then at line 13, you call `steamrollArray` again.Youâ€™re creating a new tiny universe, inside universe A! Letâ€™s call it universe B.

Within universe B, because the keyword `var` is used on `myArr`, youâ€™re also creating a new variable, that belongs to universe B, and is completely different from the `myArr` from universe A!

The loop and if statement within universe B will push `2` to `myArr` (the one from universe B), and in the end, universe B returns `myArr` (which is `[2]` ), and just vanishes.No more universe B. The value `[2]` is then sent to universe A `subArray` variable.

You already know the end of the story. `myArr` from universe A will concatenate `[2]`, giving `[1,2]`.And after that, the same thing will happen with `[[3]]`, you will call `steamrollArray` again, create universe C, then universe D inside universe C,â€¦

One important thing to understand here is, if you use the `var` keyword within a function, you are creating a new variable for this function.In this case, with the use of recursion, youâ€™re not overriding other variables by using the same variable name, because youâ€™re not declaring them in the same context.

One other thing to understand on the subject is (see my example below), within universe B(a nested function) you could have access to universe A(the wrapping context) variables.The universe A scope is available to universe B, because universe B is inside universe A.

One last thing: while you could access universe A scope from inside universe B, universe A cannot have access to universe B variables.

``````var name = "jack";
var name = "mike";

console.log(name); // mike

function someFunction() {
var name = "bill";
var billAge = " 'bill is 20' ";
function nestedFunction() {
var name = "tom";
var gender = "male";
console.log(name, billAge);
}

nestedFunction(); // tom 'bill is 20'
console.log(name); // bill
console.log(gender); // ReferenceError: gender is not defined

}

someFunction();
``````

update :

``````function someFunction() {

var name = "sam";

function anotherFunction() {
var name = "john";
yetAnotherFunction(); // sam
}

function yetAnotherFunction() {
console.log(name);
}

anotherFunction();

}

someFunction();
``````
3 Likes

This is an amazingly detailed and well thought out answer. Your analogy was perfect, and now whatâ€™s going on in the multiple function calls makes a lot more sense to me. Thank you so much!