Day 2: Collection Types

Lesson 3: Objects

Array and sets are about storing data in a list form. Not all grouping of data fit that model though. Let's think about a laptop, specifically the laptop I am writing this on:

16 inch MacBook Pro with an M1 processor, 32 GB of RAM, 1 TB of storage and a British keyboard.

You and I can look at that and know what it means. But if you want to work with data in a computer it doesn't make much sense to store it as a string:

1var laptopSpecs =
2  "16 inch MacBook Pro with an M1 process, 32 GB of RAM, 1 TB of storage and a British keyboard.";

Unless all you ever want to do is print it out.

You could store it as separate variables:

1let screenSize = 16;
2let name = "MacBook Pro";
3let processor = "M1";
4let ram = 32;
5let storage = 1;
6let keyboard = "British";

However then we are back to the issue, what if we want to work with mutliple laptops?

An array doesn't make much sense either:

1let laptopSpecs = [16, "MacBook Pro", "M1", 32, 1, "British"];

For starters we are mixing data types (works but not ideal), because there isn't anything to define what each element is relating to. We could code up the following:

1let laptopSpecs = [16, "MacBook Pro", "M1", 32, 1, "British"];
2let processor = laptopSpecs[2];

What if the order changes and we decide in the future we need to store the number of USB ports as the laptopSpecs[2] and now processor is stored in laptopSpecs[3]?

Welcome to one of the fundamental questions with programming, how to store you data. JavaScript has a data type that solves this specific question and it is the last major type to introduce you to, objects.

Let's just show you what this laptop would look like as an object and you'll see the magic.

<h1>Hello World<h1>

let laptopSpecs = {
  screenSize: 16,
  name: "MacBook Pro",
  processor: "M1",
  ram: 32,
  storage: 1,
  keyboard: "British"
};
console.log(laptopSpecs);

Click the little arrow/triangle to see the full expanded version of the object. You can see clearly each bit of data AND a label that tells us exactly what that data is.

Objects in JavaScript are key value stores. You have a key, like processor and a value, like "M1" assigned to it. The opening and closing { } indicate that this is an object and it's held in the variable laptopSpecs.

Notice as well we are storing numbers and strings in this object. This is totally fine and encouraged, unlike arrays in which it's possible but not advisable, with objects it's the whole point. It's mixed groups of data.

So, how do we access these values? Simple, with the . syntax.

<h1>Hello World<h1>

let laptopSpecs = {
  screenSize: 16,
  name: "MacBook Pro",
  processor: "M1",
  ram: 32,
  storage: 1,
  keyboard: "British"
};
console.log(laptopSpecs.screenSize);
console.log(laptopSpecs.name);

What about changing the value? It's the same 😊

<h1>Hello World<h1>

let laptopSpecs = {
  screenSize: 16,
  name: "MacBook Pro",
  processor: "M1",
  ram: 32,
  storage: 1,
  keyboard: "British"
};
console.log(laptopSpecs.screenSize);
laptopSpecs.screenSize = 14;
console.log(laptopSpecs);

You can store anything you like in an object, including arrays, and even other objects. Here's an example I want you to poke around with for a bit. Can you workout how to change the HDMI port to be DisplayPort instead? You will need to use a mix od . syntax and [] syntax. Also note that I've been able to make the storage and RAM values more useful by adding an object with units and capacity keys.

<h1>Hello World<h1>

let laptopSpecs = {
  screenSize: 16,
  name: "MacBook Pro",
  processor: "M1",
  ram: {
    capacity: 32,
    units: "GB"
  },
  storage: {
    capacity: 1,
    units: "TB"
  },
  keyboard: "British",
  features: ["Speakers", "Web cam", "Track Pad"],
  ports: ["MagSafe", "3 x USB-C", "Headphone socket", "HDMI"]
};
console.log(laptopSpecs.screenSize);
laptopSpecs.screenSize = 14;
console.log(laptopSpecs);

Exercise

The best thing about all of these collection types is that they can all be used with each other. In the playground below I want you to make an array with two laptops of different specs in:

<h1>Hello World<h1>

let laptopSpecsOne = {};
let laptopSpecsTwo = {};
let laptops = [];
console.log(laptops);

The only real rules to remember about objects are that each key must be a single word (you can use camel casing if needed, like I did with screenSize above), a property key can't start with a number and each key/value pair must end with a comma.