`collection.isEmpty()` - Check if Collection is Empty

Quick Start (30 seconds)

javascript

const todos = createCollection([
  { id: 1, text: 'Buy milk' },
  { id: 2, text: 'Walk dog' }
]);

// Check if empty
console.log(todos.isEmpty());  // false

// Clear and check
todos.clear();
console.log(todos.isEmpty());  // true

// Use in conditionals
if (cart.isEmpty()) {
  console.log('Your cart is empty');
  showEmptyCartMessage();
} else {
  console.log(`You have ${cart.length} items`);
  showCheckoutButton();
}

// Reactive UI updates
effect(() => {
  const empty = todos.isEmpty();
  const message = empty ? 'No todos yet' : `${todos.length} todos`;
  document.getElementById('status').textContent = message;
});

// Quick validation
function processItems() {
  if (items.isEmpty()) {
    throw new Error('No items to process');
  }
  // Process items...
} ✨

What just happened? You checked if the collection is empty with a semantic method!

What is `collection.isEmpty()`?

isEmpty() is a method that returns true if the collection has no items, false otherwise.

Simply put: it answers "are there any items?" with a clear yes/no.

Think of it as checking if a box is empty - you get a definite true or false.

Syntax

javascript

collection.isEmpty()

Parameters: None

Returns:

true if collection has 0 items
false if collection has 1+ items

Why Does This Exist?

The Problem: Length Comparison

Without isEmpty(), checking emptiness requires comparing length:

javascript

const items = createCollection([...]);

// Length comparison
if (items.length === 0) {
  console.log('Empty');
}

// Or access items
if (items.items.length === 0) {
  console.log('Empty');
}

// Not semantic

Problems: ❌ Not semantic - length === 0 doesn't express intent
❌ Less readable - Numeric comparison
❌ Easy to forget - Might check !length incorrectly

The Solution with `isEmpty()`

javascript

const items = createCollection([...]);

// Semantic method
if (items.isEmpty()) {
  console.log('Empty');
}

// Clear intent ✅

Benefits: ✅ Semantic - Name expresses exact intent
✅ Readable - Natural language
✅ Clear - No ambiguity
✅ Consistent - Standard method name

Mental Model

Think of isEmpty() as the empty detector:

Collection State         isEmpty()
┌──────────────┐        ┌──────────┐
│              │        │          │
│   (empty)    │───────→│   true   │
│              │        │          │
└──────────────┘        └──────────┘

┌──────────────┐        ┌──────────┐
│ [Item 1]     │        │          │
│ [Item 2]     │───────→│  false   │
│              │        │          │
└──────────────┘        └──────────┘

Key Insight: Simple boolean check, very readable.

How It Works

javascript

// From 03_dh-reactive-collections.js
isEmpty() {
  return this.items.length === 0;
}

Simple method:

Checks if length is 0
Returns boolean
No side effects

Basic Usage

Example 1: Simple Check

javascript

const items = createCollection([1, 2, 3]);

console.log(items.isEmpty());  // false

items.clear();
console.log(items.isEmpty());  // true

Example 2: Conditional Logic

javascript

const cart = createCollection([]);

if (cart.isEmpty()) {
  showEmptyCartMessage();
} else {
  showCheckoutButton();
}

Example 3: Guard Clause

javascript

function processOrders(orders) {
  if (orders.isEmpty()) {
    console.log('No orders to process');
    return;
  }
  
  orders.forEach(order => processOrder(order));
}

Example 4: Display Logic

javascript

effect(() => {
  const container = document.getElementById('items');
  
  if (items.isEmpty()) {
    container.innerHTML = '<p>No items found</p>';
  } else {
    container.innerHTML = items.map(i => 
      `<div>${i.name}</div>`
    ).join('');
  }
});

Real-World Examples

Example 1: Empty State UI

javascript

const products = createCollection([]);

effect(() => {
  const productsGrid = document.getElementById('products-grid');
  const emptyState = document.getElementById('empty-state');
  
  if (products.isEmpty()) {
    productsGrid.style.display = 'none';
    emptyState.style.display = 'block';
  } else {
    productsGrid.style.display = 'grid';
    emptyState.style.display = 'none';
  }
});

Example 2: Form Validation

javascript

const selectedItems = createCollection([]);

function validateSelection() {
  if (selectedItems.isEmpty()) {
    showError('Please select at least one item');
    return false;
  }
  return true;
}

function submitForm() {
  if (!validateSelection()) {
    return;
  }
  
  // Submit with selected items
  submitData(selectedItems.items);
}

