Simple Introduction to Object Oriented Programing 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