JavaScript - lesson 3 | HackIndia Skills

Key point

The core shape

Most JavaScript project data is not just an array or just an object. It is usually an array of objects.

An object describes one thing. An array holds many things. If you get this shape right, your code becomes easier to read, test, and later replace with API data.

Example

Project data example

Think of a hackathon project that tracks college events. One event is an object. The full event list is an array.

This same shape could later come from fetch. For now, keep it as sample data in your code.

const events = [
  {
    id: 1,
    title: "AI Workshop",
    college: "SRM Chennai",
    fee: 0,
    tags: ["ai", "beginner"],
    registered: true
  },
  {
    id: 2,
    title: "UPI App Build Sprint",
    college: "Pune Institute",
    fee: 199,
    tags: ["fintech", "javascript"],
    registered: false
  }
];

console.log(events[0].title);        // AI Workshop
console.log(events[1].tags[0]);      // fintech

Read the shape first

Before writing logic, ask: what is one item, and what is the list? Draw it in comments if needed.

Use names that show the shape. event is one object. events is an array. This small habit prevents many bugs.

Your to-do

Common operations

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Read one field with dot syntax, like event.title.
Add a new object with push when you want to change the same array.
Create a new array with spread when you want safer updates.
Find one object by id before updating it.
Keep ids stable so you do not depend on array position.

0 of 5 done

Example

Add and update

In real projects, users add or change data. Practise that with sample objects before you connect an API.

Notice that the update uses id, not index. Index can change when the list is sorted or filtered.

const events = [
  { id: 1, title: "AI Workshop", fee: 0, registered: true },
  { id: 2, title: "UPI App Build Sprint", fee: 199, registered: false }
];

const newEvent = {
  id: 3,
  title: "Resume Review Camp",
  fee: 49,
  registered: false
};

const updatedEvents = [...events, newEvent];

const eventIdToRegister = 2;

const afterRegistration = updatedEvents.map((event) => {
  if (event.id === eventIdToRegister) {
    return { ...event, registered: true };
  }

  return event;
});

console.log(afterRegistration);

Common mistake

Do not mix shapes

A common beginner mistake is changing the data shape halfway. For example, fee is a number in one object and "free" as text in another.

Pick one shape and stay with it. Use fee: 0 for free events. Use registered: true or false, not "yes" and "no".

Tip

Use AI carefully

You can ask ChatGPT or Gemini to create sample data for your project. Ask for an array of objects with exact fields.

Then check every object yourself. Make sure field names match, ids are unique, and values use the same types.

Prompt:
Create 8 sample events for a JavaScript college hackathon app.
Return only a JavaScript array of objects.
Each object must have: id number, title string, college string, fee number, tags array of strings, registered boolean.