0

I was playing with javascript trying to create a classic spiral matrix like this one:

01 02 03 04
12 13 14 05
11 16 15 06
10 09 08 07

But when I debugged my code, I noticed something weird: enter image description here The matrix array is filling the space [1][x] when j is 0

How is that possible?

What is the explanation for this behavior?

Here is the piece of code:

var draw = function(direction, dim) {
    var directions = ['right', 'down', 'left', 'up'];
    var __matrix = Array(dim[0]).fill(Array(dim[1]).fill(0));
    var fill = {};

  fill.right = function(nextIndex, matrix, j, i, value) {
    if(value === (dim[0] * dim[1])) { return matrix; }
    if(matrix[j][i] === 0) { matrix[j][i++] = value++; }
    else { i--; nextIndex++; }
    debugger;
    return fill[directions[nextIndex]].apply({}, arguments);
  }

  fill.down = function() { }; //todo
  fill.left = function() { }; //todo
  fill.up = function() { }; //todo

  return fill[direction](directions.indexOf(direction), __matrix, 0, 0, 1);
};

console.log(draw('right', [4,4]));
Nestor Britez
  • 1,218
  • 10
  • 14
  • Could you please post your code, not only a screenshot of your debugger? – Bergi Apr 26 '16 at 14:37
  • 1
    Can you post the code as part of your question, rather than the image of it? Also, from the outset, you may need to check the order of your increment. You may require ++i instead. Without the code, we can't help you, as we will be unable to recreate your problem quickly. – ManoDestra Apr 26 '16 at 14:37
  • Which brackets do you mean? Where are you placing the operator so that it "works well"? – Bergi Apr 26 '16 at 14:38
  • `i++; matrix[j][i] = value++;` is not equivalent to `matrix[j][i++] = value++;` - the one increments `i` before evaluating the array index, the other increments it after that. – Bergi Apr 26 '16 at 14:49
  • possible duplicate of [++someVariable Vs. someVariable++ in Javascript](http://stackoverflow.com/q/3469885/1048572) – Bergi Apr 26 '16 at 14:49
  • @Bergi do you understand the question? is about `j` not `i` – Nestor Britez Apr 26 '16 at 14:51
  • I would suggest to put `console.log('before', j, i, value, JSON.stringify(matrix));` before the second `if` in `fill.right`, and `console.log('after', j, i, value, JSON.stringify(matrix));` after that `if ... else`. Then provide us the output. – trincot Apr 26 '16 at 14:58

3 Answers3

2

This has nothing to do with the increment operator. You are writing on the 0 index, it just so happens that every array in your matrix array is the same array reference.

var arr = Array(4).fill(Array(4).fill(0))
//arr[0] === arr[1] === arr[2] === arr[3]
arr[0][0] = 'Hey';
console.log(arr[1][0]) //also 'Hey'
MinusFour
  • 13,913
  • 3
  • 30
  • 39
  • Yes you right!, the array creation should be `var __matrix = new Array(4).fill(0).map(function() { return new Array(4).fill(0) });` then `__matrix[0] === __matrix[1] -> false` – Nestor Britez Apr 26 '16 at 15:05
1

Seems your problem in this line

Array(dim[0]).fill(Array(dim[1]).fill(0));

Array.fill makes shallow copy of the array

When you change one element of the array it will affect to all elements, because it reference to the same object.

See example below: 

var matrix = Array(5).fill(Array(5).fill(0));

document.write('<br>before <pre>' + JSON.stringify(matrix) + '</pre>') ;

matrix[1][0] = 1;

document.write('<br>after <pre>' + JSON.stringify(matrix) + '</pre>') ;
isvforall
  • 8,768
  • 6
  • 35
  • 50
0

It's diffcult to answer such a question without a fiddle, sorry...
I'd try to put some console.log() before and after the indicted statement (matrix[j][i++] = value++;), to understand what's happening...

MarcoS
  • 17,323
  • 24
  • 96
  • 174