Example 3: Search Results

javascript

const searchResults = createCollection([]);

effect(() => {
  const resultsDiv = document.getElementById('results');
  
  if (searchResults.isEmpty()) {
    resultsDiv.innerHTML = `
      <div class="no-results">
        <p>No results found</p>
        <p>Try a different search term</p>
      </div>
    `;
  } else {
    resultsDiv.innerHTML = searchResults.map(r => 
      `<div class="result">${r.title}</div>`
    ).join('');
  }
});

Example 4: Queue Status

javascript

const taskQueue = createCollection([]);

function getQueueStatus() {
  if (taskQueue.isEmpty()) {
    return 'Queue is empty - idle';
  }
  return `Processing ${taskQueue.length} tasks`;
}

setInterval(() => {
  console.log(getQueueStatus());
}, 5000);

Example 5: Notification Badge

javascript

const notifications = createCollection([]);

effect(() => {
  const badge = document.getElementById('notification-badge');
  
  if (notifications.isEmpty()) {
    badge.style.display = 'none';
  } else {
    badge.style.display = 'block';
    badge.textContent = notifications.length;
  }
});

Example 6: Enable/Disable Actions

javascript

const selectedFiles = createCollection([]);

effect(() => {
  const uploadBtn = document.getElementById('upload-btn');
  const deleteBtn = document.getElementById('delete-btn');
  const clearBtn = document.getElementById('clear-btn');
  
  const hasFiles = !selectedFiles.isEmpty();
  
  uploadBtn.disabled = !hasFiles;
  deleteBtn.disabled = !hasFiles;
  clearBtn.disabled = !hasFiles;
});

Example 7: Cart Total

javascript

const cart = createCollection([]);

effect(() => {
  const totalDiv = document.getElementById('cart-total');
  
  if (cart.isEmpty()) {
    totalDiv.innerHTML = '<p>Your cart is empty</p>';
  } else {
    const total = cart.items.reduce((sum, item) => 
      sum + (item.price * item.qty), 0
    );
    totalDiv.innerHTML = `
      <p>Items: ${cart.length}</p>
      <p>Total: $${total.toFixed(2)}</p>
    `;
  }
});

javascript

const undoHistory = createCollection([]);
const redoHistory = createCollection([]);

function updateHistoryButtons() {
  document.getElementById('undo-btn').disabled = undoHistory.isEmpty();
  document.getElementById('redo-btn').disabled = redoHistory.isEmpty();
}

function performAction(action) {
  undoHistory.add(action);
  redoHistory.clear();
  updateHistoryButtons();
}

function undo() {
  if (undoHistory.isEmpty()) return;
  
  const action = undoHistory.items.pop();
  redoHistory.add(action);
  action.undo();
  updateHistoryButtons();
}

Example 9: Data Loading State

javascript

const data = createCollection([]);
let isLoading = false;

effect(() => {
  const container = document.getElementById('data-container');
  
  if (isLoading) {
    container.innerHTML = '<div class="spinner">Loading...</div>';
  } else if (data.isEmpty()) {
    container.innerHTML = '<p>No data available</p>';
  } else {
    container.innerHTML = renderData(data.items);
  }
});

Example 10: Batch Operations

javascript

const batch = createCollection([]);

function addToBatch(item) {
  batch.add(item);
  updateBatchUI();
}

function processBatch() {
  if (batch.isEmpty()) {
    alert('Nothing to process');
    return;
  }
  
  console.log(`Processing ${batch.length} items...`);
  
  batch.forEach(item => processItem(item));
  batch.clear();
  
  console.log('Batch complete');
}

function updateBatchUI() {
  const processBtn = document.getElementById('process-btn');
  processBtn.disabled = batch.isEmpty();
  processBtn.textContent = batch.isEmpty() 
    ? 'No items' 
    : `Process ${batch.length} items`;
}

Common Patterns

Pattern 1: Empty State Render

javascript

function render() {
  if (collection.isEmpty()) {
    return renderEmptyState();
  }
  return renderItems();
}

Pattern 2: Guard Clause

javascript

function process() {
  if (collection.isEmpty()) {
    return;
  }
  // Process items...
}

Pattern 3: Conditional Class

javascript

effect(() => {
  element.classList.toggle('empty', collection.isEmpty());
  element.classList.toggle('has-items', !collection.isEmpty());
});

Pattern 4: Status Message

javascript

