Why doesn't document.ready work in this case?

Question

If I use this:

<script>
    $(document).ready(function() {
        if (window.localStorage.getItem('createTicket')) {
            var createTicketInfo = JSON.parse(window.localStorage.getItem('createTicket'));
        }
    });
</script

I see an error in the console:

Uncaught ReferenceError: createTicketInfo is not defined

But if I remove document.ready:

<script>    
    if (window.localStorage.getItem('createTicket')) {
        var createTicketInfo = JSON.parse(window.localStorage.getItem('createTicket'));
    }   
</script>

Everything is ok:

Why?

Related problem dealing with variable scopes: https://stackoverflow.com/questions/11152977/global-javascript-variable-inside-document-ready — Jedi, Jun 23 '17 at 02:46

ibrahim mahrir · Answer 1 · 2017-06-23T03:14:29.983

It's because, in the first example, createTicketInfo is only visible within the callback (function) of ready.

function test() {
  var boo = "Hi! I'm boo.";
  // ...
  console.log(boo); // visible here
}
test();

console.log(boo); // not visible here (even if we call test first)

In the second example, createTicketInfo is not wrapped in a function, thus it is global (visible everywhere).

if(true) {
  if(true) {
    if(true) {
      var foo = "Hi! I'm foo.";
      // ...
      console.log(foo); // visible here
    }
  }
}

console.log(foo); // visible here too (because javascript doesn't have block scopes)

Always put in mind that javascript has function scopes, but not block scopes.

Note: As mentioned by @nnnnnn in the comment bellow, ECMAScript 6 introduced a new way of declaring variables using let or const that respect block scopes. So:

if(true) {
  let zoo = "Hi! I'm zoo.";
  // ...
  console.log(zoo); // only visible inside this block
}

console.log(zoo); // not visible here

*"but not block scopes."* - For variables created with `var`. It's a different story with `let` and `const`. — nnnnnn, Jun 23 '17 at 03:09
@nnnnnn I'll add it as a note. `let` and `const` are still not that popular though. — ibrahim mahrir, Jun 23 '17 at 03:12

score 0 · Answer 2 · answered Jun 23 '17 at 03:05

Something else isn't right in another section of your code.

Look at this fiddle I created.

It accurately reads and writes the value. Exactly the same code:

https://jsfiddle.net/nxka5h7y/2/

<head>
<script src = "https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    window.localStorage.setItem('createTicket', '{"a":"1"}');
    $(document).ready(function() {
        if (window.localStorage.getItem('createTicket')) {
            var createTicketInfo =     JSON.parse(window.localStorage.getItem('createTicket'));
            console.log(createTicketInfo);
        } else { console.log("none"); }
    });
</script>
</head>
<body>
<script>
</body>

The only thing I added, was actually setting the createTicket item in localStorage, just to ensure the "if" statement inside document/ready will pass.

My semi-logical guess is that JSON stored in createTicket is malformed, based on how it was set (which is not shown in your example.) I don't really think that's the issue. But, the fact is your example produces accurate results in jFiddle. Look elsewhere in your code. Like, the part where you actually set the createTicket. Or that your jQuery is actually included, or something silly like that.

OP is trying to test the value of the variable by typing it into the console. — nnnnnn, Jun 23 '17 at 03:10

Why doesn't document.ready work in this case?

2 Answers2