object oriented programming in Javascript (part 1)

Object oriented programming, oop for short is a programming paradigm that can be used in Javascript

What is a programming paradigm

a programming paradigm is a style or way of solving a certain problem in a programming language, it defines how you think about the solution and oop is a very popular paradigm that can be used in almost any programming language including Javascript

How to design a solution using oop

in object oriented programming, just like the name implies we heavily use objects to implement the solution, we think about the different entities or logical real-world parts involved in it and store the data and logic for each entity in it's own object

Example: A restaurant app

to design a restaurant application for food ordering the oop way we break it down to it's logical entites or parts

• Customers
• Food
• Food categories
• Order
• Restaurants

(at least that's how i would define it's entities you might do it in another way but you get the point)

then we implement each object with the business logic and properties it requires

oop in Javascript

to create an object for each entity of the app we first need to create a blueprint or plan for it that contains all the props and methods that must be in the object then we create the actual object following exactly that blueprint
objects that are created from an entity blueprint are called instances of that entity

Creating the blueprint for an entity

in javascript there are 3 ways of creating a blueprint

• constructor functions
• ES6 classes
• Object.create()

Constructor functions

they are just simple Javascript functions that we call to create the actual object

Example

we will create a constructor function (blueprint) for the Customer entity mentioned in the previous example

function Customer(name, email, password, settings, cart) {
  this.name = name;
  this.email = email;
  this.password = password;
  this.settings = settings;
  this.cart = cart;
}

as you can see the function takes the necessary props to create a customer then attaches them to the customer object which is the this variable inside the function

now to create a customer from that prototype we simply do:

const customer = new Customer("Alex", "alex@gmail.com", "12", {});

now customer should be an object representing a customer in our food application having the given data

console.log(customer.name); // Alex

console.log(customer.email); // alex@gmail.com

console.log(customer.password); // 12

console.log(customer.settings); // {}

in the next post i will explain that weird new keyword used with the function call and why we use this inside the function body then we will add some methods to the Customer blueprint