Important points to remember regarding actionRegion, actionFunction, actionSupport, actionPoller

Last night(July 17th, 2019) while preparing for Platform Developer II certification, I was going through my notes to revise the different ways to call Apex Controller functions from Visualforce page, I thought of making a post regarding actionRegion, actionFunction, actionSupport, actionPoller & actionStatus. Just setting the expectation beforehand - It is not a post which will explain you all, but I will share the developer guide link for each of them so that you can go and read them (highly recommended).

actionRegion

The specifies the components to be processed on Force.com server. Without this tag, the whole page will be processed. With also the whole form is submitted, but only the part within the tag will be processed.

It needs a reRender attribute to be effective. It will only refresh the part of the page using the data contained within the tag. This can be very effectively used to avoid validation errors that may occur due to present of standard validation rule in VF page like required attribute.

Here is the example without ActionRegion:

Controller:

public with sharing class WithoutActionRegionController {
    public String valueEntered{get;set;}
    public String country{get;set;}
    public String state{get;set;}

    public WithoutActionRegionController() {
        country = '';
        state = '';
        valueEntered = '';
    }

    public PageReference countrySubmitted(){
        valueEntered = 'Country: ' + country;
        return null;
    }
}

Visualforce Page:

<apex:page controller="WithoutActionRegionController">
    <apex:form id="myForm">
        <apex:pageMessages id="messages1"/>
        <apex:pageBlock id="topPageBlock">
            <apex:pageBlockSection columns="2" title="Country & State">
                <apex:outputText value="Enter Country" />
                <apex:inputText value="{!country}" >
                    <apex:actionSupport action="{!countrySubmitted}" reRender="messages1,outputId" event="onchange"/>
                </apex:inputText>
                <apex:outputText value="Enter State" />
                <apex:inputText value="{!state}" required="true"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Output" id="outputId">
                    <apex:outputText value="{!valueEntered}" />
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output:

As you can see it throws the validation message due to state field is marked as required=true to moment I finish entering the country. This is because the whole page is submitted to render.

Now the same example with ActionRegion:

<apex:page controller="WithoutActionRegionController">
    <apex:form id="myForm">
        <apex:pageMessages id="messages1"/>
        <apex:pageBlock id="topPageBlock">
            <apex:pageBlockSection columns="2" title="Country & State">
                <apex:outputText value="Enter Country" />
                <apex:actionRegion>
                    <apex:inputText label="Enter Country" value="{!country}" >
                        <apex:actionSupport action="{!countrySubmitted}" reRender="messages1,outputId" event="onchange"/>
                    </apex:inputText>
                </apex:actionRegion>
                <apex:outputText value="Enter State" />
                <apex:inputText value="{!state}" required="true"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Output" id="outputId">
                    <apex:outputText value="{!valueEntered}" />
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output:

This time no error message because will render the Output and message1 part of the page with the content present inside tag. 

Reference: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionRegion.htm?search_text=actionregion

actionFunction

This allows calling controller functions directly from the JavaScript code using AJAX request. It is not the same as actionSupport which only allows calling controller functions from other Visualforce components. Few things to remember -

• actionFunction is not allowed to be placed inside iteration component. It should be placed after the iteration component.
• order of is matched by the caller's argument list. reRender attribute is needed to define
• It doesn't have event attribute. It doesn't add Ajax request before calling the Controller method.

Example:

Controller:

public with sharing class ActionFunctionController {
    public Boolean showHelloWorld{get;set;}
    public String message {get;set;}
    public ActionFunctionController(){
        showHelloWorld = false;
        message = '';
    }

    public PageReference shouldDisplayHelloWorld(){
        showHelloWorld = true;
        message = 'Now we can say Hello World';
        
        return null;
    }
}

Visualforce Page:

<apex:page controller="ActionFunctionController">
    <apex:form>
        <apex:actionFunction name="checkHelloWorldDisplay" action="{!shouldDisplayHelloWorld}" reRender="HelloWorldSection"/>
        <apex:pageBlock>
            <apex:pageBlockSection id="HelloWorldSection" columns="1">
                <apex:inputCheckbox value="{!showHelloWorld}" onChange="checkHelloWorldDisplay()"/>
                <apex:outputText value="{!message}" />
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>

