Filtering

Learn to filter tasks by status.

The filterByStatus function

filterByStatus filters tasks by their state. The filter method returns a new array containing only the items that match the condition; the original array is unchanged.

function filterByStatus(todos: Todo[], status: Status): Todo[] {
  return todos.filter(t => t.status === status);
}

Using the filter result

filter always returns a new array; the original todos is unchanged. So you need to assign the result to a new variable.

const active = todos.filter(t => t.status === "active");
// active: Todo[] (only the active ones)

This list contains only the tasks in the "active" state.

Exercise Write the filterByStatus function

Define Status and Todo. Write addTodo, completeTodo, and listTodos functions. Write a function filterByStatus(todos: Todo[], status: Status): Todo[]: use filter to return items where t.status === status. Add "Süt al" and "Ekmek al" tasks, complete one ("1"), filter for "active", and list them.

Show example solution

type Status = "active" | "completed";
interface Todo { id: string; title: string; status: Status; }

function addTodo(todos: Todo[], title: string): Todo[] {
  const todo: Todo = { id: String(todos.length + 1), title, status: "active" };
  todos.push(todo);
  return todos;
}

function completeTodo(todos: Todo[], id: string): void {
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.status = "completed";
  }
}

function filterByStatus(todos: Todo[], status: Status): Todo[] {
  return todos.filter(t => t.status === status);
}

function listTodos(todos: Todo[]): void {
  todos.forEach(t => console.log(t.id + ": " + t.title + " [" + t.status + "]"));
}

const todos: Todo[] = [];
addTodo(todos, "Süt al");
addTodo(todos, "Ekmek al");
completeTodo(todos, "1");
const active = filterByStatus(todos, "active");
listTodos(active);

Test yourself

What does the filter method return?
- number
- void
- A new Todo[]
- A single Todo
Show answer

A new Todo[] — filter returns a new array containing all items that match the condition. The original array is unchanged; the result is assigned to a new variable.

Complete the filter condition

return todos.filter(t => t.status === ____);

Show answer

return todos.filter(t => t.status === status);

Filtering parts

filter

Keep matching items
t.status === status

Status comparison
Todo[] (dönüş)

Filtered list
filterByStatus

Filter by status

Next lesson: Integration

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies