How do i import a script into javascript?

export default function Hello[] {
return "Hello buddy!";
}

import { Hello } from './script1.js';
let val = Hello;
console.log[val];

import { Hello } from './script1.js';

export let Name = [name] => {return "My name is " + name;}
export let Address = [address] => {return "i live in " + address;}
export let Age = [age] => {return "my age is "+ age;}

import { Name, Address, Age} from './script1.js';
let val = Name["John"];
let age = Age[26];
console.log[val + " and " + age];

import { Name, Address, Age} from './script1.js';

eval[`

element on the page.

Please be aware that you might get a TypeError “$[...].css is not a function” with any of these examples if you enter all the commands at the same time. You need to wait for a second between loading the script and actually using it. So enter the commands necessary to load the external script first, then enter commands using the script.

The TypeError occurs because JavaScript actually has a built-in dollar sign method $[] that you are trying to overwrite with jQuery. The built-in dollar sign method does not have a .css[] function — that’s jQuery. So you have to wait for eval[] to finish loading the script before you can actually call the $["div"].css[] function.

Finally, these demonstrations may only work on certain pages: for me, they work in the browser console on the Google homepage, but not while looking at a GitHub Gist, because of the message:

Refused to load the script '//code.jquery.com/jquery-3.5.0.js' because it violates the following Content Security Policy directive: "script-src github.githubassets.com".

Your mileage may vary.

Method 1: document.write[]

View the raw code as a GitHub gist

In this case, document.write[] overwrites the loaded page, so there is nothing to actually apply the CSS styles to. But, jQuery will be loaded into the console window, for what it’s worth.

Method 2: appendChild[]

View the raw code as a GitHub gist

This method works great, without overwriting the loaded page. Calling document.head.appendChild[script] loads the script into the element of the page.

As mentioned, you don’t actually need to eval[] here — but you do need to wait for the appendChild[] command to execute on the browser window before jQuery is available for use.

Method 3: fetch[]

Depending on your personal preference, there are two equivalent options for using fetch[]. First is using fetch[] with Promise chaining:

View the raw code as a GitHub gist

Second, you can use async & await to handle the Promise returned by fetch[]:

View the raw code as a GitHub gist

Either of these methods would be considered a way of loading an external JavaScript file directly from the console window.

Just remember that you don’t need eval[] unless you’re loading a string containing a tag, like in the document.write[] example.

But wait — never use eval[]!

As I mentioned in passing previously, eval[] has security risks associated with it, as the MDN Docs explain well:

“eval[] is a dangerous function, which executes the code it's passed with the privileges of the caller. If you run eval[] with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage / extension. More importantly, a third-party code can see the scope in which eval[] was invoked, which can lead to possible attacks in ways to which the similar Function is not susceptible.” — MDN Docs

Put simply, you should use Function[] instead of eval[] — but eval[] is commonly used, so don’t be surprised if you see it around.

Using Function[] would look like the following code example:

View the raw code as a GitHub gist

Syntax-wise, there is no difference — just swap Function[] for eval[].

But using Function[] will improve the security and performance of your website or application, even when just loading an external library from the developer console.

“Function[]Creates a new Function object. Calling the constructor directly can create functions dynamically but suffers from security and similar [but far less significant] performance issues to eval. However, unlike eval, the Function constructor creates functions that execute in the global scope only.” — MDN Docs

I should add thee caveat that I find that eval[] sometimes work for me when Function[] doesn’t — for example, Function[] seems to be blocked on some websites where eval[] is not blocked, for whatever reason.

Typically, appendChild[] will load the script just fine and will be the preferred method — with better performance and less security risk.

If you try the code examples yourself using jQuery, please keep in mind that there is a built-in dollar sign method $[] that jQuery will overwrite.

Other options

You have many other options if you’re interested in loading multiple external files or tools using JavaScript.

For example, if you already have jQuery loaded on a page, you can use jQuery’s helper function $.getScript[]:

View the raw code as a GitHub gist

Some other potentially useful options for loading external scripts are:

• SystemJS
• ModuleLoader
• jspm.io

Of these, jspm.io is especially interesting because it allows you to use a simple import[] statement directly from the console window.

One thing to watch out for here is “namespace pollution” — the script you are importing may overwrite global variables already defined on that page. The previously-mentioned dollar sign method $[] is an example of a namespace conflict with jQuery. You could also run into namespace issues if your version of jQuery conflicts with a version of jQuery already loaded on the website.

If namespace pollution is a concern, a tool like Tampermonkey may be helpful. Tampermonkey is a browser extension that can easily handle multiple running scripts on the same page without namespace collisions.

You might also consider RunKit, which is a website linked on every npm package [such as jQuery] that lets you try out any Node.js package in the browser, with no setup required. Here is the RunKit for jQuery. [I never have any luck using jQuery inside RunKit, but you may be able to make it work].

Similarly, CodeSandbox lets you easily sandbox any individual npm package or combination of npm packages without needing to install anything locally, as does CodePen via SkyPack.

Conclusion

It is common that a developer might want to test an external library or other JavaScript file using the browser’s development console.

For example, you might want to load jQuery, either for the purpose of manipulating the current page or just to practice syntax in the console.

Whether prototyping, learning, testing, or modifying an existing page, it can be very useful to load an external library from the developer console.

This article discussed three methods of loading an external JavaScript file from the console: document.write[], appendChild[], and fetch[].

I provided an example using each method showing how to load jQuery from the browser’s console environment.

Alternatively, you might try other tools — like SystemJS, ModuleLoader, jspm.io, Tampermonkey, RunKit, or CodeSandbox — depending on your exact needs and personal preferences.

Hopefully, this article helps you unlock the full power of Chrome DevTools or Firefox’s Web Console.

Happy coding! 👏👍💯😄🧠️🏎

How do I load a script into JavaScript?

How do I import a file into a JavaScript file?

Where do I put scripts in JavaScript?

How do you write a JavaScript script?