Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

javier klijnjan
javier klijnjan
5,409 Points

How does the array gets linked in the for loop?

i don't understand how we can access an array that was created in another file. In the for loop the professor calls the array "students" and stores it in a variable call "student", but the array is not created in the same file, how come?

1 Answer

Wiktor Bednarz
Wiktor Bednarz
18,635 Points

Hello Javier,

this is a very good question. There are few ways your JavaScript code can get access to dependencies which reside in other files. As you deduced, it doesn't happen by itself. Since ES6 (ECMAScript 2015) there's only one "proper" way for doing so with vanilla JavaScript(using only JavaScript):

Before that there were bunch of other more or less messy ways of importing code from other files. However now it's more or less streamlined thank to this new ES6 functionality.

Now I guess that if you didn't see import/export statements during your course is because you execute your code in the browser environment. Remember that before being served to the reciever, all the JavaScript code needs to be declared in your html file by using <script> tags. You can call multiple seperate JavaScript files with those tags, one by one and they all have access to eachother without those statements. That's because all the JS files declared with <script> tags are merged into one, big, long and messy JavaScript file before they're being served to the receiver. In fact browsers simply don't understand and can't use the ES6 import/export calls.

The in-depth topic of serving JavaScript to the browser is quite extensive. You can imagine that when you're writing a big application which uses multitudes of different code files then calling them all one by one with <script> tags is a bad idea:

  • each <script> tag sends out a HTTP request, the more of them you've got to perform, the more laggy your app is
  • your code might get broken considering that all the seperate files get combined into one and that's because they all share one global scope, which before merging was split into seperate global scopes for each file

There are multiple ways of avoiding those problems, but it's way out of the scope of your question. However if you want to dig into the topic, there are some resources which I could recommend for you:

tl;dr: The browser imports that data for you

Hope I was clear enough,

Wiktor Bednarz

javier klijnjan
javier klijnjan
5,409 Points

Gotcha! thank you very much all cleared out!

As a Java developer, I was wondering the same thing. How is one file aware of the other. Thank you for this great explanation. That they were getting called in the browser would have never occurred to me.