title: What is the best practice of variable scope, in relation to React / Typescript performance?
body: <p>Working with typescript / react, I'm trying to up my skills regarding best practices and design, and therefore I'm wondering what is the best practice regarding code where a small function (or class), is called a large amount of times, would it performance wise be better to place a variable outside the function? Consider the following example:</p>
  
  <p>I have a map which maps some enum value to a string:</p>
  
  <pre><code>const complexityClassNameMap = new Map&lt;TC, string&gt;();
  complexityClassNameMap.set(TC.O1, 'excellent');
  complexityClassNameMap.set(TC.ON, 'good');
  complexityClassNameMap.set(TC.OLOGN, 'fair');
  complexityClassNameMap.set(TC.ONLOGN, 'fair');
  </code></pre>
  
  <p>I have a function <code>Col</code> which is called around 10k times (as part of constructing a very large table):</p>
  
  <pre><code>const Col = (props: ComplexityColProps) =&gt; {
    return (
      &lt;td className={complexityClassNameMap.get(props.complexity)}&gt;
        {complexityDescrMap.get(props.complexity)}
      &lt;/td&gt;
    );
  };
  </code></pre>
  
  <p>Normally i would put a variable close to where it is used as a best practice, however in this particular use case, would this cost a lot of performance?, and hence would it be better to leave <code>const complexityClassNameMap</code> in outer scope?</p>