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. 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. 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... 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...)
Chrome Browser Console Intellisense Type pritam, hit enter. It will now show you the details of pritam object, something like this screenshot, screenshot of browser console showing pritam object 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, modifying public variable section of javascript object pritam But, as expected, we will not be able to get any private variable of that object like "name" or "roll", using dot notation, screenshot of browser console showing private variables cannot be accessed using dot notation we can easily get or set private variables using getter and setter functions... getting and setting private variables of an object using getter and setter functions
Hope you enjoyed it...

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

Comments

Popular posts from this blog

Prototypal Inheritance - Object Oriented JavaScript