| [Loading Script Dynamically](#loading-script-dynamically) |

Loading JavaScript dynamically in a web page can be useful for a variety of reasons, such as improving performance by only loading the necessary code when it's needed, or adding functionality to the page without requiring a full page reload.

It can be accomplished by creating a new `script` element, setting its `src` attribute to the URL of the JavaScript file, and then adding the element to the `head` section of the current HTML document. Here's an example:

const script = document.createElement('script');

script.src = 'path/to/script.js';

document.head.appendChild(script);

In this example, `document.createElement('script')` creates a new `script` element. Then, we set the `src` attribute of the script element to the URL of the JavaScript file we want to load. Finally, we append the `script` element to the `head` section of the current document using `document.head.appendChild(script)`.

It's important to note that when you dynamically load a script, it's not guaranteed to execute immediately, and any code that depends on the loaded script should be executed only after the script has been fully loaded and is ready to use (it can also be handled with [`defer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) attribute). To handle this, you can listen for the `load` event on the `script` element before executing any dependent code:

const script = document.createElement('script');

script.src = 'path/to/script.js';

script.addEventListener('load', () => {

// Code that depends on the loaded script goes here

});

document.head.appendChild(script);

In this example, we add an event listener for the `load` event on the `script` element. Once the script has loaded, the listener function will be executed, and any dependent code can be executed inside it.