Listing tasks

Learn to print tasks formatted with listTasks.

Listing tasks

After adding tasks you need to print them. For this you will write a listTasks(tasks) function. It walks the array and prints each task as a formatted line.

To walk the list, forEach is a good fit: tasks.forEach((t, i) => console.log(...)). Here t is the task object and i is its position. For each task you print a line like (i + 1) + '. ' + t.title.

Example: with two tasks the output is 1. Ekmek al and 2. Süt al. We use i + 1 because array indices start at 0 but humans prefer counting from 1.

Formatted output

When printing a list, presenting tasks in a readable format matters. Each line has a number, a dot, and the task title: (i + 1) + '. ' + t.title.

In JavaScript string concatenation uses the + operator. Adding a number and a string gives a string: 1 + '. ' produces '1. '. Appending t.title gives the full line.

With two tasks the output is two lines. Each line is printed with a separate console.log call, so each task appears on its own line.

Exercise List two tasks

Define a listTasks(tasks) function. Its body should call tasks.forEach((t, i) => console.log((i + 1) + '. ' + t.title)). The addTask function is provided in the starting code. Add two tasks and list them with listTasks(tasks).

Show example solution

function addTask(tasks, title) {
  tasks.push({ title, done: false });
}
function listTasks(tasks) {
  tasks.forEach((t, i) => console.log((i + 1) + '. ' + t.title));
}
const tasks = [];
addTask(tasks, 'Ekmek al');
addTask(tasks, 'Süt al');
listTasks(tasks);

Test yourself

How does the list output start?
- 1. Ekmek al
- 0. Ekmek al
- Ekmek al
- [0] Ekmek al
Show answer

1. Ekmek al — with i + 1 the first task at index 0 prints as number 1.
Match the listing parts

forEach

Method to walk the array
(t, i)

Callback parameters
i + 1

Position number
t.title

Task title

Formatted line

tasks.forEach((t, i) => console.log((i + 1) + '. ' + ____));

Show answer

tasks.forEach((t, i) => console.log((i + 1) + '. ' + t.title));

Next lesson: Completing tasks

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies