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