</apex:page>

Output:

Reference: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionFunction.htm?search_text=actionfunction

actionSupport

This can be used when we need the Visualforce component to be refreshed asynchronously by the server when a particular event occurs like button click or mouseover.

• It adds the AJAX request to the Visualforce Page and then calls the controller function. This is how it different from actionFunction.
• It also has event attribute. Another difference between actionFunction and actionSupport.
• It can be placed inside an iteration component.

Reference: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionSupport.htm

actionPoller

• A timer that sends an AJAX request to server according to a time interval specified. Each request can result full or partial refresh of the page.
• Enabled attribute is used to make poller as active or inactive. Default is active.
• It won't time out due to inactivity.

Reference: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionPoller.htm

Share:

Read More

Advanced Currency Management in Salesforce

Salesforce supports multi currency. You can enable the same by going to Company Information and then checking the box - "Activate Multiple Currencies". You need to read the below article before enabling multi currency. https://help.salesforce.com/articleView?id=admin_enable_multicurrency_implications.htm

Once done, you can enable Dated Exchange Rate to define the exchange rate for any kind of periods like month, quarter, year etc. To do that you can go to Company profile -> Manage Currencies

Now you can add the entries for dated exchange rates by clicking on the "Manage Dated Exchange Rates" button. And then click on "New Exchange Rates" button. Below images shows how to add dated exchange rates.

This dated exchange rates are used in Opportunities, Opportunity products and Opportunity Reports.

The object used to store this information is DatedConversionRate. You can run SOQL queries against this object to get the details -

SELECT IsoCode,ConversionRate,NextStartDate,StartDate FROM DatedConversionRate ORDER BY NextStartDate ASC

You can use Rest Explorer also to add/delete new DatedConversionRate like below -

Important Objects/Fields:

• CurrencyType: This object stores the list of currencies used in the org when multi currency is enabled. If single currency is used in the org, then this object is not available.
• DatedConversionRate: This object stores the dated exchange rates.
• CurrencyIsoCode: This additional field is present in object which has current field and the org has multi-currency enabled. 

Share:

Read More

Summer'19 : Celebrate Sales Milestones with Path

In Summer 19 release, Salesforce introduces a new cool feature so that you can let your user celebrate when they reach certain stages in Sales path(or any path). This is a fun, visual way of celebrating success right from the Salesforce screen.

This idea came from an old blog post regarding building with path based component, where community liked the idea and Salesforce delivered this to us now. To me this is the power of Salesforce community.

So let's configure this together -

Step 1

Enable path in your org.

Step 2

Click on New Path. Choose values as shown in the below screenshot. (You can select any values available).

Step 3

Click on Next and ant the next screen select Key fields for the Opportunity Stages. Click on Next.

Step 4

At this stage, enable on-screen confetti.

Step 5

Here, you can select which stage you want top celebrate. Select those picklist values. Also you can select the frequency of celebration. 

And finally click on Finish. That's all you need to do to get this new cool feature.

Here is the video with step by step instructions -

Share:

Read More

Kitchener Canada Developer Group Event: Introduction to DevOps with Salesforce DX by René Winklmayer

Special thanks to our speaker, René Winklmayer, for the session on Introduction to DevOps with Salesforce DX.

Here comes the presentation and recording.

Presentation:

Kitchener Salesforce Developer Group Event - Introduction to dev ops with SalesforceDx from Sudipta Deb ☁

Recording:

Please register to Kitchener, Canada Developer Group for all our future events.

https://goo.gl/yLm9Sd

Share:

Read More

Understanding JavaScript Promises

Introduction to Promises

Dealing with asynchronous code? Promises is the way to deal with it without writing multiple callbacks. Promises were standardized and introduced in ES2015, but in ES2017 they have been superseded by async function. Understanding of Promises is the foundation of learning Async functions.

Way Promises work

Once a promise has been called, it always start with Pending state. At this point, caller function waits for the promise function to finish it's job and then return either in Resolved or Rejected state. But as we know Javascript executes in asynchronous mode, so caller function will still continue doing it's job in parallel with promise doing it's job.

Creating Promises

The Promise API exposes a constructor which you can use to create Promise -

