Basic introduction to Object oriented programming in JavaScript

Programming languages were procedural — defined step by step instructions that the computer would follow and this worked well for a time but when you want to program something beyond a basic sequence of steps procedural languages can become difficult to manage. This is where object-oriented programming comes in.

Object-oriented programming collects information into single entities called objects.
In programming each physical thing in the world can be represented as an object. An object can be anything; a car, person, house. It’s a thing or idea that you want to model in your program.

Object-oriented programming makes it easier to organize data and code in a way that’s more versatile for larger project. Classes are like pre-objects; blue prints for creating an object similar to the blue print of a house.
Each object is a collection of data that’s treated as a single entity. And within those objects are data — both variables and methods.

Objects consists of characteristics (properties) and Action (methods)

Lets take a car as the object;

All cars have a colour, make, size and all this characteristics are known as the properties (the variable) of the object. Properties are represented with a name and value, ie “colour: green”. Properties hold value.

To represent this with javascript

Methods represents how people or other things interact with the object (actions). They also retrieve or update an objects property.
The actions of the car object would include; drive, reverse…

Using an object literal is the simplest way to define an object

The car object as an example we have

To access the different members of an object you use the dot notation;

The object literal method works but its not a good way to create an object and duplicate it if it has more than one method. If an object has more than one method it’s said to have behaviour.

Want to Create another car? Would have to write the entire object from scratch again
Create a 3rd Car? Rewrite the object again…
See this pattern? This is basically copy and pasting a particular code over again which is very sloppy codding and very inefficient.

To solve this issue we use the constructor function to create an object.

The constructor function involves the use of the this and new keyword
The this keyword is a reference to the object that is executing the piece of code.

Rewriting the code above

With this function creating a new car would be easy using the new keyword;

Objects in javascript are quite like objects in real life, they can have properties and things they can do (methods).
We normally use object literals or constructor functions to create objects.
Access members of an object using dot notation.
The constructor function makes use of the this and the new keyword.
The new operator creates a new instance of the object.

Related posts:

A list of ten most interesting startups that certainly worth your time at Web Summit.

Tiger certainly suits the littlest and newest member of our family. Orange and white exactly the same colour as our tom Bobbi-Raggs. Have to say its been awhile since had a little one around the…

Cholesterol is a waxy substance found in your blood. Your body needs cholesterol to build healthy cells, but high levels of cholesterol can increase your risk of heart disease. With high cholesterol…