Objects

---

Objects

Objects are an extremely powerful data type in JavaScript (and most programming languages). They're powerful due to their ability to not only contain a lot of different information, but because they can also do lots of different things with that information.

Syntax

When thinking of an object, it's important to remember that it stores information as keyed collections. We've seen this before in CSS with key-value pairs. Objects have a very similar syntax but do wildly different things.

As with other concepts we've covered in this course, it can help to have a model in mind when thinking of an object; since we're in a school, let's look around for things that are familiar.

1// We can define an object using curly brackets and setting it equal to a variable
2const course = {
3  id: 1,
4  title: `Intro to Web Development`,
5  teacher: `Dominguez`,
6  teacherImg: `https://avatars.githubusercontent.com/u/24390149?v=4`,
7  roster: [
8    `Bart Simpson`,
9    `Milhouse Van Houten`,
10    `Martin Prince`,
11    `Nelson Muntz`,
12    `Wendell Borton`,
13    `Lewis Clark`,
14  ],
15  meetingDays: [`M`, `T`, `W`, `Th`, `F`],
16  roomNumber: 742,
17};

Key-value Pair

Objects contain a series of keyed collections that we call properties. These properties are essentially the characteristics of the object. In the example above, the object course has six different properties set equal to numbers, strings, and arrays.

Accessing Properties

We access these properties' values by using something called dot-notation. Believe it or not, you've seen - and actually used this - before! Let's say we want to get the title of the course; all we need to do is

1course.title; // will return the value of the course variable's title: Intro to Web Development

Let's do something a bit different though; let's use these properties in a statement that's logged to the console.

1// We could hard-code some information like the following
2console.log(
3  `Dominguez teaches Intro to Web Development in room 742 to six students.`
4);
5
6// What if we had an array of 200 classes and wanted to only write the above statement once?
7console.log(
8  `${course.teacher} teaches ${course.title} in room ${course.roomNumber} to ${course.roster.length} students.`
9);

Because of the power of abstraction, we can write our log statement once and reuse it as many times as necessary! Even as new information comes in; courses are added or deleted; rosters change; we can still deliver the needed information.

Interacting with the DOM

This is handy because the DOM is an object that has tons of properties and methods attached to it. Every element on our page is considered a node of the DOM; we can traverse, or crawl over, this object and check out the different nodes and their properties. Pretty quickly, you can see how deep and nested a particular page is; if we know how to interact with it programmatically, we can do a lot of cool things with JavaScript down the line.

Getting Items

If we want to manipulate an element that's a part of a page, the first thing we have to do is 'isolate' it. The easiest way to do this is using a **method** or built-in function of an object, called the `querySelector`.

Go ahead an open the dev tools on this page. Use the following code (also in the video that accompanies this lesson) and interact with the DOM.

1// First, let's grab a particular paragraph -- one with the ID `#hacked`
2const hackedTxt = document.querySelector(`#hacked`);
3// Now, let's print the value of this div
4console.log(hackedTxt.innerText);

Manipulating Values

Once we have an object...we can do things with it! Let's change the value of this div to something a bit different...

1hackedTxt.innerText = `💩 was here`;

If you've done things correctly, that original paragraph of text should have changed to 💩 was here!

This is just one example, but illustrates what we have the power to do with JavaScript. Because we can access and manipulate items in the DOM, we have the power to access and manipulate any attribute associated with a particular node. This includes their HTML and CSS!

Injecting Content

As we'll see in only a couple of lessons, we'll often be writing HTML as a skeleton and 'injecting' content into it. Modern applications rely on data stored in other locations to be fetched, or retrieved, and rendered onto the page. We can simulate this with our example from the course variable earlier in this lesson.

1<html>
2  <body>
3    <div>
4      <h1 id="title"></h1>
5      <small id="room"></small>
6      <div id="teacherDeets">
7        <img src="" alt="" />
8        <h2 id="teacher"></h2>
9      </div>
10    </div>
11    <div>
12      <p>There are <span id="studentNumber"></span> students in this course.</p>
13      <div id="studentGallery"></div>
14    </div>
15  </body>
16  <script>
17    //   Here's our course object
18    const course = {
19      id: 1,
20      title: `Intro to Web Development`,
21      teacher: `Dominguez`,
22      teacherImg: `https://avatars.githubusercontent.com/u/24390149?v=4`,
23      roster: [
24        `Bart Simpson`,
25        `Milhouse Van Houten`,
26        `Martin Prince`,
27        `Nelson Muntz`,
28        `Wendell Borton`,
29        `Lewis Clark`,
30      ],
31      meetingDays: [`M`, `T`, `W`, `Th`, `F`],
32      roomNumber: 742,
33    };
34
35    //   We'll grab our elements first
36    const title = document.querySelector(`#title`);
37    const teacher = document.querySelector(`#teacher`);
38    const room = document.querySelector(`#room`);
39    const studentNumber = document.querySelector(`#studentNumber`);
40
41    // Then manipulate them
42    title.innerText = course.title;
43    teacher.innerText = course.teacher;
44    room.innerText = course.roomNumber;
45    studentNumber.innerText = course.roster.length;
46
47    // Some harder things...
48    const image = document.querySelector(`#teacherDeets > img`);
49    image.src = course.teacherImg;
50    image.alt = `${course.teacher}'s profile pic`;
51
52    // Even harder by creating new elements
53    // We'll begin by getting the gallery
54    const gallery = document.querySelector(`#studentGallery`);
55    // Let's map over each student in the roster
56    course.roster.map((student) => {
57      // We'll create the div
58      let div = document.createElement(`div`);
59      // Assign a class to it
60      div.className = `studentCard`;
61      // We'll add the student's name into the card
62      let name = document.createElement(`p`);
63      name.innerText = student;
64      // We'll add the name to the div
65      div.appendChild(name);
66      // And add the div to the gallery
67      gallery.appendChild(div);
68    });
69  </script>
70</html>

Coming Up

In our remaining two lessons for this module, we'll talk about how to only perform certain actions when conditions in our code are just right. We'll also take a look at how to retrieve information from outside sources and inject it into our pages for real.

---

Previous and Next Lessons: