JavaScript object

JavaScript Functions are Objects

moment of truth

In javascript functions are objects, throughout this page we will try to understand why and how javascript functions are objects.
One of the most important concept to grab before we proceed any further.

Let's start by looking at the function component

Cinque Terre
javascript function can have primitive type, other function and object attached with it and then it has two very known(seldom forgotten that they are optional) component, name and code.
Yes, in javascript function name is optional, it is pretty much possible to create anonymous function; and code too optional, one can have javascript function without any code in it.
So isn't it looks like javascript function itself a object which has association similar with javascript object we seen before, plus few additional optional component (e.g. code and name).

javascript function is object, let's look it through a code analysis

function display(){ console.log('I\'m display'); } display(); //javascript function invocation happen by opening and closing parenthesis '()'
/****** console output *********/
I'm display
Nothing new in it, you might be doing this 'n' number of time but wait how about the below code.
function display(){ console.log('I\'m display'); } display(); //javascript function invocation happen by open and close parenthesis '()' display.Monitor = 'Computer Display'; // similar like object using dot operator and setting property console.log(display.Monitor); // value in the console console.log(display); // look we are not calling the function, as there are no '()' after function name. we are printing the code in the function.
/****** console output *********/
index.html:8 I'm display
index.html:12 Computer Display
index.html:13 display(){
	console.log('I\'m display');
}
We attached a property with a function, the same way we do with javascript object.
Is it not same as what a object does in javascript? that's true; javascript functions are nothing but object.
This concept would help you a lot while designing our javascript framework later in the course. This type of characteristic where a function can be treated like object, can be used as argument, assign values etc. etc. called as first class function.
JavaScript functions are first class function.

Function statement and function expression

Ok, as we can see the usual way defining function with name, this also known as function statement.
There is another way one can define function javascript that is assigning a anonymous function to a function variable and its known as function expression.

So, what is expression

Expression is something which results into some value. This could be as simple as 4 + 5 which is 9 or a = 4 which would return 4 in console.
4 + 5
9
a = 5
5

what it has to do with javascript

In javascript we can define function using variable and later use that variable as identifier of the function. var c = function(){ console.log('hello mars'); } c();
index.html:8 hello mars
As you can see we are not naming the function but we are assigning the function to a variable. Later we are treating the variable as function and using parenthesis to invoke it c(). This type of function declaration has huge use in framework development.Here we need to notice few characteristic of function expression. The anonymous function returning a function object.
The function only accessible by the variable only after the declaration is made. play(); c(); var c = function(){ console.log('hello mars'); } function play(){ console.log('i play'); }
i play
index.html:7 Uncaught TypeError: c is not a function
We should be able to explain this as we know during execution context creation c was identified as variable and so put into the function memory space with undefined as assigned value. Now during execution it's trying to invoke a function call on an unassigned value, certainly that would end up throwing error.
This is not the case for the function play(), during execution context creation the function is hoisted as full code into the memory, so during execution it's getting the full code to invoke as a function.
The plus side of function expression, function is not evaluated till the execution is started.It would take less memory during execution context creation.

pass by value vs pass by reference

Now we will see how javascript handle very commonly known pass by value and pass by reference. Cinque Terre what happens during pass by value? as the name indicates the value gets copied. In javascript all primitive data types (number, string, boolean etc) when gets assigned by another primitive type variable the whole value gets copied to the assignee variable. var a = 4; var b; b = a; console.log(a); console.log(b); b = 9; console.log(b); console.log(a);
/*********** console output **********/
4
4
9
4
We can see b only gets a copy of value from a after that any change in b has no effect on a
The case is not same with Object data type. In case of object its pass by reference, same memory reference gets used; no copy of the actual value. var a = {name:'Tom'}; var b; b = a; console.log(a.name); console.log(b.name); b.name = 'Jack'; console.log(b.name); console(a.name);
Tom
Tom
Jack
Jack
See that ? the name attribute change made by the object b changed the object a as well.
In reality there are no copy of object but the same object getting referenced by two different identifier a and b. We can consider b as an alias of a.

javascript this variable

Let's see what is this in javascript.
In javascript this refers to a object, however which object it will refer depends on the run time.
We have seen each javascript function gets it's own execution context, however this variable inside that function may not refer to the object where it situates.
var cover = { title:'javascript', book:function(){ var pen = function(newtitle){ this.title = newtitle; console.log(this); }; pen('jquery'); console.log(this); } }; cover.book();
Window {external: Object, chrome: Object, document: document, cover: Object, title: "jquery"…}
Object {title: "javascript"}
As we can see this is referring two different objects in the first case it's referring to the object it belongs to but for the second case its going back to windows as this reference. Cinque Terre And this is strange indeed, however this is how javascript works.
So, now the question is how we can always makesure that referring object is the right one ?
What we will do is to captue the this into a vaeiable that (it could be any name) and then use that variable as reference to refer inside the object. var cover = { title:'javascript', book:function(){ var that = this; // note we are capturing this into a variable named that var pen = function(newtitle){ that.title = newtitle; // here we are using that; no more this console.log(that); }; pen('jquery'); console.log(that); } }; cover.book();
Object {title: "jquery"}
Object {title: "jquery"}
Back Next