Object Oriented Programming in Vanilla JavaScript

This translation is for beginners taking their first steps in javascript, or even programming in general.


JavaScript is a powerful object-oriented (OOP) language. But, unlike many other languages, it uses the OOP model based on prototypes, which makes its syntax unusual for many developers. In addition, JavaScript works with functions as first-class objects, which can confuse programmers who are not familiar with these concepts. You can bypass them by applying a derived language like TypeScript, which has a familiar syntax and offers additional features. But such languages ​​are still compiled into pure JavaScript, and simple knowledge of this will not help you to understand how they actually work, as well as when it is advisable to use them.

What we will discuss in this article:
')

• Namespace
• Objects
• Object literals.
• Functions constructors.
• Inheritance.

Namespace

More and more third-party libraries, frameworks and dependencies appear in the network, so the definition of the namespace is a necessity in JavaScript development if we want to avoid collisions between objects and variables in the global namespace.

Unfortunately, JS does not have built-in support for defining a namespace, but we can use objects to achieve the same result. There are many different patterns to implement, but we consider only the most common - nested namespaces.

This pattern uses an object literal to assemble the functionality into a package and give it a unique, application-specific name. We can start by creating a global object and assigning it to a variable:

var MyApp = MyApp || {}; 

Using the same technique, you can create namespaces:

 MyApp.users = MyApp.user || {}; 

Having made a container, we can use it to define methods and properties, and then apply them in our global namespace without the risk of collisions.

 MyApp.users = { //  existingUsers: [...], //  renderUsersHTML: function() { ... } }; 

You can read more about namespace definition patterns in JavaScript here: Essential JavaScript Namespacing Patterns.

Objects

If you have already written the code in JavaScript, then in one way or another used objects. JavaScript has three different types of objects:

Native Objects
Native objects are part of the language specification. They are available to us regardless of the client on which our code is executed. Examples: Array, Date and Math. Full list of native objects .

 var users = Array(); // Array —   

Host Objects
In contrast to native, host objects become available to us thanks to the clients on which our code is executed. On different clients, in most cases we can interact with different host objects. For example, if we write code for the browser, it provides us with a window, document, location, and history.

 document.body.innerHTML = 'Hello'; // document —  - 

User Objects
User objects, sometimes referred to as contributed objects, are our own objects defined during run time. There are two ways to declare your objects in JS, and we will look at them further.

Object Literals (Object Literals)
We have already touched object literals in the chapter about the definition of the namespace. Now we will explain: the object literal is a comma-separated list of name-value pairs, enclosed in braces. These literals can contain properties and methods, and like any other objects in JS can be passed to functions and returned by them. Example object literal:

 var dog = { //  breed: 'Bulldog', //  bark: function() { console.log(“Woof!”); }, }; //      dog.bark(); 

Object literals are singletons. Most often they are used to encapsulate the code and put it in a neat package to avoid collisions with variables and objects in the global scope (namespace), as well as to transfer configurations to plug-ins and objects.

Object literals are useful, but cannot be instantiated and cannot be inherited from them. If you need these features, you will have to turn to another method of creating objects in JS.

Constructor functions

In JavaScript, functions are considered objects of the first class, that is, they support the same operations that are available for other entities. In the realities of the language, this means that functions can be constructed during run time, passed as arguments, returned from other functions, and assigned to variables. Moreover, they can have their own properties and methods. This allows you to use functions as objects that can be instantiated and from which to inherit.

An example of using an object definition using a constructor function:

 function User( name, email ) { //  this.name = name; this.email = email; //  this.sayHey = function() { console.log( “Hey, I'm “ + this.name ); }; } //   var steve = new User( “Steve”, “steve@hotmail.com” ); //      steve.sayHey(); 

Creating a constructor function is similar to creating a regular expression with one exception: we use the this keyword to declare properties and methods.
Instantiating constructor functions using the new keyword is similar to instantiating an object in a traditional class-based programming language. However, there is one unobvious, at first glance, problem.

When creating new objects in JS using the new keyword, we perform a function block (function block) time after time, which causes our script to declare ANOTHER anonymous functions for each method EVERY TIME. As a result, the program consumes more memory than it should, which can seriously affect performance, depending on the size of the program.

Fortunately, there is a way to attach methods to constructor functions without contaminating the global scope.

Methods and prototypes
JavaScript is a prototypal language, that is, we can use prototypes as object templates. This will help us avoid the pitfalls with anonymous functions as our applications scale. Prototype is a special property in JavaScript that allows you to add new methods to objects.

Here is a variant of our example, rewritten using prototypes:

 function User( name, email ) { //  this.name = name; this.email = email; } //  User.prototype.sayHey = function() { console.log( “Hey, I'm “ + this.name ); } //   var steve = new User( “Steve”, “steve@hotmail.com” ); //      steve.sayHey(); 

In this example, sayHey() will be shared by all instances of the User object.

Inheritance

Prototypes are also used for inheritance within a chain of prototypes. In JS, each object has a prototype, and since the prototype is just one more object, then it also has a prototype, and so on ... until we reach the prototype with a null value - this is the last link in the chain.

When we access a method or property, JS checks whether it is specified in the object definition, and if not, it checks the prototype and looks for the definition there. If it does not find it in the prototype, it goes along the chain of prototypes until it finds it or until it reaches the end of the chain.

Here's how it works:

 //   function User( name, email, role ) { this.name = name; this.email = email; this.role = role; } User.prototype.sayHey = function() { console.log( “Hey, I'm an “ + role); } //  editor   user function Editor( name, email ) { //  Call  Constructor  User   Editor    User.call(this, name, email, "admin"); } //         User        Editor Editor.prototype = Object.create( User.prototype ); //    Editor        User var david = new Editor( "David", "matthew@medium.com" ); david.sayHey(); 

It may take some time for you to get used to prototype inheritance, but it is important to master this concept if you want to reach heights in vanilla JavaScript. Although it is often called one of the weak points of the language, the prototype model of inheritance is actually more powerful than the classical model. For example, it is not difficult to build a classical model on top of the prototype.

ECMAScript 6 has a new set of keywords that implement the classes. Although these constructs look the same as in class-based languages, they are not the same thing. JavaScript is still based on prototypes.

* * *

JavaScript has been developing for a long time, during which various practices have been introduced into it, which by modern standards should be avoided. With the advent of ES2015, the situation began to change slowly, but still many developers adhere to still adhere to the old methods that threaten the relevance of their code. Understanding and using OOP concepts in JavaScript is critical to writing robust code, and I hope this brief introduction will help you with this.