const message = collection.isEmpty() 
  ? 'No items' 
  : `${collection.length} items`;

Important Notes

1. Equivalent to length === 0

javascript

// These are equivalent
collection.isEmpty()
collection.length === 0

// But isEmpty() is more semantic

2. Returns Boolean

javascript

const result = collection.isEmpty();
console.log(typeof result);  // "boolean"
console.log(result === true || result === false);  // true

3. No Parameters

javascript

// ✓ Correct
collection.isEmpty()

// ❌ Wrong - doesn't take parameters
collection.isEmpty(something)

4. Reactive Friendly

javascript

// Works great in effects
effect(() => {
  if (collection.isEmpty()) {
    updateUI('empty');
  }
});

When to Use

Use isEmpty() For: ✅ Check if collection has no items
✅ Conditional rendering
✅ Guard clauses
✅ Enable/disable UI elements
✅ Validation
✅ Status messages

Don't Use For: ❌ Checking specific count - Use length === n
❌ Checking if has items - Use !isEmpty() or length > 0

Comparison with Alternatives

javascript

const items = createCollection([]);

// isEmpty() - Semantic
items.isEmpty()  // true

// length === 0 - Works but less clear
items.length === 0  // true

// !length - Confusing
!items.length  // true (but avoid)

// length check
items.length < 1  // true (verbose)

Best: Use isEmpty() for semantic clarity.

Negation Pattern

javascript

// Check if NOT empty
if (!collection.isEmpty()) {
  console.log('Has items');
}

// Some teams prefer a hasItems() method
// But standard is to use !isEmpty()

Summary

What is collection.isEmpty()?
A method that returns true if collection has no items.

Why use it?

✅ Semantic clarity
✅ More readable than length === 0
✅ Standard method name
✅ Clear intent

Key Takeaway:

length === 0            isEmpty()
      |                     |
Numeric check          Semantic ✓
      |                     |
Less clear            Clear intent ✅

One-Line Rule: Use isEmpty() for clear, semantic empty checks.

Best Practices:

Use for empty state logic
Prefer over length === 0 for readability
Great for guard clauses
Works well in reactive effects
Returns boolean, no parameters

Remember: isEmpty() makes empty checks crystal clear! 🎉

collection.isEmpty() - Check if Collection is Empty ​

Quick Start (30 seconds) ​

What is collection.isEmpty()? ​

Syntax ​

Why Does This Exist? ​

The Problem: Length Comparison ​

The Solution with isEmpty() ​

Mental Model ​

How It Works ​

Basic Usage ​

Example 1: Simple Check ​

Example 2: Conditional Logic ​

Example 3: Guard Clause ​

Example 4: Display Logic ​

Real-World Examples ​

Example 1: Empty State UI ​

Example 2: Form Validation ​

Example 3: Search Results ​

Example 4: Queue Status ​

Example 5: Notification Badge ​

Example 6: Enable/Disable Actions ​

Example 7: Cart Total ​

Example 8: History Navigation ​

Example 9: Data Loading State ​

Example 10: Batch Operations ​

Common Patterns ​

Pattern 1: Empty State Render ​

Pattern 2: Guard Clause ​

Pattern 3: Conditional Class ​

Pattern 4: Status Message ​

Important Notes ​

1. Equivalent to length === 0 ​

2. Returns Boolean ​

3. No Parameters ​

4. Reactive Friendly ​

When to Use ​

Comparison with Alternatives ​

Negation Pattern ​

Summary ​

`collection.isEmpty()` - Check if Collection is Empty

Quick Start (30 seconds)

What is `collection.isEmpty()`?

Syntax

Why Does This Exist?

The Problem: Length Comparison

The Solution with `isEmpty()`

Mental Model

How It Works

Basic Usage

Example 1: Simple Check

Example 2: Conditional Logic

Example 3: Guard Clause

Example 4: Display Logic

Real-World Examples

Example 1: Empty State UI

Example 2: Form Validation

Example 3: Search Results

Example 4: Queue Status

Example 5: Notification Badge

Example 6: Enable/Disable Actions

Example 7: Cart Total

Example 8: History Navigation

Example 9: Data Loading State

Example 10: Batch Operations

Common Patterns

Pattern 1: Empty State Render

Pattern 2: Guard Clause

Pattern 3: Conditional Class

Pattern 4: Status Message

Important Notes

1. Equivalent to length === 0

2. Returns Boolean

3. No Parameters

4. Reactive Friendly

When to Use

Comparison with Alternatives

Negation Pattern

Summary