Data type Scope Falsy IIF / Function as first class object Hoisting arguments Call / Apply Closure Name spacing Prototype

1. Object Oriented
JavaScript
By Kanakaraj Venkataswamy
28th & 29th November 2013

2. Who am i
Tech Lead
Hertz ( www.hertz247.com )
email: kanakarajv@techaspect.com
twitter: @rajakvk
Blog: www.vkanakaraj.wordpress.com

3. Who are you?
•
•
•
•
Name
Hobby
A secret about you
Within 2 minutes

4. Agenda
•
•
•
•
•
What is OO?
Why OOJS?
Important concepts
Design pattern
requirejs

5. What is OO?
•
Encapsulation
•
Inheritance
•
Polymorphism
•
etc.

6. Why OOJS?
•
•
•
•
•
Not only for form validation
Complex
Client side intensive
Need better organisation
Reuse

7. background
•
•
•
•
•
•
Interpreted, prototype based, dynamically
typed, has first-class functions by Brendan
Eich in 10 days for NetScape (now Mozilla)
on Sep „1995.
ECMA-262 (1-Jun„97, 2-Jun‟98, 3-Dec‟99, 4-x, 5-Dec‟09)
Mocha, LiveScript, JavaScript
V8, Chakra, Rhino, Carakan, Nitro, etc.
Hosts: Browser, Acrobat Reader, Tools in Creative suit, etc
Core, DOM, BOM

8. object
•
•
•
•
•
•
•
•
•
•
key value pair
key is string, value is „any‟ javascript value
var myObj = {}; // empty object
var myObj = new Object(); // empty object
var myObj = new Human(); // will be explained
myObj = { fname: „raja‟, lname: „kvk‟ };
console.log(myObj.fname); // raja
myObj.project = „hertz‟;
console.log( myObj[„project‟] ); // hertz
delete myObj.name

9. Important concepts
•
•
•
•
•
•
•
•
•
•
Data type
Scope
Falsy
IIF / Function as first class object
Hoisting
arguments
Call / Apply
Closure
Name spacing
Prototype

10. Data Types
•
Primitive types
o
o
o
o
•
o
Everything else is object
o
o
o
•
number
string
boolean
undefined
null
o
function
array
date
regex, etc.
Object is nothing but key/value pair

11. Scope
Scope in a programing language controls the
visibility and lifetimes of variables and
parameters.
•
•
•
Global scope
Function scope
this

12. Falsy
The following values are falsy
o
o
o
o
o
o
false
0 (zero)
“” (empty string”)
null
undefined
NaN (not a number)
Everything else is truthy

13. Function - first class
object
Function
•
•
•
•
•
•
is an instance of Object type
can have properties
can have methods
can be stored in a variable
can be passed as parameter
can be returned from a function

14. IFF
anonymous function
function(){
// code
}
Immediately invoked function
function(arg) {
alert(arg)
} (5)

15. hoisting
•
function declarations and variable
declarations are always moved (hoisted)
invisibly to the top of their containing scope
by the javascript interpreter.
•
one var statement per scope at the top

16. arguments
•
•
•
•
•
an object available within all functions
exists only inside function body
not an Array but similar
have length property
does not have Array methods like pop

17. call / apply
•
•
call is used when you want to control the
scope that will be used in the function called.
http://jsfiddle.net/rajakvk/3Yp6D/

18. closure
Definition: closure is the local variable for a
function - kept alive after the function has
returned
•
•
Garbage collection
Memory leak

19. name space
•
•
•
Name spacing is a technique employed to
avoid collisions with other objects or
variables in the global scope.
No built in support.
var AppSpace = AppSpace || {};
AppSpace.Mail = function(){};
AppSpace.Video = function(){};

20. prototype
•
•
prototype is an object from which other
objects inherit properties and methods
Every function has a prototype by default

21. Great power comes with
great responsibility

22. Take away
JavaScript is a flexible and expressive
language that should be written clearly and
concisely.

23. require.js
Asynchronous Module Definition (AMD)

24. The problem & solution
•
•
•
•
•
Solves dependency management problem
API: define(id, dependencies, factory)
Keep execution order
Loads text, CoffeeScript, template, etc.
Minify & Build capability (optimization)

25. Design Pattern

26. Introduction
•
Patterns are proven solutions to software
development problems.
•
•
Patterns are reusable for similar problems.
Creational, Structural, Behavioural

27. What is covered here?
Singleton - Creational
Module - Structural
Decorator - Structural
Observer - Behavioural

28. Singleton Pattern
•
•
•
•
The singleton pattern is a design pattern that
is used to restrict instantiation of a class to
one object.
Namespacing, Grouping related methods
and attributes together.
Tightly coupled, Unit testing is difficult
http://jsfiddle.net/rajakvk/gv644/

29. Module Pattern
•
•
Loose definition: a way to provide both
private and public encapsulation for classes.
http://addyosmani.com/resources/essentialjs
designpatterns/book/#modulepatternjavascri
pt

30. Decorator
•
•
Decorators offered the ability to add
behaviour to existing classes in a system
dynamically.
http://jsfiddle.net/rajakvk/69EdP/

31. Observer Pattern
•
•
Define a one-to-many dependency between
objects so that when one object changes
state, all its dependents are notified and
updated automatically.
http://www.dofactory.com/javascriptobserver-pattern.aspx