Object Oriented Programing in JavaScript

Object Oriented Programingin

Akshay Mathur

@akshaymathu 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

JS Objects

@akshaymathu 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 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 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 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 8

JS Functions

@akshaymathu 10

Function

• Code block that executes on ‘call’//define the functionfunction say_hello(name){ alert(‘Hello! ‘ + name);}

//call the functionsay_hello(‘Akshay’);

@akshaymathu 11

Function Arguments

• Any number of arguments can be passed without declaring

• Named arguments are not supported

say_hello(1); // Hello! 1say_hello(); // Hello! undefinedsay_hello(‘Akshay’, ‘Mathur’);

//Hello! Akshay

@akshaymathu 12

Naming a Function

function my_func(){}

• A function may not have a name

function(){};

my_func = function(){};

@akshaymathu 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

linefunction(){

var my_var = ‘Hello’;console.log(msg);var2 = 6;

}

@akshaymathu 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 15

Other Facts

• A function can be assigned to a variable• A function can be defined within another function• A function can return a functionfunction sqr(){ sq = function (x){

return x * x * x; }; return sq;}My_sqr = sqr(); // functionMy_sqr(3); // 27

16@akshaymathu

JavaScript Classes

@akshaymathu 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 19

Using Functions as Objects

• Functions are actually First Class objectsSo we can change

User= {}User.name = ‘Akshay’User.greet = function(){

alert(‘Hello ’ + User.name)}

toUser = function(){

this.name = ‘Akshay’this.greet = function(){

alert(‘Hello ’ + this.name)}

}

@akshaymathu 20

Creating Instances

• Now the object instance can be created using new keyword

user1 = new User; user1.name //Akshay user1.greet() //Hello Akshay

@akshaymathu 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 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);

};

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

@akshaymathu 24

Thanks

@akshaymathu

http://www.quora.com/Akshay-Mathur