Object Oriented JavaScript - Hands on!

In depth on public demand!

JavaScript Object look like?

var obj = { key1: value1, key2: value2, method1: f(), ...
}
Exercise 1: Create <yourname> object first time in JavaScript:

var <yourname> = {name: 'Vaibhav', birthYear: 1990, skills: [], hobbies: []}

Benefits of Object:

        - Encapsulation / Namespace = Data + Method

        - Real World Objects in programming

        - Clean code

        - Reusability

    

World without objects:

    
        var name = 'Pinakin',
            birthYear = 1982,
            skills = ['HTML5', 'CSS3', 'OO JavaScript'],
            hobbies = ['coding HTML5', 'coding CSS3', 'coding OOJS'];
        

World without objects ...

    
        var names = ['Pinakin', 'Aditya', 'Vaibhav', ...],
            birthYears = [1982, 1987, 1990, ...],
            skills = [[...], [...], [...], ...],
            hobbies = [[...], [...], [...], ...];
        

World without objects...

    
        function process(name, birthYear, skills, hobbies, ...){

        }
        

Enter world of objects!!!

   
        var pinakin = {
            name: 'Pinakin',
            birthYear: 1982,
            skills: ['HTML5', 'CSS3', 'JavaScript'],
            hobbies: ['Cricket', 'Movies', 'Coding while watching
                cricket and movies'],
            presenting: function(awesomeStuff){
                alert('Presenting ' + awesomeStuff);
            }
        };

        Exercise 2: Redefine Yourself!!! 
        

Enter world of objects ...

   
        var personsArray = [{...}, {...}, {...}, ...];
        

Home work: Arrays are objects with 0, 1, 2, ... as keys!!!

Enter world of objects ...

    
        function process(person){
            ...
        }
        

Ways to create a JS Object:

        - Using object literal {}

        - Using built in contructors Eg: var person = new Object();

        - Using custom constructor function(cookie cutter)

    

My first custom constructor:

        function Person(name, birthYear, skills, hobbies) {
            this.name = name;
            this.birthYear = birthYear;
            this.skills = skills;
            this.hobbies = hobbies;
            this.getName = function() {
                return this.name;
            }
        }

        Exercise 3: Bake yourself well!
        pinakin = new Person('Pinakin', 1982, ['html5', 'css3', 'OOJS'])
        

My first private property:

        function Person(name, birthYear, skills, hobbies) {
            var password = 'myBirthRight';
            
            this.name = name;
            this.birthYear = birthYear;
            this.skills = skills;
            this.hobbies = hobbies;
            this.getPassword = function(){
                return password;
            }
        }

        Exercise 4: Have some privacy!!! 
        pinakin = new Person('Pinakin', 1982, ['html5', 'css3', 'OOJS'])
        

Private method:

        function Person(name, birthYear, skills, hobbies) {
            var password = generatePassword();
            console.log(password);
            this.name = name;
            this.birthYear = birthYear;
            this.skills = skills;
            this.hobbies = hobbies;

            function generatePassword(){
                return 'password' + parseInt(Math.random()*1000);
            }
            
        }
        

Dynamix: Deleting a property

        function Person(name, skills, hobbies, gender, birthYear) {
            this.name = name;
            this.skills = skills;
            this.hobbies = hobbies;
            this.gender = gender;
            this.birthYear = birthYear;
            if(gender != 'male' && gender != 'Male') {
                delete this.birthYear;
            }
        }

        Exercise 5: Her birthYear is a secret!!
        

Go public smartly!!!

        - method on 'this' is local.

        - specific to instance object.

        - Not common across all object instances.

        - Share commonalities?

        - Go extra mile.

        

prototype: Enter the Dragon!!!

        - Remember function is an object.

        - A special birth gift for Function objects.

        - Points to an object.

        - Common across all instance objects.

        - Instance objects don't have it but can reach it via
            constructor property.

            pinakin.constructor.prototype == Person.prototype
            pinakin.__proto__ == Person.prototype
        

prototype is a gifted property to Function Object:

functionObject.prototype = { constructor: this };

Ride on this Dragon!!!

Common methods on prototype object:

        function Person(name, birthYear, skills, hobbies) {
            var password = 'myBirthRight';
            this.name = name;
            this.birthYear = birthYear;
            this.skills = skills;
            this.hobbies = hobbies;
        }
        Person.prototype.getName = function(){
            return this.name;
        }

        Xplore: call and apply methods

        

Prototype Inheritance Chain:


- A common place for all instance objects.
- Going extra mile lookin'up the chain.

Override: Hereafter, I will push!


a.push == Array.prototype.push

Inheritance: Mix 2 objects!

        function Geek(name) {
            this.name = name;
            this.geekness = "OO JS";
        }

        Geek.prototype = new Person();
        Geek.prototype.contructor = Geek;

        vaibhav = new Geek("Vaibhav");
        

        Prototypal Inheritance: $scope in Angular JS
        

Static Method: don't give me 'this'

        Date.getMonday = function() {
          var d = new Date();
          var day = d.getDay(),
              // adjust when day is sunday
              diff = d.getDate() - day + (day == 0 ? -6:1); 
          return new Date(d.setDate(diff));
        }

        Date.getMonday();
        

        

See objects everywhere!
- Function
- Array
- Date
- Object
- Math ?

Use console as microscope to explore them!

JavaScript is everywhere video
- By Douglas Crockford.

        - Father of JSON.
        - Writer of JavaScript: The Good Parts.
        - Speaker at upcoming JSChannel Conference.