Object basics

[nbwedev]

Look up and practice:

• object literals
• spread operator

[nbwedev]

Object literals are a concise way to create Javascript objects using curly braces {}.

An object literal is the simplest way to represent structured data in JavaScript. In my task manager app, I use object literals to define the task data model—what properties a task has and what types of values they store. Each task object represents state only, while all behavior (such as toggling completion or deleting a task) is handled by separate functions that operate on the task collection.

Data model

const task = {
  id: number,
  title: string,
  content: string,
  isCompleted: boolean
};

Why this is correct

id → identity
title → required display value
content → optional detail (can be empty string)
isCompleted → pure state (true / false)

Objects describe facts. Functions change facts.

---

The spread operator (...) in vanilla Javascript simplifies tasks such as copying, merging and passing arguments to functions.

In React, the spread operator is extensively used to maintain immutability and handle props efficiently.

Managing State (Immutability): React state should not be mutated directly. The spread operator allows you to create a new state of object or array based on the old one, applying changes without side effects.

const [user, setUser] = useState({ name: 'Alex', age: 25 });

const updateAge = () => {
  setUser(prevUser => ({
    ...prevUser,
    age: prevUser.age + 1 // Updates the age property in the new object
  }));
};

Passing Props: It simplifies passing an object of props down to a child component, making the code cleaner and less verbose.

const props = { firstName: "Shem", lastName: "Star" };
return <Greeting {...props} />; // Spreads the props object into individual props

[nbwedev]

MENTAL MODEL

. I use object literals to easily create task objects that conform to the data model I’ve defined.
. Each object represents the state of a single task and is stored in a central array.
. When updating tasks, I use the spread operator to create new arrays or objects instead of mutating the original data.
. Avoiding mutation keeps state changes predictable and makes updates easier to reason about.
. While this pattern is emphasized in React, it is still a good practice to follow in vanilla JavaScript for clarity and reliability.

Creating a task (object literal)

const task = {
  id: 1,
  title: "Buy milk",
  content: "",
  isCompleted: false
};

**Adding a task immutably
const newTasks = [...tasks, task];

Updating a task immutably
const updatedTasks = tasks.map(t =>
  t.id === taskId ? { ...t, isCompleted: !t.isCompleted } : t
);

No mutation. Clear intent. Predictable behavior.