Guided: Working with Modules in Modern JS

In this lab, you will take the existing code in the app.js file and break it into multiple files by importing and exporting the code as JavaScript modules.

The lab already has the code setup in the app.js file. For simplicity, the functionality appears in the browser console, rather than on the page.

The code simulates an online shopping cart, including data, cart functions, and output to the console with formatted pricing.

To run the app you can: Go to your app or click the Open in new browser tab button in the Web Browser tab. Then you can go to developer tools in your browser to view the console.

It's time to begin!

In this first step of the lab, you will move the products data array found at the top of app.js into its own products.js file, and import that file into the app.js file.

Moving code into its own JS file and exporting that code to make it available for other files to use is a great way to make your code reusable and also prevent the variables within it from colliding with other variables of the same name.

In the index.htm file, the app.js file with type=module is already referenced, which tells the browser that you will export and import modules starting with that file.

The products.js file already exists for you with a TODO comment. Note that the file already has the needed final line export default products;.

This makes the products array available for other files to use. By adding the default keyword, other files don't need to know the real name of the variable. When other files import from the products.js file, the products variable is what they will receive by default.

To run the app you can: Go to your app Now that products.js has the data, you need the app.js file to be able to use it. That means loading the products.js file from the app.js file by importing the module exported from it.

In this step, you will move all of the cart-related functions into their own module called cart.js.

The cart.js file already exists and already has the first and last lines of code prepared for you. It imports products.js at the top, since the functions use the product data. It also, at the bottom of the file, exports both a default value (you can only have one default) and the calculateTotal and removeItem functions. To export those other functions, it wraps them as an object inside curly braces.

Lastly, the function is aliased using the as keyword. This means that when other files import those functions, they don't reference calculateTotal, but instead they reference getTotal.

To run the app you can: Go to your app Now that the functions are in the cart.js file, you'll need to import them into the app.js file. Notice that addToCart can be imported directly since it is the default export. However, formatPrice and getTotal must be imported using destructuring (curly braces) because they are named exports. This approach allows you to import both formatPrice and the aliased getTotal function. Look at the last line of cart.js to see how they are exported.

In cart.js, calculateTotal is aliased using the as keyword, exporting it with a different name, getTotal. You will now use that aliased function name.

In this step, you will extract two cart functions into a utility module, allowing them to be imported independently without importing the entire cart module.

The utils.js file has already been prepared for you with a final export line in the file. It is missing the import for products.

To run the app you can: Go to your app You need to move some of the functions from the cart.js file into the utils.js file, creating a reusable utilities module. You still need to use those functions in the cart.js file so you need to import them. You have moved things around in your modules, so you need to update the app.js file to make sure you're importing the functions from the correct files. Finally, the app.js file also needs one of the utils functions! You now have a nice utilities function module! Great job!

In this step, you will add a separate cart operations module that takes certain functions from the cart.js file and either wraps them in new functions or simply exports them as-is.

In this way, you'll see how you can use modules to manage function names and function organization.

The cartOperations.js file is already prepared for you, but missing the import of the functions from the cart.js file.

To run the app you can: Go to your app Next, you will use the cartOperations.js file instead of the cart.js file. Now, you need to make sure your code is updated to use your new wrapper functions. You've wrapped and renamed your cart functions by changing the cart API when imported by the app.js file. Great job!

In this last step, you will add discount functionality to the cart.

There is already a specialOffers.js file with a function created and exported. It updates a cart array and applies discounts.

You will import this function and include it when calculating totals.

To run the app you can: Go to your app Next, you will apply the discount. The cart is complete and the functionality is split up amongst various modules. Congratulations, you've completed this lab!