Jesus the Coder

Object Oriented Programming

 Features that defines a language as Object Orientated are:    

• Object
• Classes
• Encapsulation
• Inheritance

An object is a unique entity that contains properties and methods. An example would be like a shoe, a shoe has a color, size, price, shape and brand. In practical use of an object, the shoe would be a product in a store. The characteristics of an Object are called Properties in Object-Oriented Programming and the actions are called methods.

An Object is an instance of a class. Objects are everywhere in JavaScript, almost every element is an Object whether it is a function, array, or string. 

          Note: A Method in javascript is a property of an object whose value is a function. 

        Object can be created in two ways in JavaScript: 

• Using an Object Literal

        //Defining object

let person = {

first_name:'Jan',

last_name: 'vd Merwe',

//method

getFunction : function(){

return (`The name of the person is

${person.first_name} ${person.last_name}`)

},

//object within object

phone_number : {

mobile:'12345',

landline:'6789'

}

}

console.log(person.getFunction());

console.log(person.phone_number.landline);

 

 

• Using an Object Constructor: 

//using a constructor

function person(first_name,last_name){

this.first_name = first_name;

this.last_name = last_name;

}

//creating new instances of person object

let person1 = new person('Jan','vd Merwe');

let person2 = new person('Piet','Potgieter');

console.log(person1.first_name);

console.log(`${person2.first_name} ${person2.last_name}`);

 

• Using Object.create() method: The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. 

 // Object.create() example a

// simple object with some properties

const coder = {

isStudying : false,

printIntroduction : function(){

console.log(`My name is ${this.name}. Am I

studying?: ${this.isStudying}.`)

}

}

// Object.create() method

const me = Object.create(coder);

// "name" is a property set on "me", but not on "coder"

me.name = 'Jan';

// Inherited properties can be overwritten

me.isStudying = true;

me.printIntroduction();

            Classes 

Classes are blueprint of an Object. A class can have many Objects because class is a template while Object are instances of the class or the concrete implementation. 

Before we move further into implementation, we should know unlike other Object Oriented Language there are no classes in JavaScript we have only Object. To be more precise, JavaScript is a prototype based Object Oriented Language, which means it doesn’t have classes, rather it defines behaviors using a constructor function and then reuse it using the prototype. 

Note: Even the classes provided by ECMA2015 are objects.

Example: 
Lets use ES6 classes then we will look at the traditional way of defining an Object and simulate them as classes.

// Defining class using es6

class Vehicle {

constructor(name, maker, engine) {

this.name = name;

this.maker = maker;

this.engine = engine;

}

getDetails(){

return (`The name of the bike is ${this.name}.`)

}

}

// Making object with the help of the constructor

let bike1 = new Vehicle('Hayabusa', 'Suzuki', '1340cc');

let bike2 = new Vehicle('Ninja', 'Kawasaki', '998cc');

console.log(bike1.name); // Hayabusa

console.log(bike2.maker); // Kawasaki

console.log(bike1.getDetails());

 

Traditional Way.

 // Defining class in a Traditional Way.

function Vehicle(name,maker,engine){

this.name = name,

this.maker = maker,

this.engine = engine

};

Vehicle.prototype.getDetails = function(){

console.log('The name of the bike is '+ this.name);

}

let bike1 = new Vehicle('Jan','Merwe','1340cc');

let bike2 = new Vehicle('Jan','Merwe','998cc');

console.log(bike1.name);

console.log(bike2.maker);

console.log(bike1.getDetails());

As seen in the above example it is much simpler to define and reuse objects in ES6. Hence, we would be using ES6 in all of our examples.

3. Encapsulation – The process of wrapping properties and functions within a single unit is known as encapsulation. 
Let’s understand encapsulation with an example.

                    //encapsulation example

        class person{

constructor(name,id){

this.name = name;

this.id = id;

}

add_Address(add){

this.add = add;

}

getDetails(){

console.log(`Name is ${this.name},Address is: ${this.add}`);

}

}

let person1 = new person('Jan,21);

person1.add_Address('Joburg');

person1.getDetails();

In the above example we simply create a person Object using the constructor and Initialize its properties and use its functions. We are not bothered with the implementation details. We are working with an Object’s interface without considering the implementation details. 

Sometimes encapsulation refers to the hiding of data or data Abstraction which means representing essential features hiding the background detail. Most of the OOP languages provide access modifiers to restrict the scope of a variable, but their are no such access modifiers in JavaScript but there are certain ways by which we can restrict the scope of variables within the Class/Object.  

          // Abstraction example

    function person(fname,lname){

let firstname = fname;

let lastname = lname;

let getDetails_noaccess = function(){

return (`First name is: ${firstname} Last

name is: ${lastname}`);

}

this.getDetails_access = function(){

return (`First name is: ${firstname}, Last

name is: ${lastname}`);

}

}

let person1 = new person('Jan','Merwe');

console.log(person1.firstname);

console.log(person1.getDetails_noaccess);

console.log(person1.getDetails_access());

        That is it for examples of OOP. In the next blog I will cover functions, Arrays/Objects and Closures.

 

 

 

JS: OOP, Clolusers, Functions, Arrays/Objects. Code snippets to review