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

Similar to Object Oriented Programing in JavaScript

More from Akshay Mathur

Recently uploaded

Object Oriented Programing in JavaScript