Types of JavaScript Objects: Built-in vs User-defined

In this post, I will cover the types of JavaScript objects and how as a developer you can create different types of objects. We will also cover a few code examples as we move along which will help you understand the concepts. Let’s get started

JavaScript has 2 types of objects: Built-in and User Defined.

• Built-in objects: which are provided by the JavaScript core. Things like Array, Strings, Number, Boolean, RegExp are all built-in objects
• User-defined objects: these are objects which you have created in your program or application.

Let’s jump into some details and try out some examples.

What are JavaScript Built-in Objects?

Objects that are pre-defined in the JavaScript language. JavaScript is an object-based programming language, and you will realize that everything in JavaScript is actually an object. Which itself is inheriting from other objects. For example,

You can create a JavaScript Array in 2 ways,

1. Usual way (Array Literal)

var arr = [5]; //literal or short form. this is preferred way arr.length; //1

2. By creating an instance

var arr = new Array(5); //less preferred arr.length; //5

But both the array variables are actually objects. And we can verify that

typeof arr; //"object" arr instanceOf Object; //true

Both of them have all the properties and methods of Array.

arr.length; 
arr.slice(); 
arr.splice(); 
arr.pop(); 
arr.push(); 
arr.filter(); 
arr.indexOf(); 
//and so on

All these properties and methods are defined inside the prototype property of the Array constructor function. Pls, note ES5 JavaScrit does not have classes.

For our understanding, let’s define a constructor function as a class.

Arr.prototype = { 
  length: //, 
  splice: function() {}, 
  slice: function() {}, 
  push: function() {} 
  //and so on 
}

You will also notice methods like valueOf(), toString(), hasOwnProperty() available to you. These are not native Array methods, but they are coming from the Object class/constructor function. I have explained in detail in the next section “ User-defined objects “. Have a look at that for understanding.

Similarly like Arrays, you have String, Boolean, Number, Function, RegExp, Error, etc. All these high-level constructor functions/classes provide all the utility methods and properties that are available to you when you create data variables.

Some examples below,

/* Strings */ 
var str = "hello"; 
str.split(); 
var str1 = new String("hello"); 
str1.split(); 
/* Boolean */ 
var b = true; 
var b1 = new Boolean(true); 
/* Numbers */ 
var n = 1.11; 
n.toFixed(); 
var n1 = new Number(1.11); 
n1.toFixed();

All these constructor functions inherit from the Object superclass/constructor.

Object 
  ----- Array 
  ----- Function 
  ----- Boolean 
  ----- RegExp 
  ----- String 
  ----- Error

User-defined objects

Objects that you have defined using custom constructor functions. Let’s see an example below,

//you define your constructor function 
function Employee(name, id) { 
  this.name = name; 
  this.id = id; 
} 
//extend the prototye 
Employee.prototype.getName = function() { 
  return this.name; 
} 
Employee.prototype.setID = function(ID) { 
  this.id = ID; 
} 
//now start creating employee objects 
var e1 = new Employee("John", 1234); 
var e2 = new Employee("Lenon", 3481); 
//and so on 
//now access the properties from the prototype 
e1.getName(); //"John" 
e2.setID(8888);

So your e1, e2 instances or objects can read properties from the prototype of the Employee constructor function. This is an example of prototypal inheritance.

Properties and methods added to the prototype of the constructor function can be seen by instances created from the constructor function.

But if you notice, you will have some pre-defined methods and properties in your custom created object as well.

e1.constructor; //which is a reference to Employee function e1.toString(); //"[object Object]" 
e1.valueOf(); //Employee {name: "John", id: 1234}

Where are these coming from?- They are coming from the Object superclass/super constructor. Every object or constructor function that you create inherits from Object.

If you run `Employee.prototype` in your browser console, you can see that. You will notice a semi-transparent property called __proto__. This is the secret link to the prototype of the constructor function of Employee.prototype, which is Object. Employee.prototype is an object and hence inherits from Object constructor.

Tip: Do not use __proto__ in your code, since it is not a consistent property and changes from browser to browser. Always use the prototype property.

If you do a e1. (e1 dot ) in your browser console, you will see all properties and methods available to e1 object. Have a look at the screenshot below.

All in all, every type of object in JavaScript, be it Built-in or User-defined, all of them inherit from the Object superclass/super constructor.

JavaScript is an Object-Oriented language but is prototype-based. This itself is a big subject, and I will keep it for another day.

Cheers!

Want similar tutorials to be delivered to your inbox directly? Subscribe to my email newsletter.

Originally published at https://josephkhan.me on November 9, 2019.