10. JavaScript: Objects and objects literals

Declare different types of variables and functions in one code block, assign a name to this code block and it will become an object. in javaScript you can create your object with well-known keyword called var. 

Creat an object called person, add few variables and one function.

var person = {

   // variable
   name: "Khan",  
   health: "OK",

   // a function
   PartyTime: function() {
      document.write("Let have a party....");
   }
}

All variables and functions which you define in your object are properties of object and these properties are called object literals.

Object Literals

Object literals are actually a key value pair. for example in person object, health is key and OK is the value of key. In the same way PartyTime is a key and the unnamed function is value of this key.

Notice that when you are declaring any variable in your object, before declaring next variable or function add ‘,’ in between. As you can see name,health,PartyTime.  As long as it is not the last variable or function.

How to access object literals

You can access object literals with dot operator.
person.name,  person.health, person.PartyTime()

if(person.health === 'OK'){
   person.PartyTime()
}

javaScript is very flexible with objects. You can add more properties or literals in already created object.

person.age = 30;
document.write("person name is " + person.name +" person age is " + person.age + " and person's health is " + person.health);

You can see the output of age. It shows that age becomes the property of object person.

Set of object literals as a property.

You can create a special type of literal which can contain a list of more literals. How? check this example, Create a new object called “country” and add few properties in it, for example name, code etc and assign value to each property.

var country = {

// property of this country
    name : "Sweden",
    continent : "Europe", 
    code : 46
 
}

In country object, create another property called “info” and assign list of literals.

info : { literal1, liter2 ….}

var country = {

// property of this country
    name : "Sweden",
    continent : "Europe", 
    code : 46, // dont forget to put "," after every property if it is not last one 

    // object literal "info" which is property of country
    info : {

        environment: "Green",
        topUniversities: 10,

        printinfo: function() {
                document.write("Nice place to live");
        } 
    }
}

“info” is a code block which has a list of object literals in it but this “info” it-self is a one property of country object.

You can access the info object literals in same way as you access normal literal.

// print country object 
document.write("Continent " + country.continent);
document.write("<br/>");

document.write("Country Name " + country.name);
document.write("<br/>");

document.write("Country Code " + country.code);
document.write("<br/>");

// print info which is member of country object
document.write("Environment " + country.info.environment);
document.write("<br/>");

document.write("Number of top Universities " + country.info.topUniversities);
document.write("<br/>");

country.info.printinfo();
document.write("<br/>");

 

 

Download file from GitHub