Update variables inside the jQuery $(document).ready() base scope?

Question

I'm trying to find a way to minimize the number of Selector look-ups. My issue is that I have a variable defined with base $(document).ready() that needs to be updated inside functions nested inside $(document).ready()

Consider this example (EDIT: I updated it to be more explanatory)

<script>

//var $current_page = $home_page;  **<--I DONT want to do this, going global
                                        and of course it doesn't work since
                                        $home_page isn't defined yet.**

$(document).ready(function() {
  var $home_page = $("#home-page");
  var $portfolio_page = $("#portfolio-page");
  var $about_page = $("#about-page");
  var $current_page = $home_page;  // **<--This variable, in this scope level,
                                   //      is what I want updated**

  $("#home-btn").click(function () {
   $current_page.stop()
   $current_page.show()
   $current_page.animate({
    duration: 360, 
    easing: 'easeInCirc',
    complete: function() {
        $(this).css({ top: -700 });
    }

   ); 

   $current_page = $home_page;
  });

   $("#portfolio-btn").click(function () {
       $current_page.stop()
       $current_page.show()
       $current_page.animate({
         duration: 360, 
         easing: 'easeInCirc',
         complete: function() {
             $(this).css({ top: -700 });
         }

   ); 

   $current_page = $portfolio_page; //<--This needs to somehow update the
                                    //   variable in the $(document).ready
                                    //   scope, but not global**
  });
 });
 <script>

How can I update the variable $current_page without making it a global variable?

EDIT: This is done to animate out the current page div when you click on a menu item. Yes, it's missing things, yes it may not make sense. It's just an example, not the actual application.

I understand this example is still trivial for performance, just ignore that fact. I just want to know how to do achieve this, not a lesson on whether it's the best practice or performance. Thanks guys.

Answer 1

The inner function creates a closure, capturing the variables in the scope it is defined in. So you already have what you're asking for...

...whether that's a good idea or not is another matter.

For starters, you're not actually modifying the value in the code you listed - you're assigning $current_page the same value it was already initialized with.

But assuming you just omitted the code that you would normally use to pick a different value for $current_page, you need to ask yourself: is this really even necessary? You're performing a lookup based on an element ID and caching a reference to that element in a variable without knowing if or when you'll actually need it again. At best, this results in a potentially-unnecessary lookup; at worst, it can result in a memory leak. Why not just keep track of the ID itself, and look up the element when and where you actually need it? Don't worry about performance until you actually encounter a performance problem... or you may find that your premature optimization has caused more problems than it solves.

Same goes for $home_page, $portfolio_page and $about_page - you're making your page load (slightly) more slowly on the off-chance that you'll need a reference to those elements later on, when you could just as well look them up as-needed.