javascript - My function somehow undo an object property change -

to calculate winner of tic tac toe game (i followed react's tutorial), created/modified calculatewinner function. function accepts array of objects, whereas each of these objects has 2 properties:

• value (which can set 'x' or 'o', null default); and
• iswinner (boolean, false default).

what function check if combination of 3 squares (distinguished index in array) has same value, , change these squares' iswinner value true.

the problem is, on winning combinations, 1 or more iswinner property somehow still set false when inspect whole array itself. make problem weirder, occurs (so far) on codepen, not here in stackoverflow's snippet. (i'll try locally soon.) erroneous on local.

dothetest();    function calculatewinner(squares) {    const lines = [      [0, 1, 2],      [3, 4, 5],      [6, 7, 8],      [0, 3, 6],      [1, 4, 7],      [2, 5, 8],      [0, 4, 8],      [2, 4, 6],    ];      let winner = null;      (let = 0; < lines.length; i++) {      const [a, b, c] = lines[i];        let squarea = squares[a];      let squareb = squares[b];      let squarec = squares[c];        if (squarea.value && squarea.value === squareb.value && squarea.value === squarec.value) {        squarea.iswinner = true;        squareb.iswinner = true;        squarec.iswinner = true;          winner = squarea.value;          console.log('squares check:', a, b, c);          // returns 3 trues expected        console.log('the 3 winning values after setting them:', squares[a].iswinner, squares[b].iswinner, squares[c].iswinner);          // if you'll check 3 winning square objects in array,        // 1 or more iswinner property still set false        // , reason, happens in winning combinations        // e.g. works fine [2, 4, 6] produces issue [0, 4, 8]        console.log('but squares array still after setting them', squares);      } else {        squarea.iswinner = false;        squareb.iswinner = false;        squarec.iswinner = false;      }    }      return {      winner: winner,      squares: squares    };  }      function dothetest() {  	const squaresjsonstring = '[{"index":0,"value":"x","coordinates":"1, 1","iswinner":false},{"index":1,"value":"o","coordinates":"2, 1","iswinner":false},{"index":2,"value":"x","coordinates":"3, 1","iswinner":false},{"index":3,"value":"o","coordinates":"1, 2","iswinner":false},{"index":4,"value":"x","coordinates":"2, 2","iswinner":false},{"index":5,"value":"o","coordinates":"3, 2","iswinner":false},{"index":6,"value":null,"coordinates":"1, 3","iswinner":false},{"index":7,"value":null,"coordinates":"2, 3","iswinner":false},{"index":8,"value":"x","coordinates":"3, 3","iswinner":false}]';    	/* json string above in more readable format:  [  	{"value":"x","coordinates":"1, 1","iswinner":false},  	{"value":"o","coordinates":"2, 1","iswinner":false},  	{"value":"x","coordinates":"3, 1","iswinner":false},  	{"value":"o","coordinates":"1, 2","iswinner":false},  	{"value":"x","coordinates":"2, 2","iswinner":false},  	{"value":"o","coordinates":"3, 2","iswinner":false},  	{"value":null,"coordinates":"1, 3","iswinner":false},  	{"value":null,"coordinates":"2, 3","iswinner":false},  	{"value":"x","coordinates":"3, 3","iswinner":false}  ]  	*/    	const squaresparsed = json.parse(squaresjsonstring);    	calculatewinner(squaresparsed);  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>

you need break out of loop when find winning line. otherwise, you'll keep testing other lines, , since don't match set iswinner = false; squares, undoes assignment when test succeeded. put break statement @ end of if block finds winning line.

or if want able find winning lines, leave out else block sets iswinner = false. should initial state of objects, don't need every time through loop. when loop done, squares part of winning lines have iswinner: true.