JavaScript Objects Explained

An object in JavaScript is a way to put related functions and variables into one container variable. An object is a type of variable, that is a data structure. Using objects can allow you to store related data together, which can result in more organised code and better readability.

The code below shows creating an object called ‘myObj’. The contents of an object is enclosed within curly brackets ‘{…}’. Within the contents of the object there are two other features, a String variable and a function. Usually within JavaScript the assigning of a variable is separated by a single equals ‘=’ symbol. However, within JavaScript objects the assigning of variables is separated by a single colon ‘:’ symbol.

Within the object below there is one String called ‘name’ and a function called ‘multiply’ that takes two parameters and return the result of those two parameters multiplied together. The last two lines in the code snippet below shows how to access the variable and function within the object. A dot ‘.’ separator is used between the variable name and the name of the thing you wish to access. The first log statement will print the string value ‘John Doe’ and the other log statement will print the number 8, as that is the return result of the multiply function given the parameters.

The above implementation of an object in JavaScript only gives one instance of a object. If you wanted the same multiply function in a different object you would have to re-write it. This is called code duplication and can lead to unmaintainable code. Within JavaScript functions are first class objects. This means we can create a function and treat it as a class, similar to other object oriented programming languages.

Below is a function called Person that has two fields and one method. The first field is created using the ‘var’ keyword, the other variable and function is created using the ‘this’ prefix. The ‘this’ keyword in JavaScript refers to the function, or the object, and assigns the variable or function to the public scope of that function or object. Essentially, using the ‘var’ keyword makes a variable private, and therefore not accessible outside the object, and using the ‘this’ prefix makes the variable or function public and therefore accessible outside the function or object.

Then we can use the ‘new’ keyword to create a new instance of the Person object. A instance of an object is similar to taking the first example of an object and re-writing it, without actually having to re-write the code manually. This means we could create multiple people variable using the ‘new’ keyword and the Person function and each instance could have their own names, ages, etc. The first two log statements shows how to access the public field and function from the object. The last log statement will not work, it will print ‘undefined’, this is because the name field is private as it uses the ‘var’ keyword rather than the ‘this’ prefix when declared.

Functions in JavaScript can also take parameters, which means we can pass different values to each instance of an object. The below functional object is called Person and takes on variable as a parameter called ‘n’. The ‘n’ variable is then assigned to the internal private variable called ‘name’. This means whatever value is passed to the Person function will be assigned the the internal variable ‘name’. There is then a public method that return the internal private field ‘name’. This function can then be used to create a new instance of a Person with the name of ‘Bob’. The name of the new person is passed to the function when initialised using the ‘new’ keyword. The ‘getName()’ function will then return the value of ‘Bob’. However, directly accessing the ‘name’ field will result in ‘undefined’ as it is private.

Objects, classes, and instances can be used to reduce code duplication and organise code into related sections and modules. The concept of instances of objects can be quite difficult to understand. Classes can be though of as the blueprint used to create new objects, the blueprint does nothing by itself but is used as a basis to create code that does do something. You could rewrite all the code manually, and create explicit instances of each object as shown in the first example, but that would take more time and become harder to maintain if you had to change something internal to each object.

In object oriented programming the creation of an object usually starts in one function, this is called a constructor function as it’s job is to create the the new instance and set everything up. Within JavaScript the function itself, such as the Person function, can be though of as the constructor function, as that is used to setup the new instance. Constructor functions can take parameters, such as the ‘n’ variable, to initilise internal variables and input values into the blueprint.

Leave a Reply