Classes and Objects - Object Oriented JavaScript

... And then the skeptics went to the Ancient Coder and asked, "How can JavaScript be a great language? It doesn’t even support OOP" ... The Old One, sitting in his pose of meditation on top of Mt. Himalayas, smiled calmly and said to them, "Go, read Barick’s Blog ..."

So, to obey the Old Meditator, I am writing this blog, to give you a glimpse of JavaScript’s OOP capabilities.

Warning

We are talking about pre-ES6 world... So, no "Class" keyword... So, if you are from an OOP background, you probably know what a "Class" is. A "class" defines a category or rather a blueprint for a specific type of objects; a guideline that every object of that category must obey to be in that group. Class tells us about the structure of the object.

Actually, anyone can create a class with that special keyword, cleverly named, "Class". But what's really interesting is how we can do it in JavaScript using function. Yeah, you heard (read) it right, JavaScript mimics the functionality of a "Class" by its all powerful "function". So, let's create a "Student" class in JavaScript using "Function" and see how it is done.

Tips

Type the code below in Browser Console and compare the results. Browser console is probably the only tool you will ever need throughout your JavaScript programming career to quickly run any JS code to debug/study or just to clear a concept. Open your favorite browser in your computer (I recommend Google Chrome) and hit F12. See Console there? Here you can write and test/practice JavaScript code. Write/Copy paste the JavaScript code there and hit enter to see the results. Paste the code below in Browser console and hit enter...

Let the Code Speak

GithubBitbucket

	/* Let's define an Student Class */
	function Student(name) {
	/* "var" keyword inside a class makes a variable PRIVATE */
	var name = name;
	var roll = 0; /* Let's initialize the roll no. to 0 */
	/* Let's define a public variable */
	this.section = 'A'; /* This can be accessed directly, no getter/setter needed */
	/* prefixing "this" makes a field public */
	this.getName = function() {
	return name;
	};
	this.setRoll = function(num) {
	/* let's say if anyone tries to se a negative roll number, we prevent it... */
	if (num > 0) {
	roll = num;
	}
	};
	this.getRoll = function() {
	return roll;
	};
	}
	/* Now let's create a student */
	var pritam = new Student("Pritam Das");
	/* Create another student */
	var dan = new Student("Dan Paul");

view raw class-prototypal-inheritance.js hosted with ❤ by GitHub

In the student class above, we want "name" of a student to be set only at the time of creation of that object. So, we only define a "getter" method "getName" for the "name" property, which ensures that the "name" property cannot be modified once the student object is created.

But the roll number has both getter and setter, so that we can modify it anytime using those...

Now let's type the following in browser console and see what happens...

Chrome Console provides Intellisense

If you start typing something in Chrome console, it will suggest you probable options to help what you are looking for. Try it with the objects we just created (refer to the screenshot below for help...) Type pritam, hit enter. It will now show you the details of pritam object, something like this screenshot, See, "pritam" object has only one public property - "section". we can modify it in browser console, just like any other OOP language syntax, using our favourite dot notation, But, as expected, we will not be able to get any private variable of that object like "name" or "roll", using dot notation, we can easily get or set private variables using getter and setter functions...
Hope you enjoyed it...

Any question/suggestion/correction? Let me know in the comments below...