Do jQuery and JavaScript have different namespaces?

Question

I have this code in jQuery..

$(document).ready(function(){ 

var fieldCounter = 0;  ...

I have a jQuery function that increments this value.

This works, but I can't access this value on the page from a non-jQuery function? The reverse is also true, if I scope it in JavaScript e.g.

<script type="text/javascript">

var fieldCounter = 0;

I can access it from javascript but jQuery can't view it?

I'm probably doing something really dumb?

Answer 1

It has nothing to do with jQuery, but all with Javascript scope.

$(document).ready(function() { 
   var fieldCounter = 0;
});

fieldCounter is declared inside a function. Since Javascript has function scope, the variable is not visible outside the function.

BTW, jQuery is Javascript, they play by the same rules, they're not two different technologies.

Exhaustive answers can be found here: What is the scope of variables in JavaScript?

Answer 2

jQuery is not magic. It is a JavaScript library. Your issue is that you're defining a local variable inside a function. Due to the way JavaScript lexical scoping works, you can't access it outside that function (with the exception of closures, which does not apply here).

Most likely, you just want:

$(document).ready(function(){ 

fieldCounter = 0;

That will make it a global variable.

Edit: Note that using a namespace and/or declaring the global variable is cleaner, but not required.