DEV Community

loading...
Cover image for Enough JavaScript to get you Started : #12 Object Oriented JS (Theory)

Enough JavaScript to get you Started : #12 Object Oriented JS (Theory)

whoadarshpandya profile image Adarsh Pandya ・3 min read

What is Object oriented programming ?

👉 So far we've learnt functional JavaScript (process of making app using pure functions avoiding state, objects and mutability) whereas in Object oriented js we'll think in terms of real life examples which introduces us to class , objects , inheritance etc ...

👉 Object Oriented approach is used to remove Spaghetti code () ,and making it fully object dependent which groups related properties together.

👉 Removing Spaghetti code simply means removing unstructured and difficult to maintain source code.

👉 Notice that Objects we're talking about are as real as us in terms of methodology. These article covers only basics of OOP , there are much more things which are way beyond the scope of this article. for the sake of easiness we'll learn basics first.

👉 OOP is an art to knot Object's related data and function together , in terms of OOP data and functions are known as properties or methods

Problem with Functional JS

👉 Let's say you're making a racing game. so now there are many components in system which come into play but mainly there are two namely User and Cycle

👉 Now thinking in terms of functional programming , we'll need to specify lots of variables and functions here and there

👉 There'll be scattered code in terms of data (color,speed,type,gears) and functions (run,stop,reset)

How OOP solves the problem

👉 OOP ties a knot between data[properties] and functions[methods]
making it easy to work with and easy to maintain

👉 in OOP cycle is an object which have properties like color,speed,type, gears and methods like run,stop,reset but all of these in one large container


Object Oriented Paradigms

Artboard – 10.png

👉 Class : Class in OOP are blue prints or template which defines how a object will look like or how a object will behave , Classes don't hold any memory resources until their objects are made (in which case object will occupy resources).

👉 Objects : Objects are real instance of classes , which can look and behave in certain way. we can create multiple objects of same class. Objects are also known as variable of class which is defined.

👉 Constructor : A constructor in JS is a special method that is used to initialize objects. The constructor is called as an when object of a class is created. we don't need to call constructors explicitly.

👉 Member Access Specifiers : Member access specifiers are used to abstract or hide unnecessary information from end users. (a user don't need to know how cycle runs in run method 🤷‍♂️).

  1. Public : these props/method can be accessed inside as well as out side of the class.

  2. Private : these props/method can be accessed only inside class Private access specifiers are used to achieve abstraction in our program.

  3. Protected : Protected simply refers to those props/methods which can be accessed inside class and it's sub classes

👉 Inheritance : Inheritance can be defined as using methods and props of one class and using it directly in another class which in this case known as sub class or derived class from parent class. Inheritance refers to code reusability.

👉 Encapsulation : Encapsulation is an art of wrapping related properties and methods of same object (think of a capsule containing multiple drugs in it). Class basically works on Encapsulation which removes spaghetti code and makes it even more optimized


Summary

👉 So far we've learnt the basic theory of OOP concepts like classes , objects , inheritance and constructors

👉 In the next article we'll see all of these concepts in action 😀

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)

Keep Coding ❤

Discussion (0)

pic
Editor guide