const printSomething = (isValid) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isValid) {
        console.log('Yes I am valid');
        resolve();
      } else {
        console.log('Sorry I am invalid');
      }
    }, 1000);
  });
}

Here promise is checking a the passed Boolean value isValid. If the isValid is true, then promise is returning resolved promise , other returning rejected promise.

Promise provides resolve and reject to return values to the calling function in case of success or error respectively.

Consuming Promises

Let's now consume the promise with below code -

const printSomething = (isValid) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isValid) {
        console.log('Yes I am valid');
        resolve();
      } else {
        console.log('Sorry I am invalid');
      }
    }, 1000);
  });
}

printSomething(true)
  .then(() => printSomething(true))
  .then(() => printSomething(false));

Here I am calling printSomething function which is returning Promise either in Resolve or Reject state based on the function parameter isValid.

Here is the outcome -

Yes I am valid
Yes I am valid
Sorry I am invalid

You can execute the code here.

Chaining Promises

You can chain promises by returning result from one promise and then using the same in the next promise.

const printSomething = (name, textToAdd) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      var retValue = '';
      if (name != null) {
        retValue = name + ' ' + textToAdd;
      } else {
        retValue = textToAdd;
      }
      console.log(retValue);
      resolve(retValue);
    }, 1000);
  });
}

printSomething(null, 'Hello')
  .then((result) => printSomething(result, 'Sudipta'))
  .then((result) => printSomething(result, 'Deb'));

As you can see in the above example, I am using the result from the first promise which is "Hello" and the using the same in the second promise to append "Sudipta" with "Hello", thus returning "Hello Sudipta". Finally using this in the third promise to append "Deb", this returning "Hello Sudipta Deb"

Here is the result

Hello
Hello Sudipta
Hello Sudipta Deb

You can execute the code here.

Handling Errors

Handling error can be done by either returning Promise is reject mode or throwing an error.

Let's understand the below example with Reject returning an error.

const printSomething = (name, textToAdd) => {
  return new Promise((resolve, reject) => {
    try {
      setTimeout(() => {
        if (textToAdd == null) {
          reject(new Error('textToAdd can not be null'));
        } else {
          var retValue = '';
          if (name != null) {
            retValue = name + ' ' + textToAdd;
          } else {
            retValue = textToAdd;
          }
          console.log(retValue);
          resolve(retValue);
        }
      }, 1000);
    } catch (e) {
      reject(e);
    }
  });
}

printSomething(null, 'Hello')
  .then((result) => printSomething(result, 'Sudipta'))
  .then((result) => printSomething(result, 'Deb'))
  .then((result) => printSomething(result, null))
  .then((result) => printSomething(result, 'From Canada'))
  .catch(err => console.log('Error occured: ' + err.message));

In the above example, I am returning Reject promise with new Error. Then using the same with catch statement while consuming the Promise. Here is the output -

Hello
Hello Sudipta
Hello Sudipta Deb
Error occured: textToAdd can not be null

You can execute the code here.
Now let's modify the same example, where instead of returning Reject promise, I will throw the error. This is helpful to handle runtime error.

const printSomething = (name, textToAdd) => {
  return new Promise((resolve, reject) => {
    try {
      setTimeout(() => {
        if (textToAdd == null) {
          throw "textToAdd can not be null";
        } else {
          var retValue = '';
          if (name != null) {
            retValue = name + ' ' + textToAdd;
          } else {
            retValue = textToAdd;
          }
          console.log(retValue);
          resolve(retValue);
        }
      }, 1000);
    } catch (e) {
      reject(e);
    }
  });
}

printSomething(null, 'Hello')
  .then((result) => printSomething(result, 'Sudipta'))
  .then((result) => printSomething(result, 'Deb'))
  .then((result) => printSomething(result, null))
  .then((result) => printSomething(result, 'From Canada'))
  .catch(err => console.log('Error occured: ' + err.message));

One important fact is that reject DOES NOT terminate control flow like a return statement does. In contrast throw does terminate control flow.

Let's have the below code with reject

const printSomething = (name, textToAdd) => {
  return new Promise((resolve, reject) => {
    try {
      setTimeout(() => {
        if (textToAdd == null) {
          reject(new Error('textToAdd can not be null'));
        } else {
          var retValue = '';
          if (name != null) {
            retValue = name + ' ' + textToAdd;
          } else {
            retValue = textToAdd;
          }
          console.log(retValue);
          resolve(retValue);
        }
      }, 1000);
    } catch (e) {
      reject(e);
    }
  });
}

