This document discusses object oriented programming concepts in JavaScript, including objects, custom objects, object as namespaces, object as named arguments, functions, function arguments, naming functions, variable scope, return values, and classes. It provides examples of defining objects, custom objects, passing objects to functions, defining functions, function arguments, variable scope, return values, and using functions as objects to emulate classes in JavaScript.

1. Object Oriented Programing
in
Akshay Mathur

2. Akshay Mathur
• Founding Team Member of
– ShopSocially (Enabling “social” for retailers)
– AirTight Neworks (Global leader of WIPS)
• 15+ years in IT industry
– Currently Principal Architect at ShopSocially
– Mostly worked with Startups
• From Conceptualization to Stabilization
• At different functions i.e. development, testing, release
• With multiple technologies
@akshaymathu 2

3. JS Objects

4. Objects
• Everything in JS is an object (instance)
“string”.length // 6
“str”.length.toFixed(2) // “3.00”
[„hell‟, „o!‟].join(„‟) // „hello!‟
• Custom objects can also be defined
@akshaymathu 4

5. Custom Objects
• JavaScript Object has a key and a value
• Key is always string
• Value can be of any type
– Including another JSON object
A = {key1: value1, key2: value2};
or
A = new Object();
A[„key1‟] = value1;
A.key2 = value2;
@akshaymathu 5

6. Object as Namespace
• It is a good practice to group variables and
functions together in an object rather than
keeping them global
var user = {};
user.name = “Akshay”;
user.greet = function(){
alert(„Hello!„.concat(user.name);
};
@akshaymathu 6

7. Object as Named Argument
• Objects can be passed to a function as an argument
• They proxy for named arguments
Say_hello = function (options){
if (typeof options === „Object‟){
options.msg = (options.msg)?
options.msg : ‟Hello!‟;
}
alert(options.msg + „ „ + options.name);
}
Say_hello({name: „Akshay‟});
@akshaymathu 7

8. @akshaymathu 8

9. JS Functions

10. Function
• Code block that executes on ‘call’
//define the function
function say_hello(name){
alert(„Hello! „ + name);
}
//call the function
say_hello(„Akshay‟);
@akshaymathu 10

11. Function Arguments
• Any number of arguments can be passed without
declaring
• Named arguments are not supported
say_hello(1); // Hello! 1
say_hello(); // Hello! undefined
say_hello(„Akshay‟, „Mathur‟);
//Hello! Akshay
@akshaymathu 11

12. Naming a Function
function my_func(){}
• A function may not have a name
function(){};
my_func = function(){};
@akshaymathu 12

13. Variable Scope
• By default all variables are global
• Variables defined with ‘var’ keyword are local to
the function
• It is assumed that all variables are defined in the
first line
function(){
var my_var = „Hello‟;
console.log(msg);
var2 = 6;
}
@akshaymathu 13

14. Return Values
• Anything can be returned from a function
using return statement
function sqr(x){
var sq = x * x;
return sq;
}
var four_sq = sqr(4);
@akshaymathu 14

15. Other Facts
• A function can be assigned to a variable
• A function can be defined within another function
• A function can return a function
function sqr(){
sq = function (x){
return x * x * x;
};
return sq;
}
My_sqr = sqr(); // function
My_sqr(3); // 27
@akshaymathu 15

16. 16@akshaymathu

17. JavaScript Classes

18. Class
• Class is a reserved keyword in JS
– But not implemented
– Same effect is achieved via prototype
• CofeeScript allows to write classes
– Generates JS code using prototype
@akshaymathu 18

19. Using Functions as Objects
• Functions are actually First Class objects
So we can change
User= {}
User.name = „Akshay‟
User.greet = function(){
alert(„Hello ‟ + User.name)
}
to
User = function(){
this.name = „Akshay‟
this.greet = function(){
alert(„Hello ‟ + this.name)
}
}
@akshaymathu 19

20. Creating Instances
• Now the object instance can be created using
new keyword
user1 = new User; user1.name
//Akshay user1.greet() //Hello
Akshay
@akshaymathu 20

21. Object Constructor
• The main object function can take arguments for
initializing properties
User = function(name){
this.name = name;
this.greet = function(){
alert(„Hello ‟ + this.name)
}
}
user1 = new User(„Cerri‟);
user1.greet() //Hello Cerri
@akshaymathu 21

22. Extending a Class
• More functions and properties can be defined
extending the prototype of the class
User.prototype.setGender =
function(gender){
this.gender = gender;
};
User.prototype.sayGender =
function(){
alert(this.name + „ is ‟ +
this.gender);
};
@akshaymathu 22

23. Further Reading
• Introduction to Object-Oriented JavaScript on
Mozilla Developer Network
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Introduction_to_Object-
Oriented_JavaScript

24. Thanks
@akshaymathu 24@akshaymathu
http://www.quora.com/Akshay-Mathur