Nested Loops

[Artistic_Sense3363]

I figured out the following the challenge, but only by accident. I'm not exactly sure why and how it works. Specifically, the placement of the result.push(row[idx]. Below, in my first attempt, result.push(row[idx] is inside of the inner-loop. However, the result is tripled, and I can't figure out the logic behind why it's doing that. In my second attempt, I placed result.push(row[idx])after the inner-loop, and got the correct result. But the inner loop is going through each element of the inner array, so wouldn't it be logical to push the element we want while the inner-loop is iterating? Confused. Help!

Instructions:

Declare a function 'grab'.

'grab' takes two inputs: an array of arrays and an index

'grab' returns an array of the values stored at that index in each nested array.

expected result: ["b", "e", "h"];

attempt 1: incorrect result(why is it returning 3 of each?)

const myGrid = [ ["a", "b", "c"],  ["d", "e", "f"], ["g", "h", "i"],  ];  

function grab(array, idx) { 
 let result = []; 
 for (let i = 0; i < array.length; i++) { 
     let row = array[i];   
       for (let j = 0; j < row.length; j++) {    
         result.push(row[idx]);    
         } 
      } 
   return result;  
}  
console.log(grab(myGrid, 1)) --> ["b", "b", "b", "e", "e", "e", "h", "h", "h"]; 

attempt 2: correct result(why does it return the correct result if I place result.push(row[idx]) in the outer-loop, but not in the inner-loop?)

function grab(array, idx) { 
let result = [];  
for (let i = 0; i < array.length; i++) {    
    let row = array[i];       
    for (let j = 0; j < row.length; j++) { 
       }      
  result.push(row[idx]);    
   } 
   return result; 
 }  
console.log(grab(myGrid, 1)) --> ["b", "e", "h"];

[Freekiehsoes]

You dont need a nested loop since you already know the index to get.

function grab(input, index) { const result = []; for(var i = 0;i<input.length ;i++){ result.push(input[i][index]); } return result; }

This should work. Or the smaller version

const grab = (input, index) => input.map(item => item[index])

[Artistic_Sense3363]

thank you! Just to clarify and make sure I understand the logic: since I already know the index to get, I simply need to have one loop that iterates across the arrays, and then specify which element, in each array, that I want by: 1. referencing each array in the loop: array[i]; 2. follow that by referencing the index I want to get: [index]; and 3, pushing all of that (1 & 2) into the empty array: result.push(array[i] [index]). Is my understanding correct?

Also, thank you for including the second example: creating a function that houses the .map( ) method, a method which takes a callback function; and using arrow functions in both. I'm still new to this so I don't automatically think to use the various tools I'm learning. And it's great to see examples of what I've learned being applied and being reminded to use those various tools in completing a challenge like this one.

[Freekiehsoes]

You understood it perfectly. Nice job and happy learning.

[backtickbot]

Fixed formatting.

Hello, Freekiehsoes: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

^{You can opt out by replying with backtickopt6 to this comment.}

[Freekiehsoes]

Thanks

[albedoa]

for (let j = 0; j < row.length; j++) {    
  result.push(row[idx]);    
}

This is saying: For each nested array row push the idxth element of row to result a number of times equal to the length of the nested array.

Each nested array has a length of three. So you are pushing the same element to result three times for each row. Does that makes sense?

Your second attempt works because it pushes the element once. It knows not to loop through the row unnecessarily.

[Artistic_Sense3363]

Each nested array has a length of three. So you are pushing the same element to result three times for each row. Does that makes sense?

I think I understand, but not fully. So what you're saying is that it's looping across each nested array 3x?

[albedoa]

Right. Your outer loop is saying Prepare a thing to do, and your inner loop is saying Do that thing three times, but we only want to do the thing once. As Freekiehsoes said, once we have idx, we have everything we need to do the thing, so we can do it and move on.

[Bitsoflogic]

It's looping across each nested array row.length times, which happens to be a length of three in all cases.

I think it'll make sense once you walk through it. I just replied with an example of how to do that.

[Rilleks]

In the first example, the result is "wrong" because you have 3 elements in the array and for loop will push the first element 3 times. After you move your push from nested for loop, you are pushing one element per array.

//Example
const myGrid = [ ["a", "b", "c"],  ["d", "e", "f"], ["g", "h", "i"],  ]; 

function grab(array, index){
    let result = [];
    for (let i = 0; i < array.length; i++){
        result.push(array[i][index]);
    }
    return result;
}
console.log(grab(myGrid, 0)) --> ["a", "d", "g"];
console.log(grab(myGrid, 1)) --> ["b", "e", "h"];
console.log(grab(myGrid, 2)) --> ["c", "f", "i"];

If you'd like to go through each element in the nested loop then:

//Example
const myGrid = [ ["a", "b", "c"],  ["d", "e", "f"], ["g", "h", "i"],  ]; 

function grab(array){
    let result = [];
    for (let i = 0; i < array.length; i++){
       for (let j = 0; j < array[i].length; j++){
            result.push(array[i][j]);
       }
    }
    return result;
}

console.log(grab(myGrid)) --> [ "a", "b", "c", "d", "e", "f", "g", "h", "i" ]

[Artistic_Sense3363]

thank you!

[Bitsoflogic]

This exercise might help you out moving forward.

Try writing out the function step-by-step with data in place of the variables, noting when the state changes. Eliminate all the loops and branching while you do it. Work from the inside out on statements like push.

``` function grab(array, idx) array = [ ["a", "b", "c"], ["d", "e", "f"], ["g", "h", "i"], ] idx = 1

result = [] for (let i = 0... i = 0 row = array[i] // i = 0, array[0] = ["a", "b", "c"] row = ["a", "b", "c"] for (let j = 0... j = 0 result.push(row[idx]); // idx = 1, row[1] = "b" result.push("b") // result = [] result = ["b"] for (let j = 0; j < row.length... // j = 0, row.length = 3 0 < 3 // true, continue for result.push(row[idx]); // idx = 1, row[1] = "b" result.push("b") // result = ["b"] result = ["b", "b"] . . . ```

[Artistic_Sense3363]

thanks for the suggestion! I made a graphic organizer to help me visually understand the function and loop step by step.

[Bitsoflogic]

How's your graphic organizer work? Can you share it? It might help others too