JavaScript - Problem transferring an object between two different JavaScript files

Question

JavaScript - Problem transferring an object between two different JavaScript files

Welcome!

I am just starting to learn JavaScript. Excuse me if I don't know all the technical terms yet.

Scenario

Currently, my project consists of three main files:

index.html
main.js
sites.js

index.html

<body>
    <h1>JavaScript Playground</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 };

Code Explanation

index.html is responsible for running the main.js script.

main.js imports and executes the sitesMod() function from sites.js.

Issue

The expected output of console.log(sites); should be

https://site1.org/, https://site2.org/, site3.org/

.

However, instead of the desired result, console.log(sites); displays sites is not defined.

Current Understanding

I understand that I might need to declare something like var sites = X in main.js, but I'm unsure how to transfer the data stored in var sites in sites.js to var sites in main.js.

Although utilizing the import/export modules seem promising, I'm struggling with the final step of transferring the variable content between files.

I hope this explanation sheds light on my issue. Please feel free to ask for further clarification. Thank you.

javascript javascript-objects es6-modules web-frontend javascript-import

Answer 1

Answer №1

Hey there, I've noticed a couple of mistakes in your code:

When you import and link your files in your .js and .html files, you're pointing to the system root folder (e.g., type="/main.js",
```
import { sitesMod } from "/sites.js"; 
```
). Instead, use ./main.js or just remove the slash for the actual folder location;
Variables declared inside a function have local scope and are deleted at the end of execution, so you can't access them outside of that scope.

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

console.log(sites);

This is incorrect. Here are two correct ways to do it:

In your sites.js:

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

  return sites;
}

In main.js:

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

console.log(sitesMod());

You can also include a console.log() directly inside the function — the first option is preferable ;)

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

  console.log(sites);
}

export { sitesMod };

Tip: Learn more about variable scope and the differences between var, let, and const. Also, read up on Linux to understand the difference between / and ./.

I hope this helps you with your studies! XD

Excuse any mistakes in my English...

Answer 2

Hey there, I've noticed a couple of mistakes in your code:

When you import and link your files in your .js and .html files, you're pointing to the system root folder (e.g., type="/main.js",
```
import { sitesMod } from "/sites.js"; 
```
). Instead, use ./main.js or just remove the slash for the actual folder location;
Variables declared inside a function have local scope and are deleted at the end of execution, so you can't access them outside of that scope.

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

console.log(sites);

This is incorrect. Here are two correct ways to do it:

In your sites.js:

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

  return sites;
}

In main.js:

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

console.log(sitesMod());

You can also include a console.log() directly inside the function — the first option is preferable ;)

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

  console.log(sites);
}

export { sitesMod };

Tip: Learn more about variable scope and the differences between var, let, and const. Also, read up on Linux to understand the difference between / and ./.

I hope this helps you with your studies! XD

Excuse any mistakes in my English...

Answer 3

Answer №2

There are a couple of issues that need to be addressed here. The function sitesMod currently does not have a return value, which means that when it is called in main.js, nothing will happen. To fix this, update the function as follows:

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

The second issue lies in how the function is being used. Simply calling the function does not declare the variable sites outside of the function's body. To access the sites variable, you can make use of the following code snippet:

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

console.log(sitesMod());

Please note that I have not tested the code.

Answer 4

There are a couple of issues that need to be addressed here. The function sitesMod currently does not have a return value, which means that when it is called in main.js, nothing will happen. To fix this, update the function as follows:

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

The second issue lies in how the function is being used. Simply calling the function does not declare the variable sites outside of the function's body. To access the sites variable, you can make use of the following code snippet:

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

console.log(sitesMod());

Please note that I have not tested the code.

Answer 5

Answer №3

function sitesMod() does not return any value when executed, and it does not create a global variable named sites

An alternative approach would be:

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, considering the simplicity of sites.js, it would be more straightforward to streamline the code like this:

sites.js

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

export { sites };

main.js

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

Answer 6

function sitesMod() does not return any value when executed, and it does not create a global variable named sites

An alternative approach would be:

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, considering the simplicity of sites.js, it would be more straightforward to streamline the code like this:

sites.js

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

export { sites };

main.js

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

JavaScript - Problem transferring an object between two different JavaScript files

Welcome!

Scenario

Code Explanation

Issue

Current Understanding

Answer №1

Answer №2

Answer №3

Similar questions

Tips for directing attention to a specific row with an input field in JavaScript

When two divs are activated, the third div goes into invisible mode

What is the syntax for accessing an element within an array in a function?

How can the camera in ThreeJS be shifted horizontally without being affected by its current orientation?

Javascript puzzle - I have 99 obstacles

Ensure that the authorization header is properly set for all future client requests

Issue with jQuery datepicker not triggering onChangeMonthYear event

Using React Native to take user input and store it in an array in

Is it possible to nest v-for directives within a component file?

Exploring AngularJS: The Innovative Navigation Bar

Update the select tag to display as radio buttons

Issue with Vue.js - Double curly braces not rendering data on the page

Uncovering the secrets of locating and deleting arrays with the power of jQuery

What are the steps to develop an ElectronJS application that displays "Hello world!" in the console after a button click?

Storing Data Property Value from an Item in Rendered List Using Vue: A Quick Guide

Performing a test on API GET Request with Playwright

A step-by-step guide to showing images in React using a JSON URL array

Implementing personalized callback methods for AJAX requests in Prototype

A versatile Material UI paper that adjusts its dimensions dynamically

Refreshing Page Following Ajax Submission