javascriptjavascript-objectses6-modulesweb-frontendjavascript-import

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

<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

  • Bro, i've noted two mistakes on your code:

    1. When you import and link your file on your .js and .html files you are pointing to the system root folder (eg. type="/main.js", import { sitesMod } from "/sites.js"; ). To point to the actual folder where are your folder use ./main.js for example and not just /, or just remove it, are the same;
    2. When you declare a variable inside a function it have a local scope and at the final of the execution is deleted, so you can not acess it outside of the scope, so:
    import { sitesMod } from "/sites.js";
sitesMod();

console.log(sites);

    Are wrong. Instead there are two ways:

    1. At your site.js:
    function sitesMod() {
  var sites = [
    'https://site1.org/',
    'https://site2.org/',
    'site3.org/'
  ];

  return sites;
}

    At main.js:

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

console.log(sitesMod());
    1. Include a console.log() directly inside the function — the first is better ;):
    function sitesMod() {
  var sites = [
    'https://site1.org/',
    'https://site2.org/',
    'site3.org/'
  ];

  console.log(sites);
}

export { sitesMod };

    Tip: see more about scope and the difference between var, let and const and also more about Linux (you will understanding the / and ./) and a such more.

    I hope it helped you, good studies XD

    My english is a sucks, so forgive me for something...