Object Orientated Programming is the concept of building our own objects that we can use. Once these objects are created, we can then assign properties and methods to them.

We are going to be building a color changing app to demonstrate the concepts of building our own objects. Let's start with a basic function:

• function rgb(r, g, b) {
  • return `rgb(${r}, ${g}, ${b})`;
• }

• rgb(255, 100, 25);

Now let's create a basic function that will convert an "RGB" color to a "HEX" color:

• function hex(r, g, b) {
  • return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
• }

• hex(255, 100, 25);

Factory Functions refers to the process of building an object, with properties, and methods. Think of it as a factory building cars. The factory building the cars is our object, and the differences in the cars such as the number of doors, or the color, become our methods.

To create our Factory Function, let's start with a basic function the will accept the three rgb color numbers:

• function makeColor ( r, g, b ) {
  • // create an empty object to hold the colors
  • const color = {}
  • // add the r, g, b colors to the object
  • color.r = r;
  • color.g = g;
  • color.b = b;
• }

This creates an empty object called color, inside of our makeColor function. It then adds the r, g, and b key/value pairs to our object. The end result is an object inside of our function, that will store the data we want to process.

Now we can add our color functions from above. Because we are adding them inside of our function object, they will become methods of that object.

• // function to return RGB string Temporal Literal
• color.rgb = function() {
  • const { r, g, b } = this;
  • return `rgb(${r}, ${g}, ${b})`;
• }
• // returns HEX converted from RGB
• color.hex = function() {
  • const { r, g, b } = this;
  • return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
• };

• const black = makeColor ( 0, 0, 0 );

• black.rgb();
• or
• black.hex();

And finally we need to add one more return at the end of the function call to return the results of anf color conversions.

• return color;

So in summary, we used a Factory Function to build the makeColor object. We then added two methods to our object, color.rgb, and color.hex.

We can now define any RGB color for processing by passing in the RGB values:

• const black = makeColor ( 0, 0, 0 );

• black.rgb();
• or
• black.hex();

And here is the final code:

• JavaScript
• // create the makeColor Object
• function makeColor ( r, g, b ) {
  • // create an empty object
  • const color = {};
  • // add properties to the object
  • color.r = r;
  • color.g = g;
  • color.b = b;
  • // create the rgb method
  • color.rgb = function() {
    • const { r, g, b } = this;
    • return `rgb(${r}, ${g}, ${b})`;
  • };
  • // create the hex method
  • color.hex = function() {
    • const { r, g, b } = this;
    • return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
  • };
  • // return the results
  • return color;
• }

And we can pass in any color for processing with either of our two methods we defined rgb or hex.

• // define the color using 3 rgb values
• const anyColor = makeColor(xx, xx, xx);
• // call the object methods
• anyColor.rgb();
• or
• anyColor.hex();

*note: One other side note here. We could set default values for the makeColor function, like so:

• // define the color using 3 rgb values
• const anyColor = makeColor ( r=200, g=50, b=125 );
• // call the object methods
• anyColor.rgb();
• or
• anyColor.hex();