DEV Community

loading...
Cover image for [JavaScript] 7 OOP fundamentals you will need!

[JavaScript] 7 OOP fundamentals you will need!

Yuma-Tsushima
Hi, I am Yuma-Tsushima. Leader of the Order of the Black Knights. Programmer | Artist | CTFs | Ethical Hacker | Animator | Musician | Developer
・4 min read

Object Oriented Programming is one of the most popular ways in programming. Before OOP’s, list of instructions will be executed one by one. But in OOP’s we are dealing with Objects and how those objects interact with one another.

JavaScript supports Object Oriented Programming but not in the same way as other OOP languages(C++, PHP, Java, etc.) do.

The main difference between JavaScript and the other languages is that there are no Classes in JavaScript whereas Classes are very important for creating objects. However, there are ways through which we can simulate the Class concept in JavaScript. Another important difference is Data Hiding. There is no access specifier like (public, private and protected) in JavaScript but we can simulate the concept using the variable scope in functions.

Object Oriented Programming Concepts

  • 1) Object
  • 2) Class
  • 3) Constructor
  • 4) Inheritance
  • 5) Encapsulation
  • 6) Abstraction
  • 7) Polymorphism

Preparing the workspace

Create a new file oops.html and write this code on it. We will write all our JavaScript code on this file.

<html>
  <head>
    <title>[JavaScript] 7 OOP fundamentals you will need!</title>
  </head>
  <body>
    <script type="text/javascript">
      //Write your code here.....
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

1) Object

Any real time entity is considered as an Object. Every Object will have some properties and functions. For example, consider a person as an object, then he will have properties like name, age, etc., and functions such as walk, talk, eat, think, etc. now let us see how to create objects in JavaScript. As mentioned previously there are so many ways to create objects in JavaScript like:

//1)Creating Object through literal
var obj = {};
//2)Creating with Object.create
var obj = Object.create(null);
//3)Creating using new keyword
function Person() {}
var obj = new Person();
Enter fullscreen mode Exit fullscreen mode

We can use any of the above ways to create Object.

2) Class

As I said earlier there are no classes in JavaScript as it is Prototype based language. But we can simulate the class concept using JavaScript functions.

function Person() {
  //Properties
  this.name = "Ben";
  this.age = "18";
  //functions
  this.sayHi = function() {
    return this.name + " Says Hi";
  };
}
//Creating person instance
var p = new Person();
alert(p.sayHi());
Enter fullscreen mode Exit fullscreen mode

3) Constructor

Actually, Constructor is a concept that comes under Classes. The constructor is used to assign values to the properties of the Class while creating an object using the new operator. In above code we have used name and age as properties for Person class, now we will assign values while creating new objects for Person class as below.

function Person(name, age) {
  //Assigning values through constructor
  this.name = name;
  this.age = age;
  //functions
  this.sayHi = function() {
    return this.name + " Says Hi";
  };
}
//Creating person instance
var p = new Person("Ben", 18);
alert(p.sayHi());
//Creating Second person instance
var p = new Person("Mel", 21);
alert(p.sayHi());
Enter fullscreen mode Exit fullscreen mode

4) Inheritance

Inheritance is a process of getting the properties and function of one class to other class. For example, let’s consider Student Class, here the Student also has the properties of name and age which have been used in Person class. So it’s much better to acquiring the properties of the Person instead of re-creating the properties. Now let’s see how we can do the inheritance concept in JavaScript.

function Student() {}
//1)Prototype based Inhertance
Student.prototype = new Person();
//2)Inhertance throught Object.create
Student.prototype = Object.create(Person);
var stobj = new Student();
alert(stobj.sayHi());
Enter fullscreen mode Exit fullscreen mode

We can do inheritance in above two ways.

5) Encapsulation

Before going on to Encapsulation and Abstraction first we need to know what Data Hiding is and how can we achieve it in JavaScript. Date hiding is protecting the data from accessing it outside the scope. For example, In Person class, we have Date of Birth (DOB) properties which should be protected. Let’s see how to do it.

function Person() {
  //this is private variable
  var dob = "17/06/2002";
  //public properties and functions
  return {
    age: "18",
    name: "Ben",
    getDob: function() {
      return dob;
    }
  };
}
var pobj = new Person();
//this will get undefined
//because it is private to Person
console.log(pobj.dob);
//Will get dob value we using public
//funtion to get private data
console.log(pobj.getDob());
Enter fullscreen mode Exit fullscreen mode

Wrapping up of public and private data into a single data unit is called Encapsulation. The above example is the one that best suites Encapsulation.

6) Abstraction

Abstraction means hiding the inner implementation details and showing only outer details. To understand Abstraction we need to understand Abstract and Interface concepts from Java. But we don’t have any direct Abstract or Interface in JS. Ok! now in order to understand abstraction in JavaScript lets takes an example from JavaScript library Jquery. In Jquery we will use

