Mini-Build: To-Do List (Array CRUD)
Build a functional To-Do List using array methods — add, remove, toggle complete, and filter tasks. This project applies all array concepts from this module in a practical, real-world application.
To-Do List Features
- Add tasks — push new task objects to the array
- Remove tasks — filter out by ID or splice by index
- Toggle complete — map to update the completed property
- Filter — Show all, active, or completed tasks
- Count — reduce to count completed/remaining
- This pattern is used in React, Vue, and all frontend frameworks
To-Do List Code
// To-Do List with Array Methods
let todos = [];
let nextId = 1;
// Add task
function addTodo(text) {
todos.push({ id: nextId++, text, completed: false, createdAt: new Date().toLocaleString() });
}
// Remove task
function removeTodo(id) {
todos = todos.filter(todo => todo.id !== id);
}
// Toggle complete
function toggleTodo(id) {
todos = todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
);
}
// Filter tasks
function getActive() { return todos.filter(t => !t.completed); }
function getCompleted() { return todos.filter(t => t.completed); }
// Stats
function getStats() {
const total = todos.length;
const completed = todos.filter(t => t.completed).length;
return { total, completed, remaining: total - completed };
}
// Demo
addTodo("Learn JavaScript arrays");
addTodo("Build a to-do app");
addTodo("Master array methods");
addTodo("Practice reduce");
toggleTodo(1); // complete first task
toggleTodo(3); // complete third task
console.log("📋 All Tasks:");
todos.forEach(t => console.log(` [${t.completed ? "✅" : "⬜"}] ${t.text}`));
console.log("\n📊 Stats:", getStats());
console.log("\n🔵 Active:", getActive().map(t => t.text));
console.log("✅ Done:", getCompleted().map(t => t.text));
removeTodo(2); // remove "Build a to-do app"
console.log("\n📋 After removing task 2:");
todos.forEach(t => console.log(` [${t.completed ? "✅" : "⬜"}] ${t.text}`));Tip
Tip
This To-Do List pattern (CRUD with immutable array operations) is exactly how React state management works. Master filter for delete, map for update, and spread for add — you'll use these patterns daily in professional development.
Both string-only, sync, and NOT secure.
Common Mistake
Warning
Mutating array items directly (todo.completed = true) instead of creating new objects. In React, direct mutation doesn't trigger re-renders. Always create new objects: { ...todo, completed: true } to ensure state updates are detected.
Practice Task
Note
Extend the To-Do List: (1) Add a priority field (high/medium/low) to each task. (2) Add a sortByPriority function. (3) Add an editTodo function that updates the text of a task by ID. (4) Add a clearCompleted function that removes all done tasks.
Quick Quiz
Key Takeaways
- Build a functional To-Do List using array methods — add, remove, toggle complete, and filter tasks.
- Add tasks — push new task objects to the array
- Remove tasks — filter out by ID or splice by index
- Toggle complete — map to update the completed property