Prashant Bansal

Passing Objects as Argument to Class - JavaScript

2 min readWeb Development

new Point(x, y)this.x = 0; this.y = 0neither x nor y is an object?yes → this.x = x; this.y = ynotypeof x == 'object'?yes → this.x += x.x; this.y += x.ytypeof y == 'object'?yes → this.x += y.x; this.y += y.ygetPoints(): log this.x, then this.yyesnew Point(12, 23)neither argument is an object → this.x = 12; this.y = 23logs 12, then 23new Point(new Point(10,13), new Point(12,14))both arguments are objects, so the direct branch is skippedx is an object: this.x = 0 + 10 = 10, this.y = 0 + 13 = 13y is an object: this.x = 10 + 12 = 22, this.y = 13 + 14 = 27logs 22, then 27the post's console output, p (the two objects) then q (12, 23)22271223
The constructor in the post as a flow. Both coordinates start at zero; if neither argument is an object they are assigned directly, otherwise each argument that is an object has its x and y added in. That is how new Point(new Point(10,13), new Point(12,14)) comes out as (22, 27), and the console output on the right is the one the post shows.

Few days back, I struggled with a very small concept in JavaScript that required to pass an object of the same class as an argument to it. In doing so, I faced a very genuine issue on how one can pass the object as argument where as the argument is expecting a variable to initiate the respective object. I searched heavily on the Internet and couldn’t find a proper solution. So I thought of writing my own method.

The task is pretty simple, need to create a class in Javascript which when instantiated can take in variables as well as objects of the same class. To simplify, let me give you an example.

Suppose I have a class name defined as Point which simply initializes X and Y axis coordinates. Therefore, the call that I was looking to satisfy was :-

var p = new Point(10,13); // Very Simple. Initializing p with 10 as x and 13 as y.
var q = new Point(new Point(10,13), new Point(12,14)); // Exactly what I am referring to. 
p.getPoints();
q.getPoints();

point.js on GitHub Gist

The function getPoints simply prints out the value of the x and y. Lets start building the class.

function Point(x,y) {
this.x = x;
this.y = y;
}

Point.prototype.getPoints = function() {
Console.log(this.x);
Console.log(this.y);
}

point.js on GitHub Gist

There we are. We have the class built and it simply initializes the object via this. Now we need to implement the feature that says, if the passed arguments are of type Object, add their x and y points and pass it to the class variables. So getPoints can print those points. Now this is my approach and this may not be the best, but it worked for me.

function Point(x,y) {
    this.x = 0;
    this.y = 0;
    if(typeof(x) != 'object' && typeof(y)!= 'object')
      {  this.x = x;
         this.y = y;
      } else {
    if(typeof(x) == 'object') {
            this.x += x.x;
            this.y += x.y;
    }
    if(typeof(y) == 'object') {
            this.x += y.x;
            this.y += y.y;
    }
 }
}

Point.prototype.getPoints = function() {
    console.log(this.x);
    console.log(this.y);
}

point.js on GitHub Gist

I simply checked if the type of the arguments passed is object type or not. If it is of type object, handle differently and pass on the value. So if I put the following in the console -

var p = new Point(new Point(10,13), new Point(12,14));
p.getPoints();
var q = new Point(12,23);
q.getPoints();

The Output is -

22
27
12
23

Any suggestions are most welcome. Again. this may not be the best approach but It worked for me. Do comment.