jQuery - functions inside (function ($) { //code }(jQuery));

Question

I have a function to create a Google Map along with some other logic to create markers, infowindows and enable some user interaction to control the map.

When using jQuery and WordPress, by default, the $ function is disabled for compatibility.

To overcome this, I have encapsulated all my JavaScript code inside the following block:

(function ($) {

function initMap() {
console.log("Initmap start");
map = new google.maps.Map(document.getElementById("dealer-map"), {
    center: new google.maps.LatLng(54.583408, -4.125605),
    zoom: 5
});
setMarkers(map);
}

//...other code

}(jQuery));

(Sorry, I'm not sure what the above would be known as, hence the title)

There is then a function callback within the Google Maps API code which calls the initMap(); function once the API has loaded, however this does not work. I attempt to call this manually via the Chrome developer console, but a receive:

ReferenceError: initMap is not defined

Is there any way around this? Or would it be easier to just enable the $ function?

`window.$ = $` inside the UMD code you provided, but that breaks your wordpress compatability and wouldn't be available until after that code is executed. — Steven Stark, Mar 06 '19 at 22:49
Possible duplicate of [How do you install jQuery in Wordpress?](https://stackoverflow.com/questions/5775512/how-do-you-install-jquery-in-wordpress) — Steven Stark, Mar 06 '19 at 22:49
Take a look at previous, related discussion at: https://stackoverflow.com/questions/2212602/versus-jquery — Richard Uie, Mar 06 '19 at 22:51
The first snippet is called an *Immediately Invoked Functional Expression* or *IIFE* for short. — Taplar, Mar 06 '19 at 22:56
`initMap` is defined inside the IIFE, as such it will only exist inside that scope. Anything in the global scope, outside of that IIFE, will not be able to access it. — Taplar, Mar 06 '19 at 22:58
Personally if you are thinking of doing what ChrisG has ^^^, I'd argue for just doing `var $ = jQuery` in the method and do without the IIFE. — Taplar, Mar 06 '19 at 23:00

score 0 · Answer 1 · answered Mar 06 '19 at 22:50

Every time you use the function keyword, you are creating a new scope. This applies if you are using a function expression or a function statement.

You will need to either use that function in a scope that can see it, or you'll have to export that function to something more public.

I don't know enough about wordpress to discuss how to do that.

function scope1() {
  // This scope is private
  function private() {
  }
}

function scope2() {
  // This is a whole different scope that cannot
  // see anything inside of scope 1.
  function private() {
  }
}

score 0 · Accepted Answer · answered Mar 06 '19 at 23:05

0

Here's three ways to do this:

function initMap() {
  (function($) {
    /*...*/
  })(jQuery);
}

or

function initMap() {
  const $ = jQuery;
  /*...*/
}

or

function init($) {
  /*...*/
}

function initMap() {
  init(jQuery);
}

answered Mar 06 '19 at 23:05

ChrisG

8,206
4
20
34

Thanks, the second option worked for me. Apologies for not marking the answer sooner! – StrattonL Sep 12 '20 at 18:19
All three should work though, the important thing is that the `initMap` function is visible from outside. – ChrisG Sep 13 '20 at 10:36

jQuery - functions inside (function ($) { //code }(jQuery));

2 Answers2