Understanding JavaScript Functions and Objects

JavaScript for C# developers Dhananjay Kumar @debug_mode Microsoft MVP http://debugmode.net

Agenda Function as statement Function as expression Return statement Parameters in function The Arguments object Vargs JavaScript function Scopes in functions global, local, and lexical this keyword JavaScript objects Object as literal Object using new operator or constructor pattern Object using static method Object.Create()

I am Dhananjay Kumar 6 times Microsoft MVP Developer Evangelist at Infragistics DKumar@infragistics.com @debug_mode Blog : http://debugmode.net

Share your experience by tweeting and Facebook with hashtag #Infragistics

We will learn everything by writing codes

JavaScript functions Function expression Function statement A function expression creates an instance of the function object It can be passed as an argument to a function it can be returned from a function it can be assigned to a variable or an array Function created as an expression cannot be executed before it is defined It is must to give a name to function statement For function statement, JavaScript creates an object and assigns that to a variable Function created as statement are hoisted at the top, hence can be used before its defined

JavaScript functions : Return statement A JavaScript function may or may not have a return statement By default JavaScript function returns undefined JavaScript function can return a value or expression If there is no expression with return statement, JavaScript function returns undefined In case of JavaScript constructor function, by default function returns the invoking object instead of undefined

JavaScript functions : parameters When less parameters are passed, non passed parameter would be undefined When more parameters are passed, extra parameters can be read using arguments object JavaScript does not do type checking of the parameters in function JavaScript does not check the number of parameters being passed to function

JavaScript functions : arguments object Along with parameters , arguments object also get passed to a JavaScript function. The arguments is an array like object, however it is not a pure array. Number of passed parameters can be find using arguments.length When more parameters are passed, extra parameters can be read in the arguments object Value of arguments object can be read using the indexes. JavaScript array push and pop operation cant be performed on arguments object

JavaScript functions :Varargs function Varargs functions are those functions which work on any number of parameters Using the arguments object, all the passed parameters can be iterated and used

JavaScript functions : scopes Scoping stands for the current context of code execution A variable or expression can be executed in the context of the function or in the global context of JavaScript JavaScript does not have block scoping temp can only be accessed inside function foo temp is created using the function scope temp can t be accessed outside function foo

JavaScript functions : scopes global A variable which is not defined inside any function is in global scope. Variable in the global scope can be used anywhere in the program Variable inside a function works in local scope. Variable in the local scope are accessible only inside the function Scopes Functional/local lexical

JavaScript functions : lexical scope Lexical scope works with the nested functions. Lexical scoping means that anything (function, object, variable) defined in the parent scope can be accessed inside the child scope. However the opposite is not true. Let s say there is a function B which is inside function A . The inner function B has access to the scope of the outer function A is lexical scoping Function B is nested inside function A; The variable named myVar is created in the outer function A, so can be accessed inside the child function B; The variable localVar is created inside the inner function B, so cannot be accessed inside the outer function A;

JavaScript functions : this keyword this represents the calling context in the global scope this represents either a document or window object. In the function scope (or inside the function), the value of this is determined by how the function is being called In the strict mode, if we don t set the calling base then the value of this would be set to undefined in the browsers. Value of this is set to object calling the function

JavaScript objects Objects can be created in three possible ways. Objects as literal Object as literal Object using function constructor or new operator Creating an object using the new operator and constructors Objects Creating an object using the Object.create() static method Object using Object.Create() static method

Q& A ?

Summary Function as statement Function as expression Return statement Parameters in function The Arguments object Vargs JavaScript function Nested functions Scopes in functions this keyword Function as constructor Callback function The call() and the apply() methods

What Infragistics can offer you? We welcome all of you to take advantage of a FREE 30 Day Trial by downloading the product at: http://www.infragistics.com/products/ultimate/download Reach me at DKumar@infragistics.com Please reach out to us at Sales-India@infragistics.com for any follow up questions you may have. We welcome the opportunity to assist you.