Object Oriented

Visibility

JavaScript

 

Visibility

ECMAScript 5
function Person(name, id) {
  // public property
  this.name = name;
  
  // private property
  var person_id = id;

  // public method
  this.info = function() {
    debug.call(this);
  }
  
  // private method
  var debug = function() {
    console.log('person_id: ' + person_id);
  }
}

There are no public, private keywords or any native features for visibility in JavaScript like Java.

Developers have come up with different creative ways to mimic them, and each of them has their own pros and cons.

 

Public Property

ECMAScript 2015
class Person {
  
  constructor(name) {
    this.name = name;
  }
  
}

There are no public, private keywords or any native features for visibility in JavaScript like Java.

Properties set on JavaScript objects are all public, and can be accessed externally or in inherited objects through prototype chain.

var person1 = new Person('Bob');
console.log(person1.name);  // Bob
 

Public Property

ECMAScript 5
function Person(name) {
  
  this.name = name;
  
}

This example is an identical ES5 version of the previous card.

 

Public Method

ECMAScript 2015
class Person {
  // ...
  
  greet() {
    console.log('Hi!');
  }
}

Method greet() here is defined on the prototype of the Class (Function Constructor) therefore it can be publicly access externally or in inherited objects through prototype chain.

var person1 = new Person('Bob');
person1.greet();  // Hi!
 

Public Method

ECMAScript 5
function Person(name) {
  // ...
}

Person.prototype.greet = function() {
  console.log('Hi!')
}

This example is an identical ES5 version of the previous card.

 

Private property

ECMAScript 2015
class Person {
 
  constructor(id) {
    var person_id = id;
    
    this.getId = function(){ return person_id; }
    this.setId = function(id){ person_id = id; }
  }
  
}

There is no native support for private properties in JavaScript.

Developers have come up with different creative ways to mimic them, and each of them has their own pros and cons.

Here we're defining a private variable person_id and we are exposing it through getter, setter functions.

var person1 = new Person(100);
person1.setId(101);
var id = person1.getId();   // 101

The problem with this approach is that the setter, getters are being defined everytime we instantiate new Person.

 

Private Property

ECMAScript 5
function Person(id) {
  var person_id = id;
  
  this.getId = function(){ return person_id; }
  this.setId = function(id){ person_id = id }
}

This example is an identical ES5 version of the previous card.

 

Private Method

ECMAScript 2015
class Person {
  
  constructor(id) {
    var person_id = id;
    
    var debug = function() {
      console.log('person_id: ' + person_id);
    }
    
    this.info = function() {
      debug.call(this);
    }
  }
  
}

There is no native support for private methods in JavaScript.

Developers have come up with different creative ways to mimic them, and each of them has their own pros and cons.

Here we're defining a private method debug().

var person1 = new Person(100);
person1.info();   // person_id: 100

In this approach, the problems are:

  • You need to define your public methods in the function constructor to let them access to other private properties and methods.
  • Having properties and methods defined in the function constructor, increases the size of the object and the garbage collector won't collect those until the object itself gets collected.
 

Private Method

ECMAScript 5
function Person(id) {
  var person_id = id;

  var debug = function() {
    console.log('person_id: ' + person_id);
  }

  this.info = function() {
    debug.call(this);
  }
}

This example is an identical ES5 version of the previous card.