Question

Trying to sort out some general things considering usage of js and jquery particularly.
Was reading ~million of answers through stackoverflow without clean understanding how to pass data to another function and how do we build applications.

I got pretty usual schema:

$(document).ready(function){

   $('.classname').click(function() { 
      var varone = $(this).attr('name');
   });

   $('.class2name').click(function(){
      var vartwo = $(this).height();
   });

});

Then i go out from (document).ready and want to do some handling like

    function dosmth() {
       var freaksum = varone + vartwo;
    }

How do i do that? I want to pass objects, not make globals.

What are the practices to handle such things developing large applications?
I want to have some function which is making lot of operations with lot of variables from other functions. How do i get all these objects in my operational function?
What if i have to use these variables not inside a single function, but in several different functions, like

function dosmth() {
   var freaksum = varone + vartwo;
}

function dosmthelse() {
   var freakmult = varone * vartwo;
}

etc etc

Sorry for a long one, thank you.

Answer 1

In your current example, your two functions dosmth and dosmthelse do not have any access to the variables varone and vartwo because they do not exist in the same scope. The onlyOne way around this is to make those variables exist in a scope that is available to both the click events and the functions.

The easiest way is to simply make them global.

var varone, vartwo;

$(document).ready(function){
   $('.classname').click(function() { 
      varone = $(this).attr('name');
   });

   $('.class2name').click(function(){
      vartwo = $(this).height();
   });
});
function dosmth() {
   var freaksum = varone + vartwo;
}

function dosmthelse() {
   var freakmult = varone * vartwo;
}

However it is usually better to not use the global scope, so we can instead do it this way:

(function($){
    var varone, vartwo;
    $(document).ready(function){
       $('.classname').click(function() { 
          varone = $(this).attr('name');
       });

       $('.class2name').click(function(){
          vartwo = $(this).height();
       });
    });
    function dosmth() {
       var freaksum = varone + vartwo;
    }

    function dosmthelse() {
       var freakmult = varone * vartwo;
    }
})(jQuery);

Now you don’t have any global variables and they are still accessible in both places.

You could also (depending on your situation) store those values somewhere else, such as on an element.

Without more information on the real-world situation you are trying to solve, that’s about as far as I can go.