Arrays and Objects (in OOP)

In this post, we first discuss Arrays in a loop and then we move on to Objects in Object Oriented JavaScript Programming.

So, there is an array as:

var input = ["js", "css"];

var config = {
    "build" : ["js", "css", "version"],
    "js" : ["core", "react", "angular"],
    "css" : ["less", "sass"]
};

var tasks = [];

getTasks(input);

function getTasks(input) {
    input.forEach(task => {
        if(config[task]) {
            getTasks(config[task]);
        }
    })
}

At this time, if we call tasks, we get ["core", "react", "angular", "less", "sass"]. If we add "version" to the variable build then the function getTasks doesn’t work and to that, we need an else condition. Hence the function now looks:

function getTasks(input) {
    input.forEach(task => {
        if(config[task]) {
            getTasks(config[task]);
        } else {
            tasks.push(task);
        }
    })
}

Now, if we call tasks, we get ["core", "react", "angular", "less", "sass", "version"].

Everything works till here. Suppose if we want to call build in the variable input, our logic fails because it just results ["js", "css", "version"] rather than ["core", "react", "angular", "less", "sass", "version"]. So, how can we achieve that? Well, one method is to loop once again in forEach method and the code goes like:

function getTasks(input) {
    input.forEach(task => {
        if(config[task]) {
            if(config[task]) {
                getTasks(config[task]);
            } else {
                tasks.push(task);
            }
        } else {
            tasks.push(task);
        }
    })
}

By looking at the code, it can be easily said that there is mess. So how can we resolve this problem with neat and clean code? Well, we have recursion for that. And that can be rewritten as:

function getTasks(input) {
    input.forEach(task => {
        if(config[task]) {
            getTasks(config[task]); //recursive function
        } else {
            tasks.push(task);
        }
    })
}

So, we are calling the same function inside so that it handles the loop without mess and you achieve the same output by calling tasks.

Next, we move on to Objects. So, what we are going to do now is, we are going to write a constructor function that takes some properties and methods. We discuss some of the techniques in the same.

var Person = function(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.getFullName = function() {
        return this.firstName + " " + this.lastName;
    };
    this.greet = function(person) {
        if(person instanceof Person) {
           return "Hello ", person.getFullName();
        } else {
            return "Hello there!!";
        }
    };
};

So to invoke the Person Object we call it as:

var person = new Person("John", "Doe");

Now, if we call person we get the Person object with all its properties.

Suppose say that you want to create the object person without new keyword. How would you do it? If we just write:

var person = Person("John", "Doe");
person.getFullName();

we get an error stating that: Property 'getFullName' of object # is not a function. The error generates because getFullName method is not on the top window. So, how do we achieve that? Here is the simple solution:

if(this === window) {
    return new Person(firstName, lastName);
}

So the total code will be:

var Person = function(firstName, lastName) {
    if(this === window) {
        return new Person(firstName, lastName);
    }
    this.firstName = firstName;
    this.lastName = lastName;
    this.getFullName = function() {
        return this.firstName + " " + this.lastName;
    };
    this.greet = function(person) {
        if(person instanceof Person) {
           return "Hello ", person.getFullName();
        } else {
            return "Hello there!!";
        }
    };
};

var person = Person("John", "Doe");
person.getFullName(); // John Doe

Everything is fine so far but still we can enhance the code because, suppose consider that a created Object doesn’t require all the properties rather it just want few properties and methods. So, instead of calling the required properties and methods, we are attaching every method and properties and this causes overhead. Therefore, we can the above code into pieces using prototype. Foe example:

Person.prototype.getFullName = function() {
    return this.firstName + " "+ this.lastName;
};

Person.prototype.greet= function(person) {
    if(person instanceof Person) {
       return "Hello ", person.getFullName();
    } else {
        return "Hello there!!";
    }
};

Can we once again redefine it? – Yes.. like this:

Object.defineProperties(Person.prototype, {
    fullName : {
        get: function() {
            return this.firstName + " " + this.lastName;
        }
    },
    greet: function(person) {
        if(person instanceof Person) {
           return "Hello ", person.getFullName();
        } else {
            return "Hello there!!";
        }
    }
});

That’s all for this post. In the upcoming posts, we discuss one logic in either JS or jQuery and will continue the second part with OOP in JS.

-By
Uma Maheswar
Helical It Solution

Best Open Source Business Intelligence Software Helical Insight is Here

A Business Intelligence Framework

Free
Download