JavaScript Objects

JavaScript is an object-based language and in JavaScript almost everything is an object or acts like an object. So, to work with JavaScript effectively and efficiently we need to understand how objects work as well as how to create your own objects and use them.

An object can be created with curly brackets {} with an optional list of properties. A property is a "key: value" pair, where the key (or property name) is always a string, and value (or property value) can be any data type, like strings, numbers, Booleans or complex data type like arrays, functions, and other objects. Additionally, properties with functions as their values are often called methods to distinguish them from other properties.

Example of Code

<script>
    var person = {
        name: "Peter",
        age: 28,
        gender: "Male",
        displayName: function() {
            alert(this.name);
        }
    };
    document.write(person.name + "<br>"); // Prints: Peter
    document.write(person.age + "<br>"); // Prints: 28
    document.write(person.gender); // Prints: Male
    console.log(person); 
</script>

Output

Accessing Object's Properties

To access or get the value of a property, you can use the dot (.), or square bracket ([]) notation.

Example of Code

<script>
    var book = {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000
    };
    // Dot notation
    document.write(book.name + "<br>");  // Prints: Harry Potter and the Goblet of Fire
    document.write(book.author + "<br>");  // Prints: J. K. Rowling
    document.write(book.year);  // Prints: 2000
    document.write("<hr>");
    // Bracket notation
    document.write(book["name"] + "<br>");  // Prints: Harry Potter and the Goblet of Fire
    document.write(book["author"] + "<br>");  // Prints: J. K. Rowling
    document.write(book["year"]);  // Prints: 2000
</script>

Output

Looping Through Object's Properties

You can iterate through the key-value pairs of an object using the for...in loop. This loop is specially optimized for iterating over object's properties. 

Example of Code

<script>
    var person = {
        name: "Peter",
        age: 28,
        gender: "Male"
    };
    // Iterating over object properties
    for(var i in person)  {  
        document.write(person[i] + "<br>"); // Prints: name, age and gender
    }
</script>

Output

Setting Object's Properties

Similarly, you can set the new properties or update the existing one using the dot (.) or bracket ([]) notation, as demonstrated in the following example:   

Example of Code 

<script>
    var person = {
        name: "Peter",
        age: 28,
        gender: "Male"
    };
    // Setting a new property
    person.country = "United States";
    document.write(person.country + "<br>");
    person["email"] = "peterparker@mail.com";
    document.write(person.email + "<br>"); 
    // Updating existing property
    person.age = 30;
    document.write(person.age + "<br>");     
    person["name"] = "Peter Parker";
    document.write(person.name); 
</script>

Output

Deleting Object's Properties

The delete operator can be used to completely remove properties from an object. Deleting is the only way to actually remove a property from an object. Setting the property to undefined or null only changes the value of the property. It does not remove property from the object.

Example of Code

<script>
    var person = {
        name: "Peter",
        age: 28,
        gender: "Male",
        displayName: function() {
            alert(this.name);
        }
    };
    // Deleting property
    delete person.age;
    document.write(person.age); // Prints: undefined
</script>

Output

Calling Object's Methods

You can access an object's method the same way as you would access properties—using the dot notation or using the square bracket notation.

Example of Code

<script>
    var person = {
        name: "Peter",
        age: 28,
        gender: "Male",
        displayName: function() {
            document.write(this.name);
        }
    };  
    person.displayName(); // Prints: Peter
    document.write("<br>");
    person["displayName"](); // Prints: Peter
</script>

Output

Manipulating by Value vs. Reference

JavaScript objects are reference types that mean when you make copies of them, you're really just copying the references to that object. Whereas primitive values like strings and numbers are assigned or copied as a whole value. 

Example of Code

<script>
    var message = "Hello World!";
    var greet = message; // Assign message variable to a new variable
    greet = "Hi, there!";
    document.write(message + "<br>");  // Prints: Hello World!
    document.write(greet);  // Prints: Hi, there!
</script>

Output