JavaScript function object

Object and Function

javascript object


A collection of property, method and other object or name/value pair.

Cinque Terre Object occupies memory space which is collection of name/value pair as shown in the diagram above. So a object will have reference of many other address reference of primitive(property) or non primitive data type(function, other object etc.)

In javascript function are object too Will discuss this later.

Let's discuss the code below.

Object creation using new operator

var car = new Object(); /* object created with new operator, memory space got allocated. The object is empty. new Object() is not the best way to create object in javascript, will discuss next.*/ car["make"] = 'Honda'; /* Object got a primitive data type value which is 'Honda' referred by computed member access operator '[]' and named as 'make'*/ console.log(myObj);//print the object to the console console.log(myObj["make"]); /* access the value which is referred by the 'make' property inside the 'car' object.*/ var myvar = "make"; /*in this case we are dynamically assigning the name of the value to a variable for subsequent use.*/ console.log(car[myvar]); /* look now we are using the variable reference of that name in the object to reach the value, 'Honda'. This has a distinguish use compare to dot operator(shown below), that is one can programmatically assign the name to refer in an object.*/ console.log(car.make); /*another way to reach to the value 'Honda' by using dot operator. This is commonly used practice. Notice car.myvar won't work.*/ console.log(window.car["myvar"]); /*car object resides in global object context which is window. So technically car is a child object of window.*/ console.log(window.car.make); /*same chaining way we now can reach to the value 'Honda'.*/
/********* console output ***********/
Object
          make: "Honda"
          __proto__: Object
index.html:10 Honda
index.html:12 Honda
index.html:13 Honda
index.html:14 Honda
index.html:15 Honda
Let's look another example code below. var person = new Object(); //new empty object person.Name = "Rich"; // assigning a property which named as 'Name' and value 'Rich' console.log(person.Name); // print the name in console. console.log(window.person.Name); // look it reside in the window's object space !!! person.Address = new Object(); /*how about creating a object which reside in our 'person' object space. check we used dot operator here, this could be done using '[]' operator as well.*/ person.Address.Place = "1 High Road"; // assign a name 'place' value '1 High Road' console.log(person.Address.Place); // print the value console.log(window.person.Address.Place); // look it can be reached using object chain via dot operator
 /********* console output ***********/
index.html:9 Rich
index.html:10 Rich
index.html:14 1 High Road
index.html:15 1 High Road

Object creation using preferred way


JavaScrit preferred way to create object using object literal syntax {} operator.
Let's discuss the code below. var myObj = {}; // that's it a empty object will be created var person = { firstName:"Rich", // look unlike json in javascript property name(firstName) doesn't go under quote lastName:"Ray", address:{ street:'1 Lake Road', place:'Cleveland' } }; /* object is defined in a single line of code (single line cause it's ending with a semicolon); javascript allows to use space and break it into multiple line for readability, however technically it's a single line of code. It has many benefit over 'new Object()' operator, primarily now we can create object on the fly anywhere with all the required object parameter and use as needed. */

use object on the fly


Let's discuss using a code below. var Rich = { // a known way to create a object firstName:"Rich", lastName:"Ray", address:{ street:'1 Lake Road', place:'Cleveland' } }; function showDetails(person){ // function input object as a variable console.log(person.firstName); } showDetails(Rich); // common way to pass object to a function showDetails({firstName:"Tom",lastName:"Parson"}); // passing a object to the function on the fly
 /********* console output ***********/
index.html:17 Rich
index.html:17 Tom

how javascript namespace works


This is the right time to see how namespace in javascript gets implemented and why we need this. Let's have a look in the below code. var goodBye = "Thank You"; var goodBye = "Danke"; console.log(goodBye); /* output is Danke. The reason is greet variable in 2 and line 3 both reside in same global object space that's window. So basically first 'greet' will get overriden by the second one. So what's the way !!! */ var english ={}; var german ={}; english.goodBye = "Thank You"; german.goodBye = "Danke"; console.log(english.goodBye); // Thank You console.log(german.goodBye); // Danke in javascript we create object which use as namespace and make sure it doesn't collide with other variable.
Let's look at the below scenario. var english ={}; english.greet = "Hi"; english.language.greet = "Hallo"; console.log(english.language.greet);
index.html:9 Uncaught TypeError: Cannot read property 'greet' of undefined(anonymous function) @ index.html:9
The error because we are using javascript object dot operator to refer to name/value pair of an object. Now remember dot operator follows left to right assocativity.

left to right associativity

In left to right associativity case javascript engine will try to determine the most left part of the dot operator, in this case it is english which it finds in memory; now it tries to find language inside english but there are no language inside english; so it assigns undefined; now engine tries to find greet insdie undefined which ends up throwing error in the console.

how to rectify this?

we need to create a object which is residing inside english object and there create the property greet .
Let's look below var english ={}; english.greet = "Hi" english.language = {}; english.language.greet = "Hallo" console.log(english.language.greet); // output Hallo Left to right associativity for dot operator finds english object then it tries to find language inside, which it finds and finally within language it finds greet.
A better way to write the abode code. var english = { greet:'Hi', language:{ greet:'Hallo' } }; console.log(english.language.greet);
/********* console output **************/
Hallo

json vs javascript

All json are javascript object but not all javascript are json So what is json ? json is a format which came from javascript object notation format. If we look at the javascript object we could see it's name/value pair; the same concept is used for json.
This makes json light weight. Rich
1st Lane Road
AL US
We can see xml format has redundancy by closing tag. Which makes the total size of the xml file big which takes more network bandwidth, storage space etc.
Let's look at the equivalent json. { "name":"Rich", "address":"1st Lane Road", "state":"AL", "country":"US" } As we can see no closing tag makes the overall size less than xml which will take less storage space, network bandwidth etc.
doesn't it look like javascript object ? you got it right, json model is inspired from javascript object model. However in javascript 'name' not mandatorily has to go under double quote but for json it has to.
So how a javascript object would look like for the same file. var person = { "name":"Rich", //in javascript 'name' could go under double quote, however it's not mandatory. "address":"1st Lane Road", "state":"AL", "country":"US" } are they interchangeable ? yes, they are; there are already built-in function to achieve this. var person = { name:"Rich", //in javascript 'name' could go under double quote, however it's not mandatory. address:"1st Lane Road", state:"AL", country:"US" } console.log(JSON.stringify(person))
/********* console output **************/
{"name":"Rich","address":"1st Lane Road","state":"AL","country":"US"}
convert json to javascript object var myjson = '{"name":"Rich","address":"1st Lane Road","state":"AL","country":"US"}' /*single quoute the whole json to make it a string and not interfering with double quote*/ console.log(JSON.parse(myjson))
/********* console output **************/
Object {name: "Rich", address: "1st Lane Road", state: "AL", country: "US"}
Back Next