Learning web development: Frontend frameworks

"When it comes to changing an object (e.g. an array), we have two options: We can change the object. That is called a destructive operation. We can create a new, changed version of the object (the original is unchanged, the copy contains the changes). That is called a non-destructive operation. As an example, consider the following array method (which can do even more but we ignore that): array.splice(start, deleteCount) It is a destructive operation that deletes deleteCount elements, starting at index start: In contrast, .toSpliced() is the non-destructive version of .spliced(): It returns a new array and doesn't change the array it is invoked on:"

"Other non-destructive array methods include .map() and .filter() - which create new arrays and don't change the original. Spreading into arrays # Spreading (...) is syntax that enables us to insert iterable values (such as arrays) into array literals: We can use spreading to copy an array: Spreading into objects # We can also spread into object literals: We can use spreading to copy a plain object:"

Preact serves as a lightweight frontend framework to implement browser-side user interfaces, demonstrated with a todo list app frontend while the backend is handled separately. JavaScript non-destructive patterns are emphasized: create new arrays or objects instead of mutating originals. array.splice(...) performs destructive deletion, whereas .toSpliced() returns a new array without changing the original. Methods like .map() and .filter() also produce new arrays. Spread syntax (...) enables inserting iterables into array literals and copying arrays. Object spread copies plain objects into new literals. These patterns support predictable state management in UI development.

Read at 2ality