Simple Inventory System: Building a Basic Inventory Application with JavaScript

7.5.3 Simple Inventory System

Managing collections of items is a fundamental concept in programming, and it’s especially useful when creating applications like a simple inventory system. In this section, we’ll explore how to use JavaScript arrays to manage an inventory, update quantities, and track changes. This hands-on project will help you understand how to apply arrays in a practical way.

Key Learning Objectives

• Apply arrays to manage a collection of items.
• Understand how to update quantities and track changes.
• Practice developing a basic inventory application.

Building the Inventory System

Let’s dive into creating a simple inventory system using JavaScript. We’ll start by defining our inventory as an array and then create functions to add, remove, and list items.

Step 1: Setting Up the Inventory

First, we’ll create an empty array to hold our inventory items. Each item will be an object containing a name and a quantity.

let inventory = [];

Step 2: Adding Items to the Inventory

We’ll create a function called addItem that takes a name and a quantity as parameters. This function will add a new item to the inventory array.

function addItem(name, quantity) {
  inventory.push({ name: name, quantity: quantity });
  console.log(`${quantity} x ${name} added to inventory.`);
}

Step 3: Removing Items from the Inventory

Next, we’ll create a function called removeItem that removes a specified quantity of an item from the inventory. If the quantity of the item reaches zero, it will be removed from the inventory entirely.

function removeItem(name, quantity) {
  for (let i = 0; i < inventory.length; i++) {
    if (inventory[i].name === name) {
      if (inventory[i].quantity >= quantity) {
        inventory[i].quantity -= quantity;
        console.log(`${quantity} x ${name} removed from inventory.`);
        if (inventory[i].quantity === 0) {
          inventory.splice(i, 1);
          console.log(`${name} is now out of stock.`);
        }
        return;
      } else {
        console.log(`Not enough ${name} in inventory.`);
        return;
      }
    }
  }
  console.log(`${name} not found in inventory.`);
}

Step 4: Listing the Inventory

We’ll also create a function called listInventory to display the current items in the inventory.

function listInventory() {
  console.log('Current Inventory:');
  inventory.forEach(function(item) {
    console.log(`${item.name}: ${item.quantity}`);
  });
}

Step 5: Using the Inventory System

Now that we have our functions set up, let’s see how they work together.

// Usage
addItem('Apple', 10);
addItem('Banana', 5);
listInventory();
removeItem('Apple', 3);
listInventory();

Expanding the Inventory System

To make our inventory system more robust, let’s expand it to include item prices and calculate the total value of the inventory.

Step 6: Adding Prices

We’ll modify the addItem function to include a price for each item.

function addItem(name, quantity, price) {
  inventory.push({ name: name, quantity: quantity, price: price });
  console.log(`${quantity} x ${name} added to inventory at $${price} each.`);
}

Step 7: Calculating Total Inventory Value

We’ll create a new function called calculateTotalValue to compute the total value of all items in the inventory.

function calculateTotalValue() {
  let totalValue = 0;
  inventory.forEach(function(item) {
    totalValue += item.quantity * item.price;
  });
  console.log(`Total Inventory Value: $${totalValue}`);
}

Step 8: Testing the Expanded System

Let’s test our expanded inventory system with the new functionality.

// Usage
addItem('Apple', 10, 0.5);
addItem('Banana', 5, 0.3);
listInventory();
calculateTotalValue();
removeItem('Apple', 3);
listInventory();
calculateTotalValue();

Visualizing the Inventory System

To better understand the flow of our inventory system, let’s visualize it using a flowchart.

    graph TD;
	    A[Start] --> B[Add Item]
	    B --> C[Inventory Updated]
	    C --> D[List Inventory]
	    D --> E[Remove Item]
	    E --> F{Item Quantity Zero?}
	    F -- Yes --> G[Remove Item from Inventory]
	    F -- No --> H[Update Quantity]
	    G --> I[Calculate Total Value]
	    H --> I
	    I --> J[End]

Best Practices and Common Pitfalls

• Consistent Naming: Use clear and consistent naming conventions for your functions and variables to make your code more readable.
• Error Handling: Always check for errors, such as trying to remove more items than are available.
• Code Reusability: Write functions that can be reused in different parts of your application to reduce redundancy.

Optimization Tips

• Use Objects Efficiently: Consider using objects to store additional item attributes, such as category or supplier, for a more comprehensive inventory system.
• Optimize Search: For larger inventories, consider using more efficient data structures or algorithms to search and update items.

External Resources

For more information on JavaScript arrays and objects, check out these resources:

• MDN Web Docs: Arrays
• JavaScript.info: Objects
• Eloquent JavaScript: Data Structures

Quiz Time!