R

E

A

C

T

O

xamples 

epeat

ode

pproach

ptimize

est

{Spiral Traversing}

Problem

1. You are given a multi-dimensional array of integers.

2. From the top left, spiral traverse each element in a clockwise order and return the integers in a single array.

var array = 
[[0,1,2,3,4], 
[5,6,7,8, 9], 
[10,11,12,13,14], 
[15,16,17,18,19]];

console.log(spiral(array));
//output should be [0,1,2,3,4,9,14,19,18,17,16,15,10,5,6,7,8,13,12,11];

Notes

• The subarrays in the array are always of equal length.

One Possible Approach

1. Start with an empty array [ ]

2. Base case: if the length of the array is 0 or 1, just return empty array or the one array

3. If the length of the array is greater than 1, push the elements of the top row into the empty array.

4. Transform the remaining elements so we can continue pushing the top row of elements into the empty array. Use recursion.

var array = 
[[1,2,3,4], 
[5,6,7,8], 
[9,10,11,12], 
[13,14,15,16]];

[1,2,3,4]


[5,6,7,8],
[9,10,11,12],    
[13,14,15,16] ----> [8, 12, 16]
                    [7, 11, 15]
                    [6,10,14]
                    [5,9,13]                          [1,2,3,4,8,12,16]
                    (return first array and do the 
                    same thing with the remaining 
                    elements) ----------------------> [15,14,13]           [1,2,3,4,8,12,16,15,14,13,9,5,6,7,11,10]
                                                      [11,10,9]
                                                      [7,6,5] -----------> [9,5]
                                                                           [10,6]
                                                                           [11,7] --> [6,7]
                                                                                      [10,11] --> [10,11]
                                                            

One Possible Solution

function spiral(array) {
    //if the array has a length of 0 or 1, return array
    if(array.length === 0) {
        return null;
    } else if (array.length === 1) {
        return array[0];
    }
    
    var firstRow = array[0],
        numRows = array.length,
        
        nextRow = [],
        newArr,
        rowIndex,
        colIndex = array[1].length - 1;
    
    //store elements in new arrays to push into the next row    
    for(colIndex; colIndex >= 0; colIndex--) {
        newArr = [];
        for(rowIndex = 1; rowIndex < numRows; rowIndex++) {
            newArr.push( array[rowIndex][colIndex]);
        }
        
        nextRow.push( newArr );
    }
    
    firstRow.push.apply( firstRow, spiral(nextRow));
    
    return firstRow;
}

Another Possible Solution

var array = [[1,2,3,4], [5,6,7,8], [9,10,11,12]];

var results = [];

1. Use shift to concat the first array with results 
    // results = [1,2,3,4]

2. Pop the last element of the remaining subarrays 
    // results = [1,2,3,4,8,12]

3. Reverse the remaining subarrays and their elemeents 
    // [[5,6,7], [9,10,11]] --> [[9,10,11], [5,6,7]]

4. Reverse each of the elements in the subarrays 
    // [[11,10,9], [7,6,5]]

5. Using recursion, call the function again. 

6. Use shift to concat the first array with results 
    // results = [1,2,3,4,8,12,11,10,9]

7. Pop last element to results 
    // results = [1,2,3,4,8,12,11,10,9,5]

8. Reverse remaining elements 
    // [6,7]

9. Shift to results
    // results = [1,2,3,4,8,12,11,10,9,5,6,7]

Another Possible Solution (The Code)

function getSpiralElements(input) {
    var results = [ ];
    var limit = 20;
    function getSpiralHelper(multiDimArr) {
        if (multiDimArr.length === 1 || multiDimArr.length === 0) {
          if (multiDimArr[0] && multiDimArr[0].length) {
              results = results.concat(multiDimArr[0]);
          }
          return;
        }
        results = results.concat(multiDimArr.shift());
        multiDimArr.forEach(function(subArray) {
            results = results.concat(subArray.pop());
        });
        multiDimArr = multiDimArr.reverse();
        multiDimArr.forEach( function (el, index, arr) {
            arr[index] = el.reverse();
        });
        return getSpiralHelper(multiDimArr);
    }
    var valid = true;
    input.forEach(function (el) {
        if (el instanceof Array === false ) 
            valid = false;
    });
    if (!valid) throw new TypeError("Input should be an array of arrays!")
    getSpiralHelper(input);
    return results;
}

Conclusion  

REPL.IT (First Solution)

REPL.IT (Second Solution)

 - Think about how to break up a problem into smaller pieces and use recursion when you are repeating actions.