What we'll cover

• Creating objects and accessing their properties

• Modifying and deleting object properties

• Accessing properties of nested objects

• Understanding global objects like Window and Global

Objects

• Object is a built-in function in JavaScript ( we will revisit built-in functions later, for now just enough to say that these functions are built-in to the language).

• Almost everything in JavaScript is an Object.

• Variables can hold a value of type Object i.e. reference type values.

• Creating objects

    // object literal notation
    let myObject = {}; // invokes Object() function under the hood
    myObject = {
        name: value,
        name2: value,
        name3: value
        // etc...
    };
    // Creating an instance using new Object()
    let myObject2 = new Object({a: 10, b: true});
    console.log(myObject2);
    /*
    {
        a: 10,
        b: true 
    }
    */
  

• Accessing properties of objects

    const myObj = {
        city: "new York",
        popular: true,
        country: "USA"
    };
  

  1. Accessing properties through "." (dot) notation in myObj:

      myObj.city; // "new york"
      myObj.popular; // true
      myObj.country; // "USA"
     

  2. Using bracket notation to access properties in myObj:

      myObj["city"]; // "new york"
      myObj["popular"]; // true
      myObj["country"]; // "USA"
      /* OR */
      let city = "city";
      myObj[city]; // "new york"
      let popular = "popular";
      myObj[popular]; // true
      let country = "country";
      myObj[country]; // "USA"
     

• Modifying properties of objects

    const myObj = {
        city: "new York",
        popular: true,
        country: "USA"
    };
  

  1. Modifying properties using dot-notation

      myObj.city = "California";
      myObj.popular = false;
      console.log(myObj);
      /*
        {
          city: "California",
          popular: false,
          country: "USA"
      } */
     

  2. Using bracket notation to modify properties

      let capitalism = "capitalism";
      myObj[capitalism] = true;
      console.log(myObj);
      /*
        {
          city: "California",
          popular: true,
          country: "USA",
          capitalism: true
      } */
     

• Deleting properties of objects

    let a = {
        name: "John",
        age: 20,
        dominantHand: "Left"
    };
  

  1. To delete a specific property from object we can use the delete operator

      delete a.dominantHand;
      console.log(a);
      /*
        {
          name: "John",
          age: 20
      } */
      // dominantHand property is delete from object `a`
     

     delete operator is a prefix operator. (we will discuss operators in a later part, for now just know prefix means we use it before the operand a, in this case).

• Accessing nested objects (objects within objects, hence we call it nested)

    const myCity = {
        city: "new york",
        country: "USA",
        info: {
            popular: true,
            capitalism: true
        }
    };
  

  1. Here we can access nested object info of parent object myCity using dot-notation

      // using dot-notation
      myCity.info.popular; // true
      myCity.info.capitalism; // true
     

  2. And we can also access the nested object using bracket-notation

     
      // using bracket-notation
      myCity.info["popular"]; // true
      myCity.info["capitalism"]; // true
      myCity["info"]["popular"]; // true
      myCity["info"]["capitalism"]; // true
     

Global Objects window and global

• In JavaScript, the terms "global object" and "global" refer to certain aspects of the language's scope and variable accessibility. We will explore this later, but for now, we just want to see the global objects window in web-browsers and global, process, console, require and module in nodejs which is another kind of runtime for javascript apart from browsers.

• The global object, also known as the "window" object in web browsers, represents the highest-level scope in JavaScript. It serves as a container for global variables, functions, and other objects accessible throughout the codebase. In web browsers, the global object is named "window" and provides additional functionality specific to the browser environment, such as manipulating the document and handling events.

• In Node.js, the global object represents the highest-level scope in the Node.js runtime environment. It is similar to the "window" object in web browsers but with some differences specific to Node.js.

  1. global: It serves as the container for global variables and functions in Node.js. Any variable or function defined without a specific scope becomes a property of the global object.

  2. process: It provides information and controls over the current Node.js process, such as environment variables, command-line arguments, and methods to exit or terminate the process.

  3. console: It allows for writing messages to the console for debugging or informational purposes.

  4. require: It is used to import modules and files into the current Node.js script.

  5. module: It represents the current module being executed and provides access to its exports and other module-related information.

• To see them in action, open up the developer console and go to the console tab in your browser and type window

  

• And in nodejs we will get a similar output for the global object global, module, require etc, here we can see the global and require global objects.

  

• In summary, let's see the global objects of browser and nodejs in a tabular form to make things easy.

  1. Browser

     

  2. Nodejs

     

• Different runtimes for our javascript code, i.e. where it is running or executing might give us different global objects and properties we can access.

Methods

• Property of an object that holds function as a value is called a method.

• The method can be invoked using () , it may be invoked with or without arguments.

    const myObj = {
        a: 10,
        b: true,
        c: function() {
            console.log("Im a method!");
        }
    };
    // invoking the method of myObj
    myobj.c(); // "I'm a method!"
  

  *We will look into functions next and go in-depth into the details and workings of functions in JavaScript. A method is a function which is a property of an object.

This concludes our exercises on Objects and now we are ready to move to the next part, Javascript Jumpstart - Functions