Chapter 12

Putting It Together

You now know variables, types, operators, strings, decisions, loops, functions, arrays, and objects. That's genuinely enough to write real programs. Let's prove it by building a small to-do list from scratch, piece by piece, using ideas from every chapter.

Type each piece into the Console as we go. By the end you'll have a working little program you built yourself.

1. Deciding the Shape of the Data

A to-do list is a list of tasks, and each task has some text and whether it's done. "A list of things" is an array; "a thing with named parts" is an object. So: an array of objects.

const tasks = [
  { text: "Learn variables", done: true },
  { text: "Learn loops", done: true },
  { text: "Build a project", done: false },
];

2. A Function to Add a Task

Adding a task means pushing a new object onto the array. A new task always starts out not done, so the function only needs the text:

function addTask(text) {
  tasks.push({ text: text, done: false });
}

addTask("Celebrate finishing the guide");
console.log(tasks.length); // 4

3. Marking a Task Done

To complete a task we find it by its position and flip its done property to true:

function completeTask(index) {
  tasks[index].done = true;
}

completeTask(2); // "Build a project" is now done

Note

Remember indexes start at 0, so 2 is the third task. If you pass an index that doesn't exist, you'll get a TypeError - a perfect chance to practise Chapter 11.

4. Printing the List Nicely

Now loop over the tasks and print each one, showing a checkmark for finished tasks. This uses a loop, an if, a template literal, and the loop counter for numbering:

function showTasks() {
  console.log("--- My To-Do List ---");
  for (let i = 0; i < tasks.length; i++) {
    const task = tasks[i];
    const mark = task.done ? "[x]" : "[ ]";
    console.log(`${i}. ${mark} ${task.text}`);
  }
}

showTasks();

That task.done ? "[x]" : "[ ]" is a compact if/else called the ternary operator: "if done, use [x], otherwise [ ]." It prints something like:

--- My To-Do List ---
0. [x] Learn variables
1. [x] Learn loops
2. [x] Build a project
3. [ ] Celebrate finishing the guide

5. Using Your Program

That's a complete little program. Drive it entirely from the Console:

addTask("Take a break");
completeTask(3);
showTasks();

Every single line uses something you learned in this guide. You didn't just read about programming - you wrote a program.

Keep Going: Challenges

The best way to cement this is to extend it yourself. Try these, from easier to harder:

Add a removeTask(index) function. (Hint: search for the array method splice.)
Write a countRemaining() function that returns how many tasks are not done.
Make showTasks print "All done!" when every task is complete.

Where to Go Next

You've built a real foundation. From here you could:

Make JavaScript change a real web page (learn about the "DOM" - buttons, inputs, and clicks).
Move beyond the browser and run JavaScript on your computer with Node.js.
Add types to catch mistakes before they happen - the Learning TypeScript guide picks up right where this one leaves off.

Tip

The only way to get good is to keep building small things. Pick something you find mildly useful, build the worst possible version, then improve it. Every professional started exactly where you are now.

Chapter 11: Errors & Debugging