title: Javascript: Any way to shorten local usage of nested objects?
body: <p>After coding a complex board game with a ton of variables, objects, and arrays, I've been told that global variables are bad, for various reasons.</p>
  <p>One solution given was to wrap the entire javascript code in a function, making it all local.  Another way to put all my variables into one object.  I probably should've just gone with the first solution.  But I attempted the second.  As it will also make saving and loading this variable between turns via AJAX calls easier - ie I only have to save and load one object.</p>
  <p>So my old globals were this:</p>
  <pre><code>let player = 'red';
  let tattoos = {red: 0, blue: 0, green: 0};
  let statusTrack = { 1: [1], 2: [1], 3: [2], 4: [2], 5: [4],};
  </code></pre>
  <p>And now it's like this:</p>
  <pre><code>let game = {
      player: 'red',
      tattoos: {red: 2, blue: 1, green: 1},
      statusTrack: { 1: [1], 2: [1], 3: [2], 4: [2], 5: [4],}
  }
  </code></pre>
  <p>Which is great.  Except now my actual code is very hard to read.  A line that used to be this:</p>
  <pre><code>let stIndex = statusTrack[tattoos[player]].indexOf(player)
  </code></pre>
  <p>Is now</p>
  <pre><code>    let stIndex = game['statusTrack'][game['tattoos'][game['player']]].indexOf(game['player']);
  </code></pre>
  <p>So my question:  Is there any way, with a library or code snippet, to convert the code I'm typing into the old format, yet still using the new &quot;everything in one object&quot; format for the variables?</p>
  <p>Similar to how adding this one line:</p>
  <pre><code>let $ = function (id) { return document.getElementById(id); };
  </code></pre>
  <p>let's me emulate the <code>JQuery</code> / <code>Sizzle</code> selector and type <code>$('div')</code> instead of <code>document.getElementById('div')</code>?</p>
  <p>OR should I just go back to the old way and wrap the whole thing in a function to make it all local?</p>