Object Oriented Programing in JavaScript

Object Oriented Programing
in
Akshay Mathur

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Object Oriented Programing in JavaScript

More Related Content

What's hot (20)

Similar to Object Oriented Programing in JavaScript (20)

More from Akshay Mathur (18)

Recently uploaded (20)

Object Oriented Programing in JavaScript