printSomething(null, 'Hello')
  .then((result) => printSomething(result, 'Sudipta'))
  .then((result) => printSomething(result, 'Deb'))
  .then((result) => printSomething(result, null))
  .then((result) => printSomething(result, 'From Canada'))
  .catch(err => console.log('Error occured: ' + err.message))
  .then(() => console.log('I will still execute even after the error'));

Output:

"Hello"
"Hello Sudipta"
"Hello Sudipta Deb"
"Error occured: textToAdd can not be null"
"I will still execute even after the error"

You can execute the code here. Here you can see that catch and then statement are getting executed even after reject promise return.

Now let's have the same code with throw statement

const printSomething = (name, textToAdd) => {
  return new Promise((resolve, reject) => {
    try {
      setTimeout(() => {
        if (textToAdd == null) {
          throw "textToAdd can not be null";
        } else {
          var retValue = '';
          if (name != null) {
            retValue = name + ' ' + textToAdd;
          } else {
            retValue = textToAdd;
          }
          console.log(retValue);
          resolve(retValue);
        }
      }, 1000);
    } catch (e) {
      reject(e);
    }
  });
}

printSomething(null, 'Hello')
  .then((result) => printSomething(result, 'Sudipta'))
  .then((result) => printSomething(result, 'Deb'))
  .then((result) => printSomething(result, null))
  .then((result) => printSomething(result, 'From Canada'))
  .catch(err => console.log('Error occured: ' + err.message))
  .then(() => console.log('I will still execute even after the error'));

Output:

"Hello"
"Hello Sudipta"
"Hello Sudipta Deb"
"Uncaught textToAdd can not be null (line 6)"

You can execute the code here. You see this time the catch and then statements are not getting executed. The reason is that throw statement terminate the control flow.

Promise.all()

Promise.all() will return a promise when all the promises are resolved. If one of the promise is failed, it will reject immediately with the error message from the failed promise irrespective of whether other promises are resolved or not.

Let's have this below example: 

var returnDouble = (value) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (value > 0) {
        resolve(value * 2);
      } else {
        reject(resolve);
      }
    }, 1000);
  });
};

var promisesToMake = [returnDouble(20), returnDouble(10), returnDouble(5)];
var finalPromise = Promise.all(promisesToMake);

finalPromise.then(function (results) {
  console.log('Final Result: ' + results);
});

Output:

"Final Result: 40,20,10"

You can execute the code here. With promise.all(), instead of three different returns, it will return one single promise once all the promises are resolved.

Now let's forcefully reject one promise in the below example -

var returnDouble = (value) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (value > 0) {
        resolve(value * 2);
      } else {
        reject(resolve);
      }
    }, 1000);
  });
};

var promisesToMake = [returnDouble(20), returnDouble(0), returnDouble(5)];
var finalPromise = Promise.all(promisesToMake);

finalPromise
  .then((results) => console.log('Final Result: ' + results))
  .catch(err => console.log('Error occured'));

Output:
"Error occured"
You can execute the code here. In this example, the second call is failed, even though the first and third call is successful. But still the final result is failure.

Promise.race()

Promise.race() runs as soon as one of the promises you pass to it resolves, and it runs the attached callback just once with the result of the first promise resolved.

Here is the example 

var returnDouble = (value,time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (value > 0) {
        resolve(value * 2);
      } else {
        reject(resolve);
      }
    }, time);
  });
};

var promisesToMake = [returnDouble(20,100), returnDouble(200,50), returnDouble(5,500)];
var finalPromise = Promise.race(promisesToMake);

finalPromise
  .then((results) => console.log('Final Result: ' + results))
  .catch(err => console.log('Error occured'));

Output:
"Final Result: 400"

You can execute the code here.

Further Study

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises
• https://promisesaplus.com/

Share:

Read More

Quick Reference of Arrow Function in JavaScript

Arrow functions were introduced with ES6 as a new way of writing JavaScript functions. This post will cover basic syntax of Arrow functions, common use cases.

What is Arrow Functions?

