Click here to Skip to main content
15,867,939 members
Articles / Programming Languages / Javascript

Exploring OOPS - JavaScript Style: Part 1 - Encapsulation

Rate me:
Please Sign up or sign in to vote.
2.77/5 (13 votes)
2 Aug 2008BSD3 min read 57.4K   125   18   9
This article starts discussion on OOPS implementation in JavaScript.

Introduction

This article, the first part in the series of three articles, starts discussion on OOPS implementation in JavaScript.

Note: This article is an adaptation (may be a mirror) of the article originally posted at Edujini™ Eduzine™ here.

All the three articles of the series are listed below:

Fundamentals

Object Oriented Programming - as defined by Grady Booch - stands on three pillars:

  • Encapsulation
  • Inheritance
  • Polymorphism

Here, we explore how all three - Yes! All Three Pillars of OOPS - are implemented in JavaScript.

Getting Started

To get started, it is assumed that you are already familiar with basic JavaScript. If not, you can look on the web for some tutorials on JavaScript 101 tutorials or the like. To be specific, the following fundamentals are assumed:

  • Declaring variables - var keyword
  • Basic data types supported - Object, Array, Boolean, Number, String and Function
  • Writing functions - well, you got to be really very strong in functions! Look script:void(0)" href="javascript:void(0)">here for all insights about JavaScript functions

4-Sutras While Working With JavaScript

