Скачать или смотреть Mastering JavaScript Classes: How to Call a Class from Another .js File

Discover how to solve the "ReferenceError: MyClassName is not defined" in JavaScript by correctly importing classes from different files.
---
This video is based on the question https://stackoverflow.com/q/64627845/ asked by the user 'KodingRookie' ( https://stackoverflow.com/u/14556515/ ) and on the answer https://stackoverflow.com/a/64627925/ provided by the user 'MK.' ( https://stackoverflow.com/u/14030881/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to call a class from another ,js file?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Mastering JavaScript Classes: How to Call a Class from Another .js File

JavaScript offers a powerful way to create reusable code through the use of classes. However, if you're new to JavaScript and ES6 features, you might encounter errors when trying to interact with classes defined in different files. One common error that many beginners come across is:

"Uncaught ReferenceError: MyClassName is not defined"

If you've experienced this while working with class definitions and their instantiation across multiple files, worry not! This guide will guide you through resolving this issue effectively.

The Problem at Hand

Suppose you have created two JavaScript files: class.js, where your class is defined, and app.js, where you're attempting to utilize this class. However, upon running your application, you receive the ReferenceError stating that the MyClass is not defined.

Here's What Your Code Looks Like

In class.js:

[[See Video to Reveal this Text or Code Snippet]]

In app.js:

[[See Video to Reveal this Text or Code Snippet]]

Your HTML Structure:

[[See Video to Reveal this Text or Code Snippet]]

Diagnosing the Error

When you try to instantiate MyClass in app.js, the browser throws an error because it has yet to load and recognize MyClass which is defined in class.js. The order in which you load your JavaScript files in the HTML document is crucial!

The Solution: Correct File Loading Order

The solution to your problem lies in changing the order of your script tags in the HTML file. You need to ensure that the class file (class.js) is loaded before the application file (app.js). Here's how your corrected HTML should look:

[[See Video to Reveal this Text or Code Snippet]]

Why This Works

Loading Order Matters: The browser parses and executes JavaScript files in the order they appear in the HTML. By loading class.js first, you make sure MyClass is defined and available when you try to create an instance of it in app.js.

Instantiate After Definition: By defining your classes before instantiation, you eliminate the chance of your reference being undefined.

Final Thoughts

Understanding how to organize your JavaScript files and their loading order is essential for avoiding common pitfalls like the "ReferenceError". Now that you know how to successfully call a class from another .js file, you can confidently work on larger projects that utilize structured and modular code.

If you're looking to explore more about ES6 classes and JavaScript in general, be sure to check back for more guides and code snippets. Happy coding!