JavaScript Objects

  1. Overview
    1. An object is an unordered collection of properties
    2. A property is a name-value pair, where the name is a string and the value is any data type
    3. An object literal is a comma-separated list of property name and value pairs
      let book = {
         title: "Outliers",
         published: 2011,
         keywords: ["success", "high-achievers"]
      };
      
    4. Objects can be nested in other objects
      let book = {
         title: "Outliers",
         published: 2011,
         keywords: ["success", "high-achievers"],
         author: {
            firstName: "Malcolm",
            lastName: "Gladwell"   
         }
      };
      
    5. New properties can be added to an existing object
      book.isbn = "12345";
      book.author.dob = "1963-11-03";
      
  2. Methods
    1. Assigning an object property with an anonymous function creates a method
      let book = {
         title: "Quiet",
         author: {
            firstName: "Susan",
            lastName: "Cain"
         },
      
         // Define a method
         getAuthorName: function() {
            return this.author.firstName + " " + this.author.lastName;
         }
      };
      
      // Call method that returns "Susan Cain"
      let name = book.getAuthorName();
      
    2. this is an object reference that provides access to the object's properties
    3. Defining a method for an existing object
      book.showInfo = function() {
      	console.log(this.title + " by " + this.author.firstName + " " + this.author.lastName);
      }
      
      // Outputs "Quiet by Susan Cain"
      book.showInfo();
      
  3. Accessor properties
    1. Getter is a function declared with get keyword that is called when an object's property is retrieved
    2. Setter is a function declared with set keyword that is called when an object's property is set to a value
    3. Example with getter and setter for property area
      let rectangle = {
         width: 5,
         height: 8,
         get area() {
            return this.width * this.height;  
         },
         set area(value) {
            // Set width and height to the square root of the value
            this.width = Math.sqrt(value);
            this.height = this.width;
         }
      };
      
      let area = rectangle.area;     // Calling getter returns 40
      rectangle.area = 100;          // Calling setter sets width and height to 10
      console.log(rectangle.width);  // 10
      
  4. References
    1. JavaScript data types can be divided into two categories:
      1. A primitive is data that is not an object and includes no methods. Primitive types include: boolean, number, string, null, and undefined
      2. A reference is a logical memory address. Only objects are reference types
    2. Assigning a variable with a primitive creates a copy of the primitive
      let x = 2;
      let y = x;  // y is a copy of x
      
    3. Assigning a variable with a reference creates a copy of the reference
      let a = { xyz: 123 };
      let b = a;  // b is a copy of a's reference (both refer to same object)
      
    4. Function parameter is assigned a copy of the argument, so a function can change an object's properties
      function changeName(person) {
         person.name = "Sue";
      }
      
      let bob = { name: "Bob" };
      changeName(bob);
      console.log(bob.name);   // Sue 
      
    5. Objects that are no longer referenced are automatically cleaned-up by the JavaScript engine's garbage collector
      let bob = { name: "Bob" };
      bob = null;    // Garbage collector will eventually deallocate { name: "Bob" }