Some places had said just using 'use strict' at the top is enough and there's no need to use the function method. Is there a reason I would prefer one over the other in this case?

Strict mode is the same thing whether you use it in a function or at the top of the file. The difference is scope. putting it at the top of the file means it will take effect for the entire file, putting it in a function means it will only take effect for that function. If you want to make sure your entire script is in strict mode put it at the top of your file simply because it's easier and saves a few bytes.

There are cases when you would want to put it in only certain functions though. If you have a bunch of undeclared variables, in strict mode, rather than defining the vars in the global scope it will throw an error, so you wouldn't want to put the entire script into strict mode. But what if later on you have to use exec() (god forbid) in a function and want to make sure it doesn't introduce any variables in the surrounding scope, putting "strict mode"; at the top of the function can be a helpful security measure.

Really, everything you need to know about strict mode is documented in MDN.

Is it better to use pure JS for most cases and jQuery as a supplement rather than the framework? I'm curious about reducing load times, etc.

Mankind has been asking this question for eons.

The answer depends on what your definition of "better" is. jQuery was intended to make developing easier, but it has trade offs: it requires you to add a large script to your page that will slow down load times, and it a lot of cases, yea, it is slower than vanilla JS.

The thing is, a few years ago there were a lot of discrepancies between browsers and people used jQuery to bridge that gap. Today, with ES6, there are a lot fewer dependencies and that's why jQuery is slowly dying.

In most cases, I would say, If you can reasonably do it, try to avoid jQuery. However if your entire codebase uses jQuery and it's gonna be there anyway then there's no reason to go out of your way to avoid it.

Should most external sources be loaded async? I assume in this case, I want to ensure that jQuery has fully loaded before my script ever runs or else it'll throw some sort of jQuery is undefined error, but I can load my script async as long as I ensure all of my functions are scoped within a document.ready() function due to them interacting with the DOM?

I would say yes. Loading anything synchronously means longer load times for the user. Synchronous XHR has been deprecated for a while now because it provides a "bad user experience".

Some places had said just using 'use strict' at the top is enough and there's no need to use the function method. Is there a reason I would prefer one over the other in this case?

Strict mode is the same thing whether you use it in a function or at the top of the file. The difference is scope. putting it at the top of the file means it will take effect for the entire file, putting it in a function means it will only take effect for that function. If you want to make sure your entire script is in strict mode put it at the top of your file simply because it's easier and saves a few bytes.

There are cases when you would want to put it in only certain functions though. If you have a bunch of undeclared variables, in strict mode, rather than defining the vars in the global scope it will throw an error, so you wouldn't want to put the entire script into strict mode. But what if later on you have to use exec() (god forbid) in a function and want to make sure it doesn't introduce any variables in the surrounding scope, putting "strict mode"; at the top of the function can be a helpful security measure.

Really, everything you need to know about strict mode is documented in MDN.

Is it better to use pure JS for most cases and jQuery as a supplement rather than the framework? I'm curious about reducing load times, etc.

Mankind has been asking this question for eons.

The answer depends on what your definition of "better" is. jQuery was intended to make developing easier, but it has trade offs: it requires you to add a large script to your page that will slow down load times, and it a lot of cases, yea, it is slower than vanilla JS.

The thing is, a few years ago there were a lot of discrepancies between browsers and people used jQuery to bridge that gap. Today, with ES6, there are a lot fewer discrepancies and that's why jQuery is slowly dying.

In most cases, I would say, If you can reasonably do it, try to avoid jQuery. However if your entire codebase uses jQuery and it's gonna be there anyway then there's no reason to go out of your way to avoid it.

Should most external sources be loaded async? I assume in this case, I want to ensure that jQuery has fully loaded before my script ever runs or else it'll throw some sort of jQuery is undefined error, but I can load my script async as long as I ensure all of my functions are scoped within a document.ready() function due to them interacting with the DOM?

I would say yes. Loading anything synchronously means longer load times for the user. Synchronous XHR has been deprecated for a while now because it provides a "bad user experience".