We use cookies to enhance your experience on the site
CodeWorlds

Objects and Arrays in JavaScript

In Jurassic Park we store enormous amounts of data about dinosaurs — their names, species, age, health status, and much more. To manage this data efficiently, we need two fundamental JavaScript data structures: objects and arrays.

Objects — Dinosaur DNA Cards

An object in JavaScript is a collection of key-value pairs that lets you store related data in one place. Think of an object as a dinosaur information card — it contains all the relevant data in an organized way.

Creating Objects

The simplest way to create an object is with curly braces

{}
:

1// Velociraptor information card
2const raptor = {
3  name: "Blue",
4  species: "Velociraptor",
5  age: 4,
6  isAlpha: true,
7  dangerLevel: 8
8};
9
10console.log(raptor); // Displays the entire object

Accessing Object Properties

There are two ways to access an object's properties:

1// 1. Dot notation — most commonly used
2console.log(raptor.name);      // "Blue"
3console.log(raptor.age);       // 4
4
5// 2. Bracket notation — useful for dynamic keys
6console.log(raptor["species"]); // "Velociraptor"
7
8const property = "dangerLevel";
9console.log(raptor[property]);  // 8 — useful when the key is in a variable

Modifying and Adding Properties

1// Modifying an existing property
2raptor.age = 5;
3
4// Adding a new property
5raptor.habitat = "Enclosure A3";
6
7// Deleting a property
8delete raptor.habitat;

Object Methods

An object can contain functions as values — we call these methods:

1const raptor = {
2  name: "Blue",
3  age: 4,
4  isAlpha: true,
5  skills: ["hunt", "communicate", "lead"],
6
7  // Method — a function inside an object
8  attack() {
9    return this.name + " attacks!";
10  },
11
12  // Another method using this
13  introduce() {
14    return "I am " + this.name + ", I am " + this.age + " years old.";
15  }
16};
17
18console.log(raptor.attack());     // "Blue attacks!"
19console.log(raptor.introduce());  // "I am Blue, I am 4 years old."

Static Object Methods

JavaScript provides several useful methods for working with objects:

1const dino = { name: "Rex", species: "T-Rex", age: 12 };
2
3// Object.keys() — array of keys
4console.log(Object.keys(dino));   // ["name", "species", "age"]
5
6// Object.values() — array of values
7console.log(Object.values(dino)); // ["Rex", "T-Rex", 12]
8
9// Object.entries() — array of [key, value] pairs
10console.log(Object.entries(dino));
11// [["name", "Rex"], ["species", "T-Rex"], ["age", 12]]

Arrays — Dinosaur Lists

An array is an ordered list of elements, ideal for storing collections of data of the same type.

Creating Arrays

1// Array of Velociraptor names
2const raptors = ["Blue", "Charlie", "Delta", "Echo"];
3
4// Array of objects
5const dinosaurs = [
6  { name: "Blue", species: "Velociraptor", age: 4 },
7  { name: "Rex", species: "T-Rex", age: 12 },
8  { name: "Bronto", species: "Brachiosaurus", age: 8 }
9];
10
11console.log(raptors[0]);        // "Blue" — first element (index 0)
12console.log(raptors.length);    // 4 — number of elements
13console.log(dinosaurs[1].name); // "Rex" — accessing an object in the array

Complex Data Structures

Objects and arrays can be nested to create complex data structures:

1const park = {
2  name: "Jurassic Park",
3  sectors: [
4    {
5      id: "A",
6      name: "Predator Zone",
7      dinosaurs: ["T-Rex", "Velociraptor"]
8    },
9    {
10      id: "B",
11      name: "Herbivore Zone",
12      dinosaurs: ["Brachiosaurus", "Triceratops"]
13    }
14  ]
15};
16
17console.log(park.sectors[0].dinosaurs[1]); // "Velociraptor"
Go to CodeWorlds