Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects The Build an Object Challenge, Part 2 Solution

Relationship of two different JavaScript files?

In the video, student_report.js and student.js was created. It is still not clear to me how or why did the two modules had a relationship without importing anything?

The student_report.js was able to access and retrieve files from student.js. It was able to use the student variable without any reference as to what file should it look for.

What if I have another js file that has a variable of 'student' also? What will be picked up? How does JS determines this?

2 Answers

Jae Min Kweon
Jae Min Kweon
4,695 Points

Remember that Javascript that you are shown on the page is being loaded via the <script> tags in html. So what is essentially happening when you put in the <script src = "***.js"></script>, you are calling in the code that you wrote into html. You can essential make the code work exactly the same way by copying the stuff that you wrote in javascript syntax and then pasting it between the <script></script>.

In the project, you have student.js and student_report.js, which are then loaded into html using the above method. At this point, the two different js codes will exist together in the same space, and will be able to recognize the variables declared on another js file.

However, there is a catch to this as well. Dave explains that the student_report.js file needs to be loaded after the student.js file because it is dependent on the student.js file. This is because when the code is loaded via <script> tag, the code will run. Since student_report.js will call on a variable declared in student.js, if student_report.js is run before student.js, it will see that the variable that it was looking for has not been declared yet and just spit out an error.

Now, on the question of "what would happen if you had multiple js files with the variable that use the same name loaded in". This basically follows a similar logic as above. If multiple js files are called in, they will be loaded on the order that is given on the html from top to bottom. As we know, the value of a variable, if declared multiple time, will end up with the very last value you give it. So, the value of the variable of the same name will end up with the value that it was assigned to on the very last js file that was called containing that variable.

Awesome! Thank you so much for this explanation.

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points

I beleive the student file had the data of each student & the report was the formatting for displaying all the students. Just using different files for different purposes so the files dont get too long.

But how can the student_report.js access a variable of 'student' from 'student.js'? I am familiar in some languages and they would typically import the 'students.js' to 'student_report.js'. But that is not the case there. There was no reference/connection and it's puzzling me a lot. :(