Heading towards Object Oriented Programming Approach in JS

0_intro.md

To proper understand the OOP in JS, we should have proper basic understanding of following topis. For each topic there is separate file for better understanding. Follow the files as per order.

1. Object Literal
2. Constructor
3. Prototypes
4. ES6 Classes
5. ES6 SubClasses

For code output

1. Check Object liteals code output at : http://tpcg.io/BiOR0UuP
2. Check Constructor Fxn output at : http://tpcg.io/A86KN1iv
3. Check Prototype output at : http://tpcg.io/WmMuyqDu
4. Check required file in this gist for code (4_classes.js)
5. Check required file in this gist for code (5_sub_class.js)

1_object_literals.js

//These are comma separated list of name-value pairs. Example:

const Person1 = {
 Name : 'Arpit',
 Age  : '22',
 getInfo : function(){
         return  `${this.Name} is of ${this.Age} years`
          }
}

console.log( Person1);          //will get object details
console.log( Person1.Name);     //will get object Name
console.log(Person1.Age);       //will get object Age
console.log(Person1. getInfo);   //will get function defination
console.log(Person1. getInfo());  //will get function return value

/* ---OUTPUT ---
Object { Name: "Arpit", Age: "22", getInfo: getInfo() }    

Arpit

22
 
function getInfo()......

Arpit is of 22 years

*/



//------------------------------------
//COMPLEX OBJECT LITERALS

var Swapper = {
    // an array literal
    images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"],
    pos: { // nested object literal
        x: 40,
        y: 300
    },
    onSwap: function() { // function
        return "swapped" }
}

console.log("\n\n",Swapper)

2_Constructor_function.js

/*

Constructor Function in JS


1. These are special type of function can be used as TEMPLATE for creating object.
2. Used with "new" Keywords
3. this in constructor refers to instant of object (means object which is initialized)  OR we can say "this" is bind to object which is created


*/

function Person(name,age){
this.Name = name;
this.Age = age;
this.getInfo = function(){
         return  `${this.Name} is of ${this.Age} years`
          }

console.log(this, this.Name, this.Age) //this console.log will also get execute each time object is created.
}

let person1 = new Person('arpit','22');
let person2 = new Person('Arjun','23');

console.log( "object1 info : ", person1);          //will get object details
console.log( "object2 info : ", person2);          //will get object details


// check output at :  http://tpcg.io/A86KN1iv 

3_Prototype.js

//Prototyps in JS

//In above constructor example we have seen we defined getInfo method in Constructor itself, but ideally we try define only basic structure inside constructor
// so to add methods to object we use prototype keyword 

function Person(name,age){
this.Name = name;
this.Age = age;
// this.getInfo = function(){
//          return  `${this.Name} is of ${this.Age} years`
//           }
}

Person.prototype.getInfo = function(){
         return  `${this.Name} is of ${this.Age} years`
  }

Person.prototype.updateAge = function(newAge){
          this.Age = newAge;
        
          }

let person1 = new Person('arpit','22');
let person2 = new Person('Arjun','23');

console.log(person1);
console.log(person1.getInfo());
person1.updateAge('21');
console.log(person1.getInfo());

console.log(person2);


/*
OUTPUT :

Object { Name: "arpit", Age: "22", getInfo: getInfo() }

arpit is of 22 years

arpit is of 21 years 

Object { Name: "Arjun", Age: "23", getInfo: getInfo() }

*/

4_classes.js

// class in nothing just a syntactic sugar of construtctor fxn and prototype methods

class Person {

constructor(name,age){
this.Name = name;
this.Age = age;
}

getInfo = function(){
        return  `${this.Name} is of ${this.Age} years`
  }

updateAge = function(newAge){
          this.Age = newAge;
        
  }

 static staticMethod() {       //static methods are those methods who don't require any object to evoke them
    return 'static method has been called.';
  }

}

let person1 = new Person('arpit','22');
let person2 = new Person('Arjun','23');

console.log(person1);
console.log(person1.getInfo());
person1.updateAge('21');
console.log(person1.getInfo());

console.log(person2);
console.log(Person.staticMethod());  //static method is called with directly class name
/*
OUTPUT:
Object { getInfo: getInfo(), updateAge: updateAge(newAge), Name: "arpit", Age: "22" }

arpit is of 22 years
arpit is of 21 years 
Object { getInfo: getInfo(), updateAge: updateAge(newAge), Name: "Arjun", Age: "23" }

static method has been called.

*/

5_sub_class.js

// class in nothing just a syntactic sugar of construtctor fxn and prototype methods

class Person {

constructor(name,age){
this.Name = name;
this.Age = age;
}

getInfo = function(){
        return  `${this.Name} is of ${this.Age} years`
  }

updateAge = function(newAge){
          this.Age = newAge;
        
  }

}


class  PersonBrain extends Person {

constructor(Name,age,brainpower){
super(Name,age)

this.BrainPower = brainpower;
}

getFullInfo = function(){
        return  `${this.Name} is of ${this.Age} years have ${this.BrainPower}`
  }

}
let person1 = new PersonBrain('arpit','22',"12312131");
let person2 = new PersonBrain('Arjun','23',"121");

console.log(person1);
console.log(person1.getInfo());
person1.updateAge('21');
console.log(person1.getFullInfo());

console.log(person2);

/*
OUTPUT:
Object { getInfo: getInfo(), updateAge: updateAge(newAge), Name: "arpit", Age: "22", getFullInfo: getFullInfo(), BrainPower: "12312131" }

arpit is of 22 years 
arpit is of 21 years have 12312131 
Object { getInfo: getInfo(), updateAge: updateAge(newAge), Name: "Arjun", Age: "23", getFullInfo: getFullInfo(), BrainPower: "121" }

*/