JavaScript - 10

JavaScript - 10: Objects

Objects let you group related information together inside one value.

For example, instead of creating separate variables for a student's name, age, grade, and subjects, you can store all of that information inside one student object.

Your challenge: Create a student object with several properties, then read information from the object and print it with console.log().

What is an object?

An object stores related information as pairs of property names and values.

For example: name: "Riley"

Here, name is the property name and "Riley" is its value.

Objects use curly braces: { }

A simple object might look like: let student = { name: "Riley", age: 17 };

Objects can store different kinds of values

The properties inside an object do not all need to contain the same type of data.

For example, your student object can contain:

a string for name,
a number for age,
a string for grade,
and an array for subjects.

This makes objects useful for describing something that has several related pieces of information.

Access a property with dot notation

To read a property from an object, you can write the object name followed by a dot and the property name.

For example: student.name

If the student's name is stored as "Riley", then: console.log(student.name); prints: Riley

The same idea works for: student.age and student.grade.

Objects can contain arrays

The subjects property can contain an array: subjects: ["Math", "Science", "Art"]

You can access that array with: student.subjects

Because it is still an array, all of the array features from earlier lessons continue to work.

For example: student.subjects.length returns the number of subjects.

Access one subject:

You can combine object property access with an array index: student.subjects[0]

This means: "Go to the subjects property, then get the item at index 0."

That gives you the student's first subject.

Use object values inside a template literal

You can combine what you learned about template literals with objects.

For example: `${student.name} has grade ${student.grade}.`

JavaScript reads both properties and inserts their values into the sentence.

Change a property

Object values can be changed after the object is created.

For example: student.grade = "A+";

If you print student.grade again, you should see the new value.

Add a new property

You can also give an existing object a new property: student.club = "Robotics";

The object now contains information that was not part of the original object definition.

Print the whole object:

Try: console.log(student);

The Live Output will show the object's stored properties together. This can be useful when you want to inspect the current contents of an object while testing your code.

Experiment: Add a property called favoriteSubject.

Then print a message such as: Riley's favorite subject is Science.

Arrays vs. objects

Arrays are useful when you have an ordered collection of similar items.

Objects are useful when you want to describe something using named properties.

They can also work together, as you saw with the subjects array stored inside the student object.

Good JavaScript habit: Give object properties clear names that describe the information they store. An object becomes much easier to understand when properties such as name, grade, and subjects explain their purpose.

let student = {
  name: "Riley",
  age: 17,
  grade: "A",
  subjects: ["Math", "Science", "English", "Art"]
};

console.log(`${student.name} has grade ${student.grade}.`);
console.log("Number of subjects:", student.subjects.length);
console.log("First subject:", student.subjects[0]);