Intro

One way of using JavaScript is to use a set of techniques that focuses organization around the use of objects called object-oriented programming. This approach is older than JavaScript itself. In fact, JavaScript's design as a language was shaped by object-oriented programming. Today I will break down some of the ways it is applied in JavaScript.

At its core, object-oriented programming divides programs into smaller programs (modeled with objects), each with their own localized state and logic. This keeps each piece of your program independent of each other's changes in state or logic. These pieces communicate through interfaces, logic that abstracts their functionality. Interfaces consist of public methods and properties. Contrary to public properties, private properties do not interact with anything outside it's piece.

It should be noted that JavaScript does not distinguish between the former and the latter. However, it has become customary to use underscores (_) at the beginning of property names to indicate that the property is private.

Methods are properties whose values are functions. Calling a method's property uses this to indicate a binding to its parent object.

Prototypes

Most JavaScript objects have built-in prototypes, objects used as a fallback source of properties. You can call the prototype of an object with Object.getPrototypeOf. The prototype of an empty object {} is Object.prototype--the ancestral prototype. Object prototype relations form a tree-structure, with Object.prototype at the root. It contains built-in methods that all objects have access to. Objects themselves don't necessarily have Object.prototype as their prototype. Instead, their prototypes are other objects that provide differing defaults. Functions, being objects themselves, derive from Function.prototype. Similarly arrays, also objects, derive from Array.prototype. In other words, objects contain prototypes, which contain prototypes, and so on and so forth until you reach Object.prototype.

Methods To Remember

• Object.toString returns a string representation of the object.
• Object.create creates an object with a specified prototype.

Classes

Classes are a widely used take on prototypes. Classes define methods and properties for a type of object known as an instance of a class. Classes contain constructor functions, which ensures your instances share the parent class's properties. ReactJS classes explicitly call constructors for defining properties such as this.state and this.handleChange.

Outside of React, you can use new in front of your function to make it into a constructor function. It returns an object bound to your function with this. Your constructor function contains a prototype property, which can be called.

TL:DR; Classes are constructors with a built-in prototype, and are written in a much simpler way now.

I haven't even scratched the surface of OOP. Stay tuned for part II!