Filtering
- TypeScript course
- Beginner
- Lesson 79/89
- 5 min
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.
Practice 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.
Starter code
// Status ve Todo tanımla
// addTodo ve completeTodo fonksiyonlarını yaz
// filterByStatus(todos: Todo[], status: Status): Todo[] yaz
// iki görev ekle, birini tamamla, "active" olanları filtrele ve listeleSample 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);Expected output
2: Ekmek al [active]
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the filter method return?
- number
- void
- A new Todo[] Correct answer
- A single Todo
Explanation: 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.
2 Complete the filter condition
return todos.filter(t => t.status === ____);return todos.filter(t => t.status === status);Explanation: filter compares each item's status with the parameter: t.status === status. title is not in Status, id is the wrong field, and todo is an object.
3 Filtering parts
| Term | Meaning |
|---|---|
filter |
Keep matching items |
t.status === status |
Status comparison |
Todo[] (dönüş) |
Filtered list |
filterByStatus |
Filter by status |