How do I properly pass values from PHP to JavaScript?
You first JS snippet executes before the page is done loading.  Is it not the same syntax as the shorthand for declaring the document.onready event handler.

You working example runs from an onready, but the Drupal best practice is to use a behavior, eg:

(function ($, Drupal, undefined) {
  Drupal.behaviors.mymodule = {
    attach: function (context, settings) {
      console.log(settings.mymodule);
    }
  };
})(jQuery, Drupal);


Take a look at Managing JavaScript in Drupal 7 for more information.