While working with JavaScript, always keep in mind the following, as Gaurav Vaish (yes, that's me) calls them, "4-Sutras":

  1. All data-types are infinitely flexible
  2. All objects (references; instances) are infinitely extensible
  3. Objects are associative arrays
  4. It's all about functions

"In JavaScript, whenever you run into any problem related to implementation or structuring of the code, these four sutras will help you out", I say.

Encapsulation

Encapsulation - in simplest terms - can be defined as putting the related items together. Structures in C is a way to implement encapsulation. Classes in C++, Java, C#, etc. are another way to implement encapsulation.

Let us see how encapsulation is implemented in JavaScript.

Welcome, Functions!

Gaurav's 4th Sutra comes into action here - "It's all about functions".

Let us define a data-type UserProfile that encapsulates the following three items:

  1. username: Property to hold the username of the user
  2. password: Property to hold the password of the user
  3. authenticate: Method to authenticate the user. Returns true if successful, false otherwise.

Let us implement the UserProfile with a constructor that takes the two properties as parameters and initializes itself. Create a file UserProfile.js (strictly speaking, the filename doesn't really matter) with the following code:

JavaScript
/**
 * (C) 2008, Gaurav Vaish, Edujini Labs Pvt Ltd
 * http://www.edujini-labs.com
 */

function UserProfile(username, password)
{
  this.username = username;
  this.password = password;

  this.authenticate = function()
  {
    if(this.username == 'gvaish' && this.password == 'edujini')
    {
      return true;
    }
    return false;
  }
}

Notice the use of this keyword. Does it remind you of something? Yes! You got it right... function is the way to implement the concept of class, or to speak - encapsulation.

Test Case

Ok... so, how do we use this new data-type that we just defined? Let's create an HTML file that will serve as the playground for our case-studies around the UserProfile. Create a file UserProfile.html (again, filename is not important at all) with the following content:

HTML
 1 <html>
 2   <head>
 3     <title>OOPS in JavaScript- Encapsulation</code>
 4     <script language="'javascript'" type='text/javascript' src='UserProfile.js'></script>
 5     <script language="'javascript'" type='text/javascript'>
 6       /**
 7        * (C) 2008, Gaurav Vaish, Edujini Labs Pvt Ltd
 8        * http://www.mastergaurav.com
 9        * http://eduzine.edujini-labs.com
10        */
11       function validateUser()
12       {
13         var uname = document.getElementById('u').value;
14         var pwd = document.getElementById('p').value;
15
16         var e = document.getElementById('result');
17
18         var u = new UserProfile(uname, pwd);
19         var result = u.authenticate();
20         e.innerHTML = 'Result: ' + result;
21       }
22     </script>
23   </head>
24   <body>
25
26   Username: <input type='text' name='u' id='u' />
27   <br/>
28   Password: <input type='password' name='p' id='p' />
29   <br/>
30
31   <button onclick='validateUser(); return false;'>Login</button>
32
33   <div id='result'></div>
34
35   </body>
36 </html>

Analysis

Let's just analyze the code that we just wrote.

We have designed a simple form comprising of inputs for username and password, and a button to trigger validation.

The function validateUser defined at line 11-21 triggers the validation by extracting the values of username and password (lines 13-14).

At line 18, UserProfile is instantiated. Notice a very important thing - the function definition has been used as the constructor. Yes! That's where functions are so important in JavaScript. The functions in JavaScript are higher order functions (similar to that in Smalltalk), that can be used to retain the state.

At line 19, we invoke the method authenticate that returns a value true or false depending upon what we enter in the form.

So, go ahead and try out with different combinations of username and password, and checkout the results!

Summary

In this article, we learnt how encapsulation is implemented in JavaScript. To summarize, we explored the following:

  • Encapsulation in JavaScript
  • Use of this keyword within the type definition
  • Defining properties and methods in JavaScript

Moving Forward...

The next step is to look at the next articles on Inheritance and Polymorphism in JavaScript.

License

This article, along with any associated source code and files, is licensed under The BSD License


Written By
Architect
United States United States

Gaurav lives in Silicon Valley.


His technical strength lies in having deep understanding of not one or two but bunch of enterprise frameworks.


Lately, he is working on an MVC framework implementation for Android put in open domain at http://sf.net/projects/android-mvc


Today, he is an independent guy:


  • He is a programming language independent guy, well almost. He is proficient in C, C++, Java, C#, VB.Net, C++.Net, JavaScript, PHP, Tcl, Python, Ruby
  • He is an OS independent guy, well almost. Has worked and developed at length on HP-UX, Linux (Redhat / Mandrake), Macintosh (9, 10.x), Windows (NT, 2000, 2003, XP, Vista), Solaris (8, 9, 10); and mobile platforms Android, iPhone, Blackberry
  • He is a target independent guy, well almost. Has worked on thick clients (mainly desktops) as well as thin clients (mainly alternative platforms - Symbian, PalmOS, WinCE, WinXP Embedded, Linux Embedded, Android, iPhone, Blackberry)



Today, his thrust areas are Service Oriented Architecture (implementation expert in Java, .Net and PHP; integration with Mainframe and other legacy environments), Mobile Technologies and RFID.



He holds a Bachelor's Degree (B. Tech.) from IIT Kanpur www.iitk.ac.in. His major was in EE with specialization in DSP (SSP).



His hobby is listening music, reading books (no, he can't read novels), photography and travelling.



Should you wish to talk to him, you can drop him a mail at gaurav[dot]vaish[at]gmail[dot]com. He generally responds within 24-48 hrs unless there is a compelling reason.



And yeah... here's his personal website:
http://www.m10v.com



Smile | :)


Comments and Discussions

 
GeneralScary Pin
Todd Smith19-Jun-08 7:41
Todd Smith19-Jun-08 7:41 
GeneralRe: Scary Pin
mastergaurav19-Jun-08 7:57
mastergaurav19-Jun-08 7:57 
GeneralIsn't this just a duplicate Pin
Jim Crafton19-Jun-08 6:34
Jim Crafton19-Jun-08 6:34 
GeneralRe: Isn't this just a duplicate Pin
mastergaurav19-Jun-08 6:36
mastergaurav19-Jun-08 6:36 
GeneralRe: Isn't this just a duplicate Pin
Jim Crafton19-Jun-08 6:39
Jim Crafton19-Jun-08 6:39 
QuestionOOPS? Pin
PIEBALDconsult19-Jun-08 6:15
mvePIEBALDconsult19-Jun-08 6:15 
AnswerRe: OOPS? Pin
mastergaurav19-Jun-08 6:25
mastergaurav19-Jun-08 6:25 
GeneralRe: OOPS? Pin
uXuf24-Jun-08 17:30
uXuf24-Jun-08 17:30 
GeneralRe: OOPS? Pin
mastergaurav24-Jun-08 20:36
mastergaurav24-Jun-08 20:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.