CS133JS Beginning Programming: JavaScript

Intro to Objects

Table of Contents

Introduction

Q and A

• Registration is open for next term!
  Upcoming classes for the Software Development AAS degree program

• Lab 5 on Arrays— any questions?

  • Code review due Tuesday.

  • Production version due Thursday.

• Reading quiz due Thursday.

• Does anyone have any other questions about anything?

Review of Array Methods

These examples use the array declared and initialized below:

let continents = ["Asia", "Africa", "North America", "South America", "Antarctica", "Europe", "Australia"];

length

xxxxxxxxxx
console.log(continents.length);

indexOf()

xxxxxxxxxx
console.log(continents.indexOf("Antarctica"));

splice

xxxxxxxxxx
continents.splice(3, 0, "Atlantis"); // Insert Atlantis at index 3
continents.splice(3, 1);   // remove Atlantis
continents.splice(2, 2, "Americas"); // Remove N. and S. America, replace with Americas

concat

xxxxxxxxxx
let tooks = ["Merry", "Pippin"];
let bagginses = ["Bilbo", "Frodo"];
let hobbits = tooks.concat(bagginses);

Copy an array.

xxxxxxxxxx
let hobbitsCopy = [].concat(hobbits);

pop

xxxxxxxxxx
let continent = continents.pop(); // removes Austrailia

shift

xxxxxxxxxx
let continent = continents.shift(); // removes the first element, Asia

push

xxxxxxxxxx
let arrayLength = continents.push("Austrailia"); // adds Austrailia at index = length

unshift

xxxxxxxxxx
let arrayLength = continents.unshift("Asia"); // adds Asia at index 0

Overview of objects

Objects in JS are like objects in the real world. They have properties--for example a book has: title, author, publication date, genre, etc. They can also have methods--for example a book could have a countWords method that counts all the words in the book.

Objects can contain:

• Properties

• Methods

Creating Objects

There are two ways to create an object:

• Object constructor

  xxxxxxxxxx
  const fili = new Object();
  

  We'll cover object constructors in the next class.

• Object literal

  We'll focus on this approach today.

  This code will create an object literal without adding any properties or methods:

  xxxxxxxxxx
  const thorin = {};
  

  This is how you create an object with properties and methods:

  xxxxxxxxxx
  const fili = 
  {
      name: "Fili",
      race: "dwarf",
      brother: "Kili",
      greet: function() {
          return this.name + " at your service!";
      }
  };
  

Properties and Methods

Think of a properties as nouns, and methods as verbs.

Properties

Each property consists of a key : value pair. In the example above, name is a key and "Fili" is a value.

Methods

A method is essentially a function. It is also the value of an object property. It is a task that an object can perform. In the example above, greet is a key, and is the name of the method. The function is a value.

Accessing Properties and Methods

Encapsulation

The scope of properties and methods declared inside an object is limited to that object. The rule about local scope being delineated by the curly braces applies here. There is a special word for the scope of properties and methods inside an object. We say they are encapsulated in the object.

Accessing an Object Property

Here are two ways to access an object’s properties.

• Dot notation: .

  xxxxxxxxxx
  fili.race;
  

• Bracket notation: []

  xxxxxxxxxx
  fili["race"];
  

Bracket notation must be used if an object’s property name is a number.

xxxxxxxxxx
// Create a new object containing numeric properties
const elves = 
{ 
  home:"Rivendell",
    0:"Elrond",
    1:"Arwen",
    2:"Gildor"
};
// Access a numeric property
console.log(elves[1]);

What do objects with numeric properties look like?

The this keyword

Inside a method, the this keyword references the object that contains the method so you can access an object property.

xxxxxxxxxx
const fili = 
{
    name: "Fili",
    greet: function() { 
        return this.name + " at your service!";
    },
};

Calling a Method on an Object

You call a method just as you would call a regular function, but you do it through the object.

xxxxxxxxxx
fili.greet();

Adding and Removing Properties and Methods

Adding Properties to an Object

Add new properties to an object with the assignment operator, =

xxxxxxxxxx
fili.age = 82;
fili.weapon = "hammer";

Adding Methods to an Object

Adding a method to an object is similar to adding a property, but in place of the property value you provide a function definition.

xxxxxxxxxx
fili.fight = function() 
{
    return "Fili attacks with a " + this.weapon;
}

Removing Properties from an Object

utilize the delete keyword. Evaluates to true if successfull.

xxxxxxxxxx
delete fili.weapon;
delete elves[1];

Using Loops with Object Properties

for...in Loop—Just for Objects

The JavaScript language has a special, predefined loop, for...in, that is specifically designed for iterating over the properties of an object. This loop only iterates over property keys (aka names). Note that you need to use bracket notation.

xxxxxxxxxx
for (let item in fili) 
{
  console.log(fili[item]);
}

All the Other Loops

Get an Array with Object.keys() or Object.values()

JavaScript objects have a pre-defined method for getting an array of property keys, the Object.keys() method. This makes it easy to use all the other loops with object properties.

xxxxxxxxxx
let filiKeyArray = Object.keys(fili);

You can also get an array of all the values in an object like this:

xxxxxxxxxx
let filiValueArray = Object.values(fili);

####for...of Loop—Just for Arrays

The for...of loop is specifically designed to operate on arrays.

xxxxxxxxxx
let filiArray = Object.keys(fili);
for (const key of filiArray)
{
   console.log(key, fili[key]);
}

for Loop

The for loop has a built-in loop counter that works great for indexing an array.

xxxxxxxxxx
let filiArray = Object.keys(fili);
for (let i = 0; i < filiArray.length; i++)
{
  let key = filiArray[i];
   console.log(key, fili[key]);
}

while and do...while Loops

We can use these loops on arrays of object properties too, but they aren't as convenient to use as the three types of for loops.

xxxxxxxxxx
let filiArray = Object.keys(fili);
let i = 0;
while (i < filiArray.length)
{
  let key = filiArray[i];
  console.log(key, fili[key]);
  i++;
}

Mutability of Objects

Objects declared with const are mutable, that means they can have their properties changed or removed and can have new properties added. But the binding is immutable, the object variable can't be assigned to a new object.

xxxxxxxxxx
const bomber = {name:"Bomber"};
const boffer = {name:"Boffer"};
bomber = boffer; // this will cause an error
let balin = {name:"Balin"};
balin = boffer;  // this works!

References

JavaScript Object Basics - MDN Guide

Understanding Objects in JavaScript - Tania Rascia, 2021, Digital Ocean

"Data Structures: Objects and Arrays", Ch. 4 in Eloquent JavaScript, 4th Ed., Marijn Haverbeke, 2024, No Starch Press.

Beginning JavaScript Lecture Notes by Brian Bird written in 2020 and revised in 2024 are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.