Best practice is just to put all your JS code inside this function, it guarantees it will only run once the browser renders all the HTML content. The order is important because jQuery selectors will look at what is currently in the DOM, not what will be there.
For example, if this code is run:
but the HTML page hasn't finished loading onto the browser and hasn't yet loaded this part:
<div id="location-box" class="row center box">Location</div>
that JS code won't display anything because `$("#location-box") won't return anything. Hope that makes some sense. If you look back at the jQuery section on FCC you'll see all the code you write is nested inside the document.ready function.