How to limit scope of a function in javascript/ jquery

wish of those help , You could try,

$.plugin = (function(){
var methods = {
   loadedcss   : [],

    add: function(params) { 
       // IF IN ARRAY NOT LOADED THEN PUSH CSS
      if ($.inArray(params['css'],this.loadedcss) == -1) {
         // error undefined this.loadedcss
         methods.loadedcss.push(params['css']);
       };
     },
     ...
   };

return methods;
})();

add: function(params) { 
    var me = this;
    $.each(params["js"], function(key,value) { 
        // this.loadedcss error undefined
        me.loadedcss.push(value);
    });
}

To fix this issue Assuming you mean the variables x and y, then it is the anonymous function passed to click().
var always scopes to the current function.

function () {
    var x = 1;

    function () {
         alert(x);
         var x = 2;
    }
}

Hope that helps what properties & objects does "e" have from the section "function(e){" ? It should have e.target.id, so:

jQuery(document).ready(function()
{
jQuery(document).on('click','.toggleExtras', function(e){
    jQuery('#'+e.target.id).slideToggle();
    jQuery(this).text(function(el, old){
        return old == "Show Advanced Options" ? "Hide Advanced Options" : "Show Advanced        Options";
     });
  });
});

will be helpful for those in need Your problem is not hoisting, but the scope of the function.
Basically in kiosk-functions.js you define a callback to document.ready and inside that callback you define the function isJSON(). The function is just known within that scope.

$(function() {
    // some JavaScript functions
    function isJSON(str) {
        try {
            JSON.parse(str);
            return true;
        } catch (e) {
            return false;
        }
     }

  // init namespace
  window.myNamespace = window.myNamespace || {};

  // attach function
  window.myNamespace.isJSON = isJSON;
});

$(function() {
    var socket = io();
    socket.on('message', function (data) {

        if(myNamespace.isJSON(data)) {
            // do stuff
        }
    });
    // other JavaScript and jQuery code
});

it fixes the issue I'm working on more / less buttons for text in jQuery. When my jQuery script is loaded, I want to only display some of the of the text in a div. In this case, any text > 650 characters I want to hide initially. After a button is clicked, all the text will appear. When it is clicked again, the text will condense to original partially hidden size. I'm having trouble figuring out how to have the jQuery function run separately for each class iteration. As of right now, both classes text gets replaced with the text from first DIV. I need to limit the functions scope to just one class at a time. , Ok here is a working example:

jQuery(document).ready(function() {
  var showChar = 50; // How many characters are shown by default
  var ellipsestext = "...";

  jQuery('.reviewbody').each(function() {
    var rvwElem = jQuery(this);
    var fullVal = rvwElem.html();
    var truncatedVal = fullVal.substr(0, showChar);

    console.log(fullVal);
    if (fullVal.length > showChar) {
      debugger;
      $(rvwElem).next(".btnMore").first().show().on('click', function() {
          jQuery(this).html(jQuery(this).text() == 'View Less' ? 'View More' : 'View Less');
          jQuery(".home_testimonial_section .home_testimonial_slider_wrap").toggleClass("rvwHeight");
          $(rvwElem).html($(rvwElem).html() == truncatedVal ? fullVal : truncatedVal);
          console.log(fullVal);
        });
    }

    // You still want to show the content if it is shorter than "showChar"
    $(rvwElem).html(truncatedVal);
    console.log(truncatedVal);
  });
});

.morecontent span {
  display: none;
}

.morelink {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home_testimonial_slider_wrap">

  <div class="mySlides w3-animate-fading">
  </div>
  <div class="reviewbody">12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing12345testing
  </div>

  <button class="btnMore" style="display:none;">View More</button>

  <div class="mySlides w3-animate-fading">
  </div>
  <div class="reviewbody"> 6789testing6789testing67896789testing6789testing67896789testing6789testing67896789testing6789testing67896789testing6789testing67896789testing6789testing67896789testing6789testing67896789testing6789testing67896789testing6789testing67896789testing6789testing67896789testing6789testing67896789testing6789testing67896789testing6789testing6789testing6789testing6789testing6789testing6789testing6789
  </div>
  <button class="btnMore" style="display:none;">View More</button>
</div>