Question:

What is an object?

Answer:

Unlike a variable whose value is primitive data, such as number or string, an object is a complex structure that may contain several variables of various primitive data called properties, as well as actions called methods.

Question:

What is a property?

Answer:

A property is data that describes a characteristic about the object.

Question:

What is a method?

Answer:

A method is a function defined inside the object, so unlike a static property, a method performs an action.

Question:

What is an example of an object?

Answer:

In the real world, a car would be an example of an object. It has properties, such as color, model, and how many doors. It has methods, such as go forward, speed up, stop, and turn right.

In the JavaScript world, an example would be a String. It has a property: length, and methods: such as toUpperCase().

Note: primitive JavaScript strings automatically get wrapped inside the JavaScript "String" object, allowing us to utilize strings as objects.

Question:

How do I create an object?

Answer:

In its simplest form, and object is simply a collection of primitive data contained between curly-braces, using the format: "name" : value. The object gets assigned to an identifier, for example:

    var student = {
        "fName": "Martin",
        "lName": "Miller",
        "tScore"  : 450
    };

Notice that sets of name/value pairs are separated by commas. The last name/value pair is not followed by a comma.

Question:

How do I use an object?

Answer:

Using the dot operator, you can assign values, as well as read values. For example:

    student.fName = "Marty";
    document.getElementById("firstName").innerHTML = student.fName;
    document.getElementById("tScore").innerHTML = student.tScore;

Instead of the dot operator, you may use square-bracket notation, for example:

    student["fName"] = "Marty";
    document.getElementById("firstName").innerHTML = student["fName"];
    document.getElementById("tScore").innerHTML = student["tScore"];

Question:

Can I have several copies of an object?

Answer:

The above example behaves like a global object. If you assign student to a variable named stu1, and also to a variable named stu2, changing tScore for stu1 will also change fName for stu2 as well. For example:

    var stu1 = student;
    var stu2 = student;
    stu1.tScore = 500;
    // both scores will be 500
    document.getElementById("tScore1").innerHTML = stu1.tScore;
    document.getElementById("tScore2").innerHTML = stu2.tScore;

Question:

Is there a way to have an object where I can have separate and distinct copies?

Answer:

Yes. Another way to declare an object is to assign an anonymous function, a function without a name, to a variable. The function must utilize the this keyword. For example:

    var JSStudent = function (fName, lName) {
        this.fName = fName;
        this.lName = lName;
        this.tScore;
    };

You then assign your object to a variable using the new keyword. That is called "instantiating" your object;

    var jsStu1 = new JSStudent("Mary", "Marvelous");
    var jsStu2 = new JSStudent();
    

Notice that supplying parameter values are not required when you instantiate your JSStudent object. You can supply those values later in your code, for example:

    jsStu2.fName = "Captain";
    jsStu2.lName = "Hook";
    

Best Practice: Many JavaScript programmers adhere to the following naming convention... variables and function names begin with a lowercase letter, while objects begin with an uppercase letter as a visual reminder to use the new keyword when instantiating a copy of the object.

Question:

As explained at the beginning of this lesson, JSStudent appears to have only properties, how can I assign a method to JSStudent?

Answer:

That is accomplished by assigning an anonymous function to a variable that uses the this keyword. For example:

    var JSStudent = function (fName, lName) {
        // properties
        this.fName = fName;
        this.lName = lName;
        this.tScore;
        // methods
        this.addScores = function (lab1, lab2, lab3) {
            this.tScore = lab1 + lab2 + lab3;
            return "tScore was updated for: " + this.fName + " " + this.lName;
        }
    };
    

The above example adds a method: addScores, to the JSStudent object.

Question:

How do I use the method of an object?

Answer:

Use the dot operator to invoke an object's method, for example:

    var message = jsStu2.addScores(100, 100, 99);
    

Notice, you use the dot operator on the instantiated object csStu2, not the object definition JSStudent.

Question:

Can I have an array of objects?

Answer:

Yes, for example:

    var students = [], enrollment = 30, n;
    for (n = 0; n < enrollment; n++) {
        students[n] = new JSStudent();
    }
    

When using an array of objects, be careful about the placement of the square brackets operator and the dot operator. For example:

    // correct
    students[0].fName = "Frank";

    // incorrect
    students.fName[0] = "Frank";
    

Checkpoint

You should know 10.1

1. How to define an object using name/value pairs
2. How to define an object using an anonymous function whose variables use the this keyword
3. How to instantiate an object
4. How to use the dot operator to access an object's properties and methods

Questions 10.1

1. If I have several copies of a simple object created with name/value pairs and change the value of a property in one of my copies, what will happen to that value within my other copies?
2. If I have several copies of an object built using the this keyword, that I instantiated using the new keyword, and change the value of a property in one copy, what will happen to the values of that property inside the other copies?

Exercise 10.1

1. Define an anonymous function to create an object that:
   • takes 1 parameter: name
   • besides name, the object has 2 additional properties: mID, and mPW
   • has a method, resetPW, that assigns the value of "xxx" to mPW, and returns: "Your new password is: xxx. Please change your password."
2. Assign your above object to a variable named: Member
3. Instantiate 2 Members: m1, and m2, passing the values "Mary" for m1, and "Ralph" for m2
4. Assign 24 to mID of m1, and 85 to mID of m2
5. Assign "secret" to mPW of m1, and "myAddress" to mPW of m2
6. Declare a variable named emailMessage
7. Run the resetPW method for Mary, and assign the return value to emailMessage.

web developer toolbox 10.1

Add a link to the JavaScript menu

• Open menu_js.html in your favorite editor
• (Create a new dt tag to) add a category: Objects
• (Create a new a tag inside a new dd tag to) add a link: Creating and using objects
• href should be: javascript/objects_create.html

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: objects_create.html
• Below the comment "edit category name", change text from template to Objects
• Below the comment "edit publish and update dates", change both dates to the current date

Update the new page

• Below the comment "edit company name, page title, and page description", change:
  • Company Name to: your name
  • Template to: Creating and using objects
  • ...template to: How to create and use objects
• Update the comments section:
  • <dt>Objects</dt>
  • <dd>Use the this keyword when declaring variables</dd>
  • <dd>Define an anonymous function to create a method</dd>
  • <dd>Use the new keyword when instantiating</dd>
  • <dd>Use the dot operator to access properties and methods</dd>
• Insert html inside the wxHtmlResults div:
  • <p id="p1"></p>
  • <p id="p2"></p>
  • <p id="p3"></p>
  • <p id="p4"></p>
  • <p id="p5"></p>

Add JavaScript below the line of asterisks following the text:
** BEGIN DEVELOPER JAVASCRIPT SECTION

• Complete the instructions for Exercise 10.1
• Below your code for Exercise 10.1:
  • assign the value of mID for Mary to the innerHTML of p1
  • assign the value of mPW for Mary to the innerHTML of p2
  • assign the value of emailMessage to the innerHTML of p3
  • assign the value of name for Ralph to the innerHTML of p4
  • assign the value of mPW for Ralph to the innerHTML of p5

Open menu_js.html in your browser and click on your new link

Click on the Run javascript button to test your code