To use closures or not, John Conways Game of Life

Question

I am currently making a game that illustrates John Conways 'Game of Life' I've been learning about closures and the modular patterns and am trying to implement more of what I'm learning in Javascript. You can check out my repo here if your interested. All of these methods are inside a 'Game' object. I have it working, but am trying to limit variables and make it as functional as possible (passing the grid array between functions). I would like some advice on wether I should be keeping higher scope variable immutable or wether it doesnt matter.

Which solution is better practise, in terms of structure?

// initial grid
// will be bigger than this but is 3x3 for this question.

let grid = [
    [1,0,0],
    [0,1,0],
    [0,0,1]
]

Solution 1: My initial way of solving:

function nextGrid(){
  grid = applyRules(grid)
  renderGrid(grid)
}

function applyRules(grid){
  // makes changes
}

function renderGrid(grid){
  // makes changes
}

// call nextGrid() to generate subsequent new grids.

Solution 2: Having looked into closures more, is this better?

function nextGrid() {
  let prevGrid = grid;

  return function(){
    prevGrid = applyRules(prevGrid)
    renderGrid(prevGrid)
  }  
}

function applyRules(prevGrid){
  // makes changes
}

function renderGrid(grid){
  // makes changes
}

const next = nextGrid();

// call next() to generate subsequent new grids.

@Bergi thanks for point that out. this is just pseudo code that i wrote out to demonstrate my question anyway. — twocents, Feb 01 '18 at 02:24
Your second solution has the advantage of being able to create multiple independent games by calling `nextGrid()` multiple times. If you don't need that, don't use it - you could e.g. simplify it to an IIFE that creates `next` directly. Then it still has the advantage of mutating `prevGrid` instead of the initial `grid` - again, that's good if you need it (keep the initial grid around for something) but overcomplicated if not. — Bergi, Feb 01 '18 at 02:28
IIFE idea works a treat. Thanks for helping me on my learning journey! — twocents, Feb 01 '18 at 02:54

Aadit M Shah · Accepted Answer · 2018-02-05T06:13:41.867

Both your solutions employ mutation. In your first solution you mutate the global variable grid. In your second solution you mutate the local variable prevGrid. A truly functional program would use recursion instead of mutation. For example, this is what I'd do:

const game = /* initial game state */;

play(game);

function play(game) {
    render(game);
    setTimeout(play, 100, update(game));
}

As you can see, instead of mutating the global variable game we call play with an updated game state every 100 milliseconds. Our initial call play(game) on the third line starts the game. If we comment it out, nothing will be displayed.

Here's a complete example of Conway's Game of Life in a few lines of code:

const glyph = [" ", "■"];

document.querySelectorAll("pre.life").forEach(e => play(e, read(e.innerHTML)));

function read(text) {
    return text.split("\n").map(l => l.split("").map(c => glyph.indexOf(c)));
}

function play(pre, game) {
    pre.innerHTML = show(game);
    setTimeout(play, 100, pre, update(game));
}

function show(game) {
    return game.map(line => line.map(cell => glyph[cell]).join("")).join("\n");
}

function update(game) {
    return game.map((line, i) => line.map((cell, j) => {
        const back = game[i - 1], next = game[i + 1], h = j - 1, k = j + 1;

        const neighbors = (back && back[h] || 0)
                        + (back && back[j] || 0)
                        + (back && back[k] || 0)
                        + (line[h] || 0)
                        + (line[k] || 0)
                        + (next && next[h] || 0)
                        + (next && next[j] || 0)
                        + (next && next[k] || 0);

        switch (neighbors) {
        case 3:  return 1;
        case 2:  return cell;
        default: return 0;
        }
    }));
}

pre.life {
    line-height: 0.666;
}

<pre class="life">
                                      
                         ■            
                       ■ ■            
             ■■      ■■            ■■ 
            ■   ■    ■■            ■■ 
 ■■        ■     ■   ■■               
 ■■        ■   ■ ■■    ■ ■            
           ■     ■       ■            
            ■   ■                     
             ■■                       
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                       </pre>

The above pattern is the Gosper glider gun.

this is great, thanks. i like that your script inserts the game at the top of my question when run in console. ;) — twocents, Feb 05 '18 at 01:23
If you thought my answer was helpful then do consider upvoting and accepting it. — Aadit M Shah, Feb 05 '18 at 06:06

To use closures or not, John Conways Game of Life

1 Answers1