JavaScript Classes & Modules Introduction:
In modern JavaScript (ES6+), Classes are templates for creating objects with properties and
methods.
Modules help split code into reusable files, which can be imported and exported for better
organization, especially in large projects.
Tools & Concepts
Classes:
• Use class keyword.
• Have a constructor method to initialize properties.
• Can contain methods.
• Use new keyword to create instances.
Modules:
• export makes variables, functions, or classes available to other files.
• import brings exported code into a file.
• Modules run in strict mode automatically.
Types of Exports
• Named Export: Export multiple things, imported by name.
export function greet() { }
• Default Export: Export a single value per file.
export default MyClass;
Key Points
• Classes support inheritance with extends.
• Methods do not need function keyword inside classes.
• export and import keep code organized and maintainable.
• import must be at the top level in a file.
• Modules work natively in modern browsers with <script type="module">.
Syntax Example
Class Example:
class Car {
constructor(brand) {
[Link] = brand;
show() {
[Link](`Brand: ${[Link]}`);
const myCar = new Car("Toyota");
[Link]();
Export & Import:
// file: [Link]
export default class Car { }
// file: [Link]
import Car from './[Link]';
Example
A project may have:
• [Link]: Defines a Car class.
• [Link]: Imports Car, creates objects, calls methods.
This keeps code reusable and clear.
MCQ Questions
1. Which keyword creates a class?
a) module
b) function
c) class
d) object
Answer: c) class
Explanation: class declares a blueprint for objects.
Output: Defines constructors and methods.
2. Which keyword is used to export multiple things?
a) default
b) module
c) import
d) export
Answer: d) export
Explanation: export makes code available to other files.
Output: Other files can import the exported items.
3. What does import do?
a) Runs a class constructor
b) Saves files to disk
c) Brings in exported code
d) Declares a variable
Answer: c) Brings in exported code
Explanation: import loads exported functions/classes/variables.
Output: Makes them usable in the file.
4. How do you create an instance of a class?
a) class MyCar()
b) [Link]()
c) new Car()
d) Car()
Answer: c) new Car()
Explanation: new keyword instantiates an object from a class.
Output: Runs the constructor.
5. Which tag loads modules in HTML?
a) <module>
b) <script type="module">
c) <import>
d) <js>
Answer: b) <script type="module">
Explanation: This lets browsers handle import/export.
Output: Runs the file as a module.
Coding Questions with Answers, Outputs & Explanations
1. Create a Person class with a name property and a sayHello() method.
Answer:
class Person {
constructor(name) {
[Link] = name;
sayHello() {
[Link](`Hello, ${[Link]}`);
const p = new Person("Alice");
[Link]();
Output:
Hello, Alice
Explanation:
constructor sets name; sayHello() prints greeting.
2. Export a function called add from [Link].
Answer:
// [Link]
export function add(x, y) {
return x + y;
Output:
Nothing immediately; it’s ready for import.
Explanation:
Named export makes add usable in other files.
3. Import add and use it in [Link].
Answer:
// [Link]
import { add } from './[Link]';
[Link](add(5, 3));
Output:
Explanation:
Brings in add and calls it with numbers.
4. Export a Car class as default from [Link].
Answer:
// [Link]
export default class Car {
constructor(model) {
[Link] = model;
info() {
[Link](`Model: ${[Link]}`);
Output:
No output yet; it’s ready for import.
Explanation:
export default allows single default export per file.
5. Import Car and create an object in [Link].
Answer:
// [Link]
import Car from './[Link]';
const myCar = new Car("Tesla");
[Link]();
Output:
Model: Tesla
Explanation:
import brings in the default export and uses it.