The JavaScript spread operator, written `...`, expands array elements or object properties into a new expression. It is useful when passing an array to a function, combining arrays, or building an object from existing properties. section 3.4.1 section 3.5.2
Expand an array
In `index.js`, place `...` before the array being expanded: ```js let names = ["Hat", "Boots"]; let prices = [100, 50.25]; let combined = [...names, ...prices]; ``` `combined` contains the names followed by the prices. The same syntax passes array elements as separate arguments: `sumPrices(...prices)`. section 3.4.1
Build an object from existing properties
In `index.js`, spread an object inside an object literal: ```js let hat = { name: "Hat", price: 100 }; let otherHat = { ...hat }; let discountedHat = { ...hat, price: 10, discounted: true }; ``` `otherHat` receives `hat`’s properties. In `discountedHat`, the later `price` wins, while `discounted` adds a property. Put an overriding value *after* the spread. section 3.5.2
Do not confuse spread with rest syntax. Both use `...`, but `{ price, ...someProperties } = hat` collects the properties *not* selected as `price` into `someProperties`; `{ ...hat }` expands properties into a new object. section 3.5.2
Listing 2.19 Providing access to items in the todoCollection.ts file in the src folder
import { TodoItem } from "./todoItem";
export class TodoCollection {
private nextId: number = 1;
private itemMap = new Map<number, TodoItem>();
constructor(public userName: string, todoItems: TodoItem[] = []) {
todoItems.forEach(item => this.itemMap.set(item.id, item));
}
addTodo(task: string): number {
while (this.getTodoById(this.nextId)) {
this.nextId++;
}
this.itemMap.set(this.nextId, new TodoItem(this.nextId, task));
return this.nextId;
}
getTodoById(id: number) : TodoItem {
return this.itemMap.get(id);
}
getTodoItems(includeComplete: boolean): TodoItem[] {
return [...this.itemMap.values()]
.filter(item => includeComplete || !item.complete);
}
markComplete(id: number, complete: boolean) {
const todoItem = this.getTodoById(id);
if (todoItem) {
todoItem.complete = complete;
}
}
}
In `src/todoCollection.ts`, `getTodoItems` expands the values of a `Map<number, TodoItem>` into an array, then filters that array according to `includeComplete`. The declared `TodoItem[]` return type and the map’s generic type let TypeScript check the items used by `filter`. section 2.2.6
