Day 7: Consolidation 1

Lesson 2: Collection Types

Arrays

Arrays are used to store a list of items.

1const weights = [12, 55, 98];
2const cities = ["London", "Paris", "Bangkok"];

You can mix types in an array but it's not advisable.

Arrays have useful functions and properties to tell you things about themselves or to do things, like tell you their length.

1console.log(cities.length);

You can access individual elements with their index.

1console.log(cities[0]); // prints Paris

Remember that arrays in JavaScript start from 0.

Sets

Sets are like arrays except each value in them must be unique. So [1,2,3,3,3,4] is a valid array but not a valid set.

You can't access the element of a set by the items index like an array, you first have to convert the set to an array.

One of the most useful things about a set is that it can be used to quickly deduplicate an array.

1let ages = [24, 12, 78, 37, 12];
2
3let agesSet = new Set([24, 12, 78, 37, 12]);
4
5let agesDedupe = Array.from(agesSet);
6
7console.log(agesDedupe);

Objects

Objects are vital in JavaScript. As you now know, at the core everything in JavaScript is an object, even strings, array and functions!

What matters most though is that you can use objects to store and structure your data.

They are key value stores, each thing you store in object is given a key that you can use to refer back to later.

1const myNewObject = { keyName: "value for that key" };

These keys are also called properties and you can nest them as deep as you like, you can even store other objects on the properties of an object.

1const myBigNewObject = {
2  keyName: "value for that key",
3  keyThatHoldsAnObject: {
4    name: "All The Code",
5    domain: "allthecode.co",
6  },
7};

You can store whatever data type you want as the value but the object properties must be valid variable names, so basically a string.

This is so that you can access all the properties of an object with simple . 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);

Something we didn't cover during the main course that I'll bring up here, is that we can access an object key dynamically.

Let's say we have an app that allows users to ask for a specific laptop property and have it printed to the screen. We don't know what they will ask for when we write the application, so we need to dynamically access it when they ask.

We can do that with [] and pass in the key as a variable. Let's take a look (this is one of those moments where we will hard code in a value /as if/ it were dynamic user input, it takes leap of imagination and I know it's annoying but bear with me 😀 )

<h1>Hello World<h1>

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

let userInput = 'screenSize';
console.log(laptopSpecs[userInput]);

userInput = 'name';
console.log(laptopSpecs[userInput]);

This works because you can also access an object property with myObject["nameOfKey"] and because "nameOfKey" is a string we can swap it out for an actual string variable. Give it a go in the playground above to see what I mean 😀

Maps

Maps are a more controlled version of objects.

You can't get and set value with that .keyName or ["keyName"] method that you can with objects, you have to go via the .get('keyName') and .set('keyName') methods. This is because map has some extra functionality over a simple object.

• Maps know their size
• They know the order that their values were inserted in
• They can be iterated over

Because of this you have to use a constructor to create one const aboutMe = new Map(); compared to an object that would be const aboutMe = {};.

Maps are not that commonly used in day to day JavaScript programming but it's worth knowing about them, as some libraries use them and you may come across a scenario where one would be useful.