ES6 Module Import/Export Practice

Understanding the Problem

We need to connect multiple JavaScript files using ES6 import/export syntax to make a web application work. The application shows Mr. and Mrs. Potato Head with interactive buttons for greetings.

Key requirements:

- Must use ES6 module syntax (import/export)

- Must use export default at least once

- Cannot modify app.js

- Cannot use CommonJS syntax

Devising a Plan

1. Analyze file dependencies by tracing variable usage

2. Identify which files need to be connected

3. Determine appropriate export types (default vs named)

4. Add import/export statements in correct order

5. Test functionality in browser

Carrying Out the Plan

Solution Files with Comments:

game.js

import { getIndex } from './utilities.js';
import { mrPotatoHeadQuotes } from './quotes/mrPotatoHead.js';
import { mrsPotatoHeadQuotes } from './quotes/mrsPotatoHead.js';

export default class Game {
    // Rest of Game class implementation...
}
    

index.js

import Game from './game.js';

window.onload = () => {
    const game = new Game();
    game.start();
};
    

utilities.js

export const getIndex = () => {
    const wrapper = document.getElementById('wrapper');
    return parseInt(wrapper.dataset.index);
};
    

quotes/mrPotatoHead.js

export const mrPotatoHeadQuotes = {
    "hello": "Hi, I'm Mr. Potato Head!",
    "bye": "Bye, it's been nice talking to you!"
};
    

quotes/mrsPotatoHead.js

export const mrsPotatoHeadQuotes = {
    "hello": "Hi, I'm Mrs. Potato Head! Pleasure to meet you.",
    "bye": "Bye, Sweet Potato!"
};
    

Code Explanation

Understanding Modules

Think of ES6 modules like LEGO blocks. Each file is a separate block that can connect with others. The 'export' keyword is like the studs on top of a LEGO block - it makes the block connectable. The 'import' keyword is like pressing blocks together to use them.

Types of Exports

1. Default exports (export default): Like having a main LEGO piece in a set. You can only have one per file.

2. Named exports (export const/let/function): Like having multiple smaller LEGO pieces. You can have many per file.

File Dependencies

- index.js needs Game class → imports from game.js

- game.js needs:

  • getIndex function → imports from utilities.js

  • Potato Head quotes → imports from quote files

Looking Back & Real World Applications

This pattern of modular code organization is used extensively in modern web development. For example:

- React components are typically organized in separate modules

- Node.js packages use a similar module system

- Large applications like VS Code are built using modules for maintainability

Benefits of Modules

1. Code Organization: Like organizing tools in a toolbox - each has its place

2. Reusability: Like using the same LEGO blocks in different builds

3. Maintainability: Like being able to replace a single part without affecting others

4. Scoping: Like keeping kitchen tools separate from garage tools

Further Learning

Try these exercises:

1. Create a new feature that requires a new module

2. Experiment with different export types

3. Try circular dependencies to understand their challenges

4. Build a larger application using modules