$("#ele");
Enter fullscreen mode Exit fullscreen mode

to select select an element with id ele on a web page. Actually this code calls negative JavaScript code

document.getElementById("ele");
Enter fullscreen mode Exit fullscreen mode

But we don’t need to know that we can happy use the $("#ele") without knowing the inner details of the implementation.

7) Polymorphism

The word Polymorphism in OOPs means having more than one form. In JavaScript an Object, Property, Method can have more than one form. Polymorphism is a very cool feature for dynamic binding or late binding.

function Person() {
  this.sayHI = function() {};
}
//This will create Student Class
function Student() {}
Student.prototype = new Person();
Student.prototype.sayHI = function(l) {
  return "Hi! I am a Student";
};
//This will create Teacher Object
function Teacher() {}
Teacher.prototype = new Person();
Teacher.prototype.sayHI = function() {
  return "Hi! I am a Teacher";
};
var sObj = new Student();
//This will check if the student
//object is instance of Person or not
//if not it won't execute our alert code.
if (sObj instanceof Person) {
  alert("Hurry! JavaScript supports OOps");
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

JavaScript supports Object Oriented Programming(OOP)Concepts. But it may not be the direct way. We need to create some simulation for some concepts.

Credits

Welcome to Yuma-Tsushima's Github page!

Visitor count

Support Discord Discord SoundCloud


About Myself

Hello, my name is Yuma-Tsushima (frequently shortened to Yuma). I am an ambitious coder, and I enjoy coding in JavaScript (mainly). I also love making websites using HTML, CSS and (of course) JS! I started programming (self taught) at the age of 13. Originally, I came from the creative field ; I draw/sing/animate/make music.


Talents and Hobbies

I love drawing (I have been drawing all of my life). I play strategy games, I code and I do CTFs! I am also good at animation, making AMVs and image editing. My favourite game is Mindustry, followed by Flow Free and Sudoku. I love watching anime (I love Code Geass - I relate to Lelouch a lot) and I aspire to create my own anime!

Drawing Music Digital Artwork ICT Electronics Desgins Web dev Strategy

Check out my work!:
❯ Soundcloud : 0c7av3h4ck5
❯ Discord : {CyberArtByte}
❯ Artwork : AcceleratorArts07

Recent Medium

Follow me!

Discord Servers!!

Bounty Hunters: An amazing bug hunting community full of developers and exploiters!!!

CyberArtByte: My server full of bling and joy!!

New Soundcloud Track!!

Discussion (17)

Collapse
michaeljota profile image
Michael De Abreu

Although, legacy patterns should be studied, I think is important to understand that modern Javascript does have full support for almost all of the OOP patterns that you are using, and you should at least mention that in your post, so newcomers know there is a modern alternative, and it is the preferred way to do it.

Collapse
yumatsushima07 profile image
Yuma-Tsushima Author

Good point :)
I will add it on.

Collapse
yumatsushima07 profile image
Yuma-Tsushima Author

Good point.
I will add it on.

Collapse
jwp profile image
John Peters
Collapse
yumatsushima07 profile image
Yuma-Tsushima Author

Damn that's my 3 am mistake .
Thanks for catching me out.
I will add that on too.

Collapse
urielsouza29 profile image
Uriel dos Santos Souza
Collapse
yumatsushima07 profile image
Yuma-Tsushima Author

ah i didnt know that

Collapse
urielsouza29 profile image
Uriel dos Santos Souza

I prefer Functional :)

Thread Thread
ericdecol profile image
punk croc

i would say to stick to functional too, OOP just for case studies

Thread Thread
yumatsushima07 profile image
Yuma-Tsushima Author

hummm yeah !!

Thread Thread
urielsouza29 profile image
Uriel dos Santos Souza • Edited

TypeScript force OOP
TC39 force OOP, class, static and private
forcing oop like JAVA and C# (help programmers who don't want to learn JS rsrsrsrs)

More functional JS better, TC39

Thread Thread
yumatsushima07 profile image
Yuma-Tsushima Author

Ahhh ..

Collapse
ericdecol profile image
punk croc • Edited

Please try not to use constructors, since they are badly scalable, just imagine if you object grows and suddently you have to adjust you constructor in 18 different places. Rather use the BUILDER pattern for that, nothing will break changes only where needed. Just as when passing multiple arguments through parameter, build an object that contains those (and in the future, more or less) variables.

Collapse
yumatsushima07 profile image
Yuma-Tsushima Author

Good point!!

Collapse
mistycoruscate profile image
mistycoruscate

I will keep your suggestions in mind while writing the next post.

Collapse
yumatsushima07 profile image
Yuma-Tsushima Author

What's your next post about?

Collapse
efpage profile image
Eckehard

As I said earlier there are no classes in JavaScript as it is Prototype based language.

Maybe you should update your post to ES6?