You're seeing this because you're a teacher 🤓

🎯 Your main goal for this lesson

Help students to see that everything around them is an object. Okay...that sounds like we're objectifying...everything. That's not the case! Simply that everything within site is something that's composed of properties and those properties have values. Once students can start seeing the world in this way, it's kind of like Neo's first time seeing the world as falling Matrix-sushi-recipes.

🧠 Things to keep in mind when teaching

Objects are so powerful but their scale and syntax can throw students off. The first activity in this lesson seems a bit silly, but having a solid conceptual understanding before jumping into a text editor will pay huge dividends.

🚀 Lesson Plan

Activity One: 10 minutes

Ask students to think of a car either they own, their parents own, or someone they know owns. What different characteristics can they list about that car? Hopefully they start to think of - without maybe knowing the terms - things like the make, model, year, color, etc. Build a definitive list of properties and then ask students to assign values based on the car they're thinking about.

The big point that should come out of this leading into the lesson is that objects have common characteristics and that every instance of that object has those properties with its own particular values.

Activity Two: 40 minutes

Lead students through the lesson and provide support as they begin the assignment.

Activity Three: 10 minutes

Take the formative assessment at the end of class. Work towards mastery.

Objects

By the end of this lesson, you'll be able to...

  • Identify an object based on its syntax.
  • Identify a property within an object.
  • Identify a value within an object.
  • Differentiate between when to use an object and when to use an array.

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.


Assignments:

Your teacher may elect to give you this assignment in conjunction with this lesson or at a different time. Pay attention to your teacher's instructions for how/when to complete this assignment!

Practice: Objects


Previous and Next Lessons:

Arrays and Array Methods

Accessing APIs