JavaScript Simplified · One concept, one day, one project · Day 12 of 32

Objects

Representing a real-world thing with named details in one value. You build a student profile as an object and read and update its fields.

By the end of today you can

Create an object with named properties
Read and change a property with dot notation
Explain when to use an object and when to use an array
Build a student profile object

An array is a list of values in order. But a student is not a list; a student is a name, an age, a course, all belonging together. An object holds named details about one thing, which closes out the "reusable" layer.

1. What an Object Is

Definition

An object is a collection of named values, written in curly braces. Each entry is a key (the name) and a value, joined by a colon.

What this code doesOne object holds three named details. name, age and course are the keys; their values sit after the colons. The whole thing describes one student.

app.js

const student = {
  name: "Ada Obi",
  age: 22,
  course: "JavaScript Simplified"
};

console.log(student);

OUTPUT   TERMINAL

➜ webbo3 node app.js
{ name: 'Ada Obi', age: 22, course: 'JavaScript Simplified' }

2. Reading and Changing Properties

Definition

A property is one key-and-value pair in an object. You read a property with a dot and its key: student.name. You change it the same way.

What this code doesstudent.name reads a value. student.age = 23 changes one. student.country = ... adds a new property that was not there before. Dot notation is how you reach inside an object.

app.js

const student = { name: "Ada Obi", age: 22, course: "JavaScript" };

console.log(student.name);    // read a property
console.log(student.age);

student.age = 23;             // change a property
student.country = "Nigeria";  // add a new one
console.log(student);

OUTPUT   TERMINAL

➜ webbo3 node app.js
Ada Obi
22
{ name: 'Ada Obi', age: 23, course: 'JavaScript', country: 'Nigeria' }

3. Objects vs Arrays

Both hold several values. The difference is how you find a value.

Use an array when	Use an object when
The values are a list in order	The values are named details of one thing
You reach items by position (index)	You reach values by name (key)
Example: a shopping list	Example: one product, one student, one user

They work together

Real data is usually both: an array of objects. A class is a list (array) of students, where each student is an object. You will use that shape constantly from Week 6 on.

Today’s Mini Project

👤 Student Profile Object

Build a student as an object with several details, read them into a tidy profile, then update one and add another. This is the shape real applications store people in.

What this code doesOne object holds everything about one student, including a boolean and a value added later. Properties are read and changed by name.

app.js

const student = {
  name: "Bayo Ade",
  age: 24,
  course: "JavaScript Simplified",
  country: "Nigeria",
  isActive: true
};

console.log("Name: " + student.name);
console.log("Course: " + student.course);
console.log("Active: " + student.isActive);

// update and extend
student.age = 25;
student.level = "Beginner";
console.log("Updated age: " + student.age);
console.log("Level: " + student.level);

OUTPUT   TERMINAL

➜ webbo3 node app.js
Name: Bayo Ade
Course: JavaScript Simplified
Active: true
Updated age: 25
Level: Beginner

Challenge (15 minutes)

Add a property skills that is an array of three skills, then print the first skill with student.skills[0]. Expected: an object that contains a list, and you reaching into it.

Try This

Make an object for a product with name, price and inStock, then print a one-line summary using its properties.

Expected: a line like "Wireless Mouse costs N7500, in stock: true".

Picture This

You have finished Layer 2. JavaScript can now think (Week 1 to 2) and it can be organised into reusable pieces: functions, arrays and objects (Week 3). Next week these ideas finally reach out and touch the web page itself.

Checkpoint

What is a property in an object?

One key-and-value pair, like name: "Ada". The key is the name of the detail, the value is the detail itself. You read it with student.name.

When should you use an object instead of an array?

When the values are named details of one thing, reached by name, rather than a list of items reached by position. A student is an object; a shopping list is an array.

How do you add a new property to an existing object?

Assign to a new key with dot notation, like student.country = "Nigeria". If the key did not exist, it is created.

Tick Before You Move On

☐ I can create an object with named properties
☐ I can read and change a property with dot notation
☐ I can say when to use an object and when an array
☐ I built the Student Profile Object

Quick Recap

An object holds named details about one thing, in key: value pairs. You read and change properties with dot notation, like student.name. Arrays are lists reached by index; objects are named details reached by key. Real data is often an array of objects.

Next: Day 13, and the layer that makes everything feel real. You connect JavaScript to the web page with the DOM, and watch the page change from your code.

Objects

1. What an Object Is

Definition

2. Reading and Changing Properties

Definition

3. Objects vs Arrays

Today’s Mini Project

Checkpoint

Learn this with a real instructor