Arrow functions, sometimes referred as Fat Arrow is a new concise way of writing functions. They utilize a new syntax, => which looks like Fat Arrow. Arrow functions are anonymous and change the way this binds in functions. By using arrow functions, we can avoid typing function and return keyword and also curly brackets.

Basic Syntax of Arrow Function with Multiple Parameters

const multiplyFunction = (x,y) => (x*y);
console.log(multiplyFunction(5,6));

You can execute the code here.

Syntax of Arrow Function with Single Parameter

const splitString = text => text.split(" ");
console.log(splitString("My name is Sudipta Deb"));

You can execute the code here.

Syntax of Arrow Function with No Parameter

const functionWithNoParam = () => {
  console.log('This function with no parameter');
}

functionWithNoParam();

You can execute the code here.

Syntax of Arrow Function with Object return

Arrow functions can be used to return an object literal expressions. 

var funcWithObject = (empName, empNumber) => ({
  empName : empName,
  empNumber : empNumber
});
console.log(funcWithObject("Sudipta Deb",101));

Here is the output

[object Object] {
  empName : "Sudipta Deb",
  empNumber : 101
}

You can execute the code here.

Use Cases for Arrow Functions

One very common use case for Arrow function is Array manipulation. In the below example, each array items will be converted to upper case.

const countries = ['India', 'Canada', 'Switzerland', 'Germany'];
const countriesWithCaps = countries.map(country => country.toUpperCase());

console.log(countriesWithCaps);

You can execute the code here.

Another little advanced example is when you want to return something from array which meets the criteria. So in the below example, I would like to return only those tasks which is completed.

const myTasks = [{
  description: "Write Blog Post",
  status: "Completed"
}, {
  description: "Study Architect Certification",
  status: "Pending"
}, {
  description: "Go for walk",
  status: "Completed"
}];

const completedTask = myTasks.filter((myTask) => myTask.status === 'Completed');

console.log(completedTask);

You can execute the code here.

Now if I want to just print the description instead of everything, we can use another Arrow Function to do that like below

const myTasks = [{
  description: "Write Blog Post",
  status: "Completed"
}, {
  description: "Study Architect Certification",
  status: "Pending"
}, {
  description: "Go for walk",
  status: "Completed"
}];

const completedTask = myTasks.filter((myTask) => myTask.status === 'Completed');
completedTask.forEach(singleTask => console.log(singleTask.description));

You can execute the code here.

Promises and Callback

Promises make it easier to manage async code. This is the perfect situation to use Arrow function. Here is the syntax

this.doSomething().then((result)=>{
  this.handleResult(result);
});

Places not to use Arrow Function

Let's consider the below object which is having one method describeMe() which is returning a String. 

const Car = {
  brand : 'Honda',
  price : 132000,
  describeMe : function(){
    return `I am ${brand} car with price ${price}`;
  }
}

console.log(Car.describeMe());

If you execute the above code, you will get undefined error while accessing brand and price. To solve that, let's use This now to bind brand and price with the Car object context. So now the code looks like -

const Car = {
  brand : 'Honda',
  price : 132000,
  describeMe : function(){
    return `I am ${this.brand} car with price ${this.price}`;
  }
}

console.log(Car.describeMe());

And this time you will see the correct message. You can execute the code here.
Now if you think of replacing describeMe function with Arrow function, it will look like below -

const Car = {
  brand : 'Honda',
  price : 132000,
  describeMe : () => `I am ${this.brand} car with price ${this.price}`
}

console.log(Car.describeMe());

But this time you will get again the undefined error. Why???
This keyword is bound to different values based on the context in which it is called. With Arrow Function, it is little different. Here This is lexically bound i.e. it uses this from the code that contains the arrow function. So Arrow Function should not be used in Object methods.

Wrapping up

Arrow function is a great addition to JavaScript language and with this for concise code can be written.

Further Reading

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6

Share:

Read More

Class-based vs Prototype-based Programming using JavaScript

Douglas Crockford described JavaScript as the world's most misunderstood language. Like many developers, when I started learning JavaScript, to me also, this was not a "proper" language. But I quickly understood that JavaScript comes with a rich system of object-oriented programming.

