Weird behavior observed in loop through 2D Array (FCC)

Question

Weird behavior observed in loop through 2D Array (FCC)

I'm currently engaged in a learning exercise and I am attempting to comprehend the code provided. While I believed I had a solid grasp of arrays and loops, this particular piece of code has left me feeling quite puzzled.

The code snippet below:

  function zeroArray(m, n) 
  {  
  let newArray = [];
  let row = [];

  for (let i = 0; i < m; i++) 
  {    
    for (let j = 0; j < n; j++) 
    {      
      row.push(0);
    }    
    newArray.push(row);
  }
  return newArray;

 }

 let matrix = zeroArray(3, 2);
 console.log(matrix);

Returns

[ [ 0, 0, 0, 0, 0, 0 ],
  [ 0, 0, 0, 0, 0, 0 ],
  [ 0, 0, 0, 0, 0, 0 ] ]

However, my anticipated outcome was

[ [ 0, 0, ],
  [ 0, 0, 0, 0, ],
  [ 0, 0, 0, 0, 0, 0 ] ]

Based on the observation that during each iteration of i loop, we are appending (0) to row[] twice before inserting row[] into newArray.

Contrary to my expectation, upon inspection in my VSCode debugger, it appears that during each i loop, all existing indices of newArray are being updated with the most recent version of the row[] array.

What could be causing this phenomenon?

javascript arrays loops

Answer 1

Answer №1

1) Begin the outer loop with i = 1 and iterate until i <= m, ensuring the loop runs m times

for (let i = 1; i <= m; i++) {

2) Every time the inner loop starts, generate a new row and add it to the newArray after the completion of the inner loop

3) Define the condition for the inner loop as j < n * i

  for (let j = 0; j < n * i; j++) {

function zeroMatrix(m, n) {
  let newArray = [];
  // const row = []   // (-)
  for (let i = 1; i <= m; i++) {
    const row = []; // (+)
    for (let j = 0; j < n * i; j++) { // (+)
      row.push(0);
    }
    newArray.push(row);
  }
  return newArray;
}

let matrix = zeroMatrix(3, 2);
console.log(matrix);

/* This snippet is not directly related to the solution. It is just used to adjust the output height. Please ignore it */
.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

1) Begin the outer loop with i = 1 and iterate until i <= m, ensuring the loop runs m times

for (let i = 1; i <= m; i++) {

2) Every time the inner loop starts, generate a new row and add it to the newArray after the completion of the inner loop

3) Define the condition for the inner loop as j < n * i

  for (let j = 0; j < n * i; j++) {

function zeroMatrix(m, n) {
  let newArray = [];
  // const row = []   // (-)
  for (let i = 1; i <= m; i++) {
    const row = []; // (+)
    for (let j = 0; j < n * i; j++) { // (+)
      row.push(0);
    }
    newArray.push(row);
  }
  return newArray;
}

let matrix = zeroMatrix(3, 2);
console.log(matrix);

/* This snippet is not directly related to the solution. It is just used to adjust the output height. Please ignore it */
.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

To properly push to newArray, it is important to create a copy of the array:

function zeroArray(m, n) {
  let newArray = [];
  let row = [];

  for (let i = 0; i < m; i++) {
    for (let j = 0; j < n; j++) {
      row.push(0);
    }
    newArray.push(row.slice());
  }
  return newArray;

}

let matrix = zeroArray(3, 2);
console.log(JSON.stringify(matrix));

Answer 4

To properly push to newArray, it is important to create a copy of the array:

function zeroArray(m, n) {
  let newArray = [];
  let row = [];

  for (let i = 0; i < m; i++) {
    for (let j = 0; j < n; j++) {
      row.push(0);
    }
    newArray.push(row.slice());
  }
  return newArray;

}

let matrix = zeroArray(3, 2);
console.log(JSON.stringify(matrix));

Answer 5

Answer №3

Matrix m x n represents m rows and n columns. Therefore, for dimensions 3, 2, the expected matrix is:

[
  [0, 0],
  [0, 0],
  [0, 0],
]

To achieve this, you can declare the variable row inside the first loop like so:

function zeroArray(m, n) {
  const newArray = [];

  for (let i = 0; i < m; i++) {
    const row = [];
    for (let j = 0; j < n; j++) {
      row.push(0);
    }
    newArray.push(row);
  }
  return newArray;

}

let matrix = zeroArray(3, 2);
console.log(matrix);

Answer 6

Matrix m x n represents m rows and n columns. Therefore, for dimensions 3, 2, the expected matrix is:

[
  [0, 0],
  [0, 0],
  [0, 0],
]

To achieve this, you can declare the variable row inside the first loop like so:

function zeroArray(m, n) {
  const newArray = [];

  for (let i = 0; i < m; i++) {
    const row = [];
    for (let j = 0; j < n; j++) {
      row.push(0);
    }
    newArray.push(row);
  }
  return newArray;

}

let matrix = zeroArray(3, 2);
console.log(matrix);

Weird behavior observed in loop through 2D Array (FCC)

Answer №1

Answer №2

Answer №3

Similar questions

How can you refresh the information shown in a separate component from the search input with a live search bar?

Issue encountered while utilizing PHP sessions

minimize the size of the image within a popup window

What is the best way to link my PHP with MySQL in order to execute an AJAX query?

Is the concept of Controlled and Uncontrolled Components in VueJs similar to that of React?

Organize the array of objects

Retrieving data using ajax

Upcoming examination on SEO using React testing library

Issue encountered while configuring 'innerHTML' in xmlHttp.onreadystatechange function

Interact with multidimensional arrays using Vue JS

Fulfill the promise within the function upon clicking the button

How to sort objects by keys in AngularJS

What is the recommended port to use for utilizing Express on cPanel?

"Utilizing Vue.js for frontend, this app utilizes axios from the client side, rather than

How to stop form submission when Enter key is pressed in Angular

Is there a way to clear the input value in the otp field?

Can you provide the regular expression that will reject the character "?"

The JavaScript code is executing before the SPFX Web Part has finished loading on the SharePoint page

Tips for eliminating fade effect during hover in networkD3 chart in R

What is the best way to ensure bidirectional text appears correctly when two conflicting languages are combined, ensuring explicit directionality is set?