Alaa Badran

We all know that Javascript does not support (property or method) privacy when you write Object Oriented code. In this post, i will explain how to create private (properties and methods) in Javascript.

Lets start now to do an experiment: lets create a normal object with a property and method, and try to access them to see what we get.

Here is how to create a simple object:

// Creating an Object:
var myObject = {};

// Now setting a method and a property
myObjcet.myProperty = 10;
myObject.myMethod = function (){return 'My Method';};

Now, lets try to access them. I will use my Console on the browser:

console.log(myObject.myProperty);
// This will return 10

console.log(myObject.myMethod());
// This will return 'My Method' string

We can modify our method and property by doing this:

myObject.myProperty = 15;
myObject.myMethod = function (){return 'something else';};

This will be a problem, because we need to access our method and property.. But we don’t want them to be changed or modified.
Let’s try to write this in a different  way to make them private.

var myObject = (function (){
   // this is a private property. Cannot be accessed.
   var privateVar = 10;

   return {
      myProperty = 15,
      myMethod = function (){return 'my public method';}
   };
}());

Now, we can access “myProperty” and “my Method” as the following code:

console.log(myObject.myProperty); // 15
console.log(myObject.myMethod()); // "my public method"

But we can’t access the “privateVar” property. It can be only accessed within the Object scope.
Let’s try to get its value. We will need to write another method to do that:

//Same as previous declaration:
var myObject = (function (){
   // this is a private property. Cannot be accessed.
   var privateVar = 10;

   return {
      myProperty : 15,
      myMethod : function (){return 'my public method';},
      // Here we can get the private value
      myVar : function (){return privateVar;}
   };
}());

Now, if we tried to access all that from our Console, we will get :

console.log(myObject.privateVar);
// undefined

console.log(myObject.myVar);
// 10

There is another way to do this, but it’s not supported by all browsers (supported by Firefox, Chrome, Safari, IE9+ and somehow supported by IE8)
By using:

• Object.defineProperty() or
• Object.defineProperties()

Related posts:

How to convert HTML Forms into AJAX simply Building and Testing your JavaScript app with Yeoman Overriding Javascript in Twitter Bootstrap How to: Drag and Drop with HTML5