Fundamentals

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 assume:

Writing functions - well, you got to be really very strong in functions! Look 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":

All data-types are infinitely flexible.

All objects (references; instances) are infinitely extensible.

Objects are associative arrays.

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 is another way to implement encapsulation.

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.

Notice the use of this keyword. Does it remind you of someting? 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 a 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:

1 <html>
2 <head>
3 <title>OOPS in JavaScript- Encapsulation</code>

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 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