Javascript functions for the Object Oriented Developer

Maybe you’ve been learning Java, C++ or maybe even python in your classes and your diving into Javascript for the first time.

While Javascript may have C like syntax, the way it handles functions is different from the average language. Let’s break some of these differences down.

Functions in Javascript can be instantiated

Much like objects in an object oriented programming language, functions in Javascript can be instantiated.

take this empty function of instance:

function Cat() {

}

We can instantiate it just as we would for a class

var whiskers = new Cat();

Like an empty class, an empty function wont do us much good. We want to be able to add more information. Lets add a private instance variable for the age of our Cat:

function Cat() {
  var age = 4;
}

We now have a private instance variable, but we would also like a way to update private instance variables using getters and setters. In object oriented languages, as class does not return its public getter and setter functions. However, in Javascript, we will need to return them. Our getters and setters will be contained inside a Javascript object. In addition, unlike other languages, we can declare functions inside other functions.

Lets take one concept at a time, and declare our getter and setter functions first:

function Cat() {
  var age = 4;

  function getAge() {
    return age
  }
  
  function setAge(newAge) {
    age = newAge
  }
}

As they currently are, our getters and setters are private functions. Some Object Oriented languages like Python do not have private functions or private variables, but other languages like Java do. To make them public, we need to return at object containing their function names:

function Cat() {
  var age = 4;

  function getAge() {
    return age
  }
  
  function setAge(newAge) {
    age = newAge
  }
  
  return {
    getAge,
    setAge
  }
}

Note that you could also add the our age variable inside the object we return to make it a public instance variable, but we’re not going to do that because our getter already retrieves our private variable.

We can create a new Cat instance and set its age.

var whiskers = new Cat();
console.log(whiskers.age); // returns undefined because its a private variable
console.log(whiskers.getAge()); // default value returns 4
whiskers.setAge(5);
console.log(whiskers.getAge()); // default value returns 5

This in functions?

You may know about the this syntax from object oriented languages, used to dictate the context of a specific instance of a class. Functions also contains a this context. We can rewrite this function using the this context:

function Cat() {
  var age = 4;

  this.getAge = function() {
    return age;
  }
  
  this.setAge = function (newAge) {
    age = newAge;
  }
}

Both styles work, but whether you choose one or the other depends on your preference or, if you’re working on updating an already existing project, the guidelines of the codebase you’re currently working with.