There are many concepts that makes JavaScript unique, but prototype model is definitely the most important one and it creates many confusions. So having a clear understanding of prototype model is very important. And in this post, I would like to explain the concept of prototype based programming in JavaScript.

The prototype based programming is a very easy to understand concept, but the source of confusion is the syntax. When a new developer looks at the JavaScript code and sees new, class or constructor it makes them think that object instantiation works the same way as other languages. But in reality, they are nothing more than syntactic sugar in JavaScript. Behind the scenes, things are working in different way. So it is very important to have a clear understanding how things works which will help you to predict their behavior.

Class Based Language

A class based language (Java, C++, C# etc.) has two important concepts:

• class - the interface which defines the properties and methods.
• entities - instantiations of the class (objects)

 An instance is exact same copy of the class, you cannot dynamically add/remove properties/methods from the instance as declared in the class.  You can definitely override them, but then it comes to inheritance. In this model, one instance belongs to one class only. Of course, those classes can also inherit from others. This is how Class Bases language works.

Note - There are some programming language like Python and Ruby which provide the way of dynamically change the attributes.

Prototype Based Language

Here we don't have the concept of classes or entities. It's only objects. An object can specify it's properties either at declaration or at runtime.

Let's see the below example:

//Property name at declaration
var student = {
  "name":"Sudipta Deb"
}

//This will throw an error as the function is not yet defined.
student.sayFullName(); 

//Let's add the function as runtime
student.sayFullName = function(){
  console.log('FullName: ' + this.name);
}

//This time it will print the fullname
student.sayFullName();

Check example here. Initially the method sayFullName() was declared, but it was added dynamically later.

Understand Prototype Object

Without classes in JavaScript, inheritance is only possible due to Prototype objects. Here are few important pointers to understand Prototype object.

• A prototype is an object which is used as template from which all new objects will get their properties.
• Any object can be used as a prototype for another object and share the properties with that object.
• The object can override the inherited methods/properties, but it will not impact the prototype.
• The prototype can change it's methods/properties or add new ones, which will impact the objects which was created from the same prototype.

So basically we create copies from one object and then all copies will move with their own life. The new object will have access to all the methods/properties of the prototype as long as they are not overridden. Even if there is any method/property being added to the prototype class after the object creation, object will still have access to those newly added method/property. Any changes in the object will not impact prototype, but any change in prototype will impact all objects. This is the core of prototype based programming. Let's understand this below example.

Vehicle Example

Let's create the hierarchy in JavaScript. 

First the Vehicle definition.

 function Vehicle(){  
  this.manufacturers = '';  
  this.year = '';  
 }  

Let's the create the two sub classes for Vehicle i.e. Bus and Car as below

//Definition of Vehicle Object
function Vehicle(){  
  this.manufacturers = '';  
  this.year = '';  
} 

//Definition of Bus Object
function Bus(){
  Vehicle.call(this);
  this.routeNumber ='';
}
Bus.prototype = Object.create(Vehicle);
Bus.prototype.constructor = Bus;

//Definition of Car Object
function Car(){
  Vehicle.call(this);
  this.type = '';
}
Car.prototype = Object.create(Vehicle);
Car.prototype.constructor = Car;

Every object in JavaScript has a __proto__ attribute which basically points to its prototype. This attribute creates the link in prototype chain. In Javascript, you add a prototypical instance as the value of the prototype property of the construction function and then override the prototype.constructor to the construction function.

So prototype property holds the parent object. When an object is created through Object.create, the passed object is meant to be the prototype of the new object. 

So now let's extend the example above and create GasolinCar and ElectricCar. 

//Definition of Vehicle Object
function Vehicle(){  
  this.manufacturers = '';  
  this.year = '';  
} 

//Definition of Bus Object
function Bus(){
  Vehicle.call(this);
  this.routeNumber ='';
}
Bus.prototype = Object.create(Vehicle);
Bus.prototype.constructor = Bus;

//Definition of Car Object
function Car(){
  Vehicle.call(this);
  this.type = '';
}
Car.prototype = Object.create(Vehicle);
Car.prototype.constructor = Car;

//Definition of Gasolin Car
function GasolinCar(){
  Car.call(this);
  this.mileage = '';
}
GasolinCar.prototype = Object.create(Car);
GasolinCar.prototype.constructor = GasolinCar;

//Definition of Electric Car
function ElectricCar(){
  Car.call(this);
  this.batteryCapacity = '';
}
ElectricCar.prototype = Object.create(Car);
ElectricCar.prototype.constructor = ElectricCar;

The new Operator

Let's start with the below example:

//Let's create new objects now
var teslaGasolinCar = new GasolinCar();
teslaGasolinCar.mileage = 12;
teslaGasolinCar.type = 'Car';
teslaGasolinCar.manufacturers = "Tesla";
teslaGasolinCar.year = 2018;
console.log('Mileage:' + teslaGasolinCar.mileage);
console.log('Type:' + teslaGasolinCar.type);
console.log('Manufacturer:' + teslaGasolinCar.manufacturers);
console.log('Year: ' + teslaGasolinCar.year);
console.log('__proto__: ');
console.log(teslaGasolinCar.__proto__);

console.log('prototype: ');

onsole.log(teslaGasolinCar.prototype);

When using the new operator to create object from a function, below things happen behind the scene:

• A generic object is created.
• The __proto__ is set to GasolinCar.prototype
• Finally GasolinCar function is called, with this representing the newly created object

Now when the above example is executed, here is the output in the console. 

Note - 

__proto__ is holding the GasolinCar.prototype, and prototype is holding Car object. This is how the inheritance is created in JavaScript.

It's important to understand that the constructor/function role is to help creating prototype chain between the newly created instance and it's parent object. After that, it is having no other job. Therefore, there is no direct link between the instance and the function/constructor. 

teslaGasolinCar instance and GasolinCar function have no direct reference to each other.

You can run this example here.

Create Multiple Objects with new Operator

You can create multiple objects with new operator, but each object will get their own property.

In the below example, I have created two objects of same type as -

//Definition of Vehicle Object
function Vehicle(){  
  this.manufacturers = '';  
  this.year = '';  
} 

//Definition of Bus Object
function Bus(){
  Vehicle.call(this);
  this.routeNumber ='';
}
Bus.prototype = Object.create(Vehicle);
Bus.prototype.constructor = Bus;

//Definition of Car Object
function Car(){
  Vehicle.call(this);
  this.type = '';
}
Car.prototype = Object.create(Vehicle);
Car.prototype.constructor = Car;

//Definition of Gasolin Car
function GasolinCar(){
  Car.call(this);
  this.mileage = '';
}
GasolinCar.prototype = Object.create(Car);
GasolinCar.prototype.constructor = GasolinCar;

//Definition of Electric Car
function ElectricCar(){
  Car.call(this);
  this.batteryCapacity = '';
}
ElectricCar.prototype = Object.create(Car);
ElectricCar.prototype.constructor = ElectricCar;

//Let's create Tesla objects
var teslaGasolinCar = new GasolinCar();
teslaGasolinCar.mileage = 12;
teslaGasolinCar.type = 'Car';
teslaGasolinCar.manufacturers = "Tesla";
teslaGasolinCar.year = 2018;
console.log('Printing Tesla Car:==>');
console.log('Mileage:' + teslaGasolinCar.mileage);
console.log('Type:' + teslaGasolinCar.type);
console.log('Manufacturer:' + teslaGasolinCar.manufacturers);
console.log('Year: ' + teslaGasolinCar.year);

//Let's create Ford objects
var fordGasolinCar = new GasolinCar();
fordGasolinCar.mileage = 11;
fordGasolinCar.type = 'Car';
fordGasolinCar.manufacturers = "Ford";
fordGasolinCar.year = 2019;
console.log('Printing Ford Car:==>');
console.log('Mileage:' + fordGasolinCar.mileage);
console.log('Type:' + fordGasolinCar.type);
console.log('Manufacturer:' + fordGasolinCar.manufacturers);
console.log('Year: ' + fordGasolinCar.year);

You can run this example here.

Conclusion

I hope you have a much clear understanding of how prototype based programming is used in JavaScript. In JavaScript, you can create objects in multiple ways, but as long as you understand the basic, it will be easy for you to understand and pick the correct way.

Thank you for your time and please feel free to provide your feedback in comments below.

Further Reading

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
• https://alistapart.com/article/prototypal-object-oriented-programming-using-javascript

Share:

Read More