'Javascript - Issue passing object from one JS file to another JS file

Hello!

I am new to JavaScript. Please forgive my lack of JS vocabulary.

Context

I have three files:

index.html
main.js
sites.js

index.html

<body>
  <h1>JavaScript Testing Zone</h1>
  <script src="/main.js" type="module"></script>
</body>

main.js

import { sitesMod } from "/sites.js";
sitesMod();

console.log(sites);

sites.js

function sitesMod() {
  var sites = [
    'https://site1.org/',
    'https://site2.org/',
    'site3.org/'
  ];
}
export { sitesMod };

Explanation of code

index.html will run the main.js file.

main.js will import and run the function sitesMod() from sites.js

Problem

console.log(sites); should output https://site1.org/,https://site2.org/,https://site3.org/

instead, console.log(sites); outputs sites is not defined

What I know

I realize that I need to declare something like var sites = X in main.js, but I am unsure how to transfer the content of var sites on sites.js to var sites on main.js

So far using the import and export modules seem to be taking me in the right direction.I need to bridge the final step of transferring the variable's data from one file to another.

I hope I was able to describe my problem in an intelligible way. Please let me know if I can clarify the question. Thank you.

Solution 1:^[1]

There are two issues here. sitesMod is function with no return value so when you call it in main.js nothing happens. Change the function to:

function sitesMod() {
  var sites = [
    'https://site1.org/',
    'https://site2.org/',
    'site3.org/'
  ];
  return sites;
}

Second issue is with the way you're using the function. Just calling the function doesn't declare a variable (sites) outside the body of the function. To access the sites variable you can do this:

import { sitesMod } from "/sites.js";

console.log(sitesMod());

I didn't try the code.

Solution 2:^[2]

function sitesMod() doesn't return anything and running it does not create a global variable called sites

One solution is

sites.js

function sitesMod() {
  var sites = [
    'https://site1.org/',
    'https://site2.org/',
    'site3.org/'
  ];
  return sites;
}

main.js

import { sitesMod } from "/sites.js";
const sites = sitesMod();

console.log(sites);

However, due to the trivial nature of sites.js - I'd be more inclined to simplify the code like

sites.js

const sites = [
  'https://site1.org/',
  'https://site2.org/',
  'site3.org/'
];

export { sites };

main.js

import { sites } from "/sites.js";
console.log(sites);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mamady
Solution 2	Bravo