JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

Chapter 15. Classes, Properties, and Methods

Before you proceed on the other methods in creating objects in JavaScript, you must learn about classes. If you have prior experience with other OOP languages, you might get confused a bit in dealing with objects and classes in JavaScript.

In a nutshell, classes in JavaScript are more casually referred to object types or object constructor. But to prevent more confusion, read the next sections carefully.

More often than not, most programmers tend to associate classes with OOP. If there are classes in a language, then it is probably an OOP language. However, in JavaScript, classes or even the keyword class does not exist since it is a prototype-based language.

Note: As of June 2015, ECMAScript 6 or ES6 Harmony has been released. In this version, the keyword class has been included. Due to that, another method of defining “classes” in JavaScript is available.

However, due to it being recently released, it is still better to stick with the standard methods of creating classes. Nevertheless, if the syntax of creating classes in JavaScript is bugging you, you can go ahead with using the class keyword.

But as of now, this is not advisable. After all, not all browsers are compatible with ECMAScript 6 as of yet. Due to that, older browsers will not recognize the existence of the class keyword in your script, and that might make old browser incapable of running your scripts the way you wanted.

Prototype-based, instance-based, prototype oriented, or classless programming is a subclass of object-oriented programming. Instead of relying to user-defined classes to create objects, you can use the predefined classes or objects to create objects of your own. However, it does not mean that you cannot user-defined objects in this type of OOP.

What are classes anyway? Classes are template for objects. To make it easy to create new objects without repeating the code on how the program can construct the objects, programmers often create templates called classes.

For example, in a massive production of a toy car, a template is needed. The template is the class; the toy car that was created from that template is the object.

Of course, to create a custom object of your own, you must create a pseudo class of your own in your code. Unlike in other languages that rely on the usage of the class keyword to instantiate a class in their code, you will need to rely on creating a constructor for your class instead by using the function keyword. Here is an example:

> var ToyCar = function () {};

< undefined

> ToyCar

< function () {}

> _

To create an object using that class, you will need to use the new keyword and indicate that it will be an object under a certain class. For example:

> var RC_Car = new ToyCar

< undefined

> RC_Car

< ToyCar {}

> _

The new object will inherit all the methods and properties that were declared in the class. But this discussion will be continued after discussing about methods, properties, and the constructor.

Constructor Function and new Keyword

What is a constructor function? A constructor function can be used to define an object type or class for an object. You can declare the inherent properties and methods of an object in a constructor function. And to create an object based on a constructor, you must declare it together with the new keyword. Here is an example:

> var exObject = new Object();

< undefined

> exObject

< exObject

> _

In the example, we created an object by using the keyword new and defining the class or object type, which is Object(). It was mentioned before that JavaScript has predefined objects such as String, Array, and even Object. These same objects can also be used as constructor functions.

However, constructors like those are rarely used. After all, instead of specifying the data type for the variable, it is much faster to just assign the variable and let the browser do the hard work. JavaScript is a dynamically typed language, so it will be much more efficient.

> var exampleString = new String();

< undefined

> exampleString

< String {length: 0, [[PrimitiveValue]]: ""}

> exampleString = "Sample String";

< "Sample String"

> exampleString;

< "Sample String"

> _

This is much longer than this:

> var exampleString = "Sample String";

< undefined

> exampleString;

< "Sample String"

> _

Object Creation Using Constructor Function

To create an object using a user defined constructor function, you must declare the constructor first. For example:

> function NewClass() {}

< undefined

> NewClass

< function NewClass() {}

> var sampleObject = newClass;

< undefined

> sampleObject

< function newClass() {}

> _

Another way you can do this is to do this:

> var NewClass = function() {}

< undefined

> var sampleObject = new NewClass;

< undefined

> sampleObject

< NewClass {}

> _

Note: This example uses another method to create a function using the var keyword or statement. Basically, you are assigning a function literal to a variable in this method. This might be confusing for new JavaScript developers. You will surely find function declarations like this every now and then while checking out scripts of other websites.