title: how to access variable value from within a resize function
body: <p>I have an else..if statement that assigns a value to a variable based on the <code>window.width</code>, what I would like to do is then use this value inside a <code>window.resize</code> but at the moment get <code>'undefined'</code> for <code>currentSize</code> the value. What should I be doing in order to get the value?</p>
  
  <p>JS</p>
  
  <pre><code>//Code ran onload
  if(windowWidth &gt;= 924) {
      incrementValue = 3;
      currentSize = 'desktop';
  }
  else if(windowWidth &gt; 615 &amp;&amp; windowWidth &lt; 924) {
      incrementValue = 2;
      currentSize = 'tablet';
  }
  else {
      incrementValue = 1;
      currentSize = 'mobile';
  }
  
  $(window).resize(function() {
      windowWidth = $(window).width();
  
      if(windowWidth &gt;= 924) {
          incrementValue = 3;
          var newSize = 'desktop';
      }
      else if(windowWidth &gt; 615 &amp;&amp; windowWidth &lt; 924) {
          incrementValue = 2;
          var newSize = 'tablet';
      }
      else {
          incrementValue = 1;
          var newSize = 'mobile';
      }
  
      console.log(currentSize); //'undefined'
      if (currentSize !== newSize) {
          var currentSize = newSize;
  
          incrementTotal = 0;
          slideIndex = 0;
  
          //Reset slider to start
          $carouselSlides.css( 'left', 0 );
      }
  });
  </code></pre>