Objects in JavaScript

Being a programmer for years at-least now, I have coded in enough programming languages that I could generalise and perhaps conclude fundamentals of a programming languages – Entities(objects, variables), Functions, Control flow(loops). These three are sort of fundamental components of any programming langauge.

In JavaScript as well, Objects are quite fundamental and are made of pairs of properties, values where property is a string. Or it could also be said that JavaScript objects are just collection of properties mapped to values(Properties, Values pairs).

objects in JavaScript, property value pairs JavaScript objects
JavaScript Objects

Here are some of features of JavaScript objects –

  1. Objects in JavaScript are dynamic meaning properties/values can be added or deleted from these.
  2. JavaScript Objects are mutable.
  3. Multiple variables could point to same JavaScript Object in the code.
  4. JavaScript’s object properties can be enumerated using for in loop.

Furthermore JavaScript object’s property does have certain attributes associated with it, these are – writable, enumerable, configurable.
• Here property’s writable attribute means whether programmer could set value for that property.
• While enumerable meaning Will this object return property name if enumerated by a JavaScript for in loop.
• Also configurable means Is property can be deleted or it’s other attributes(writable, enumerable) could be changed by programmer.

Just note that if an object have three properties then its totally fine that each property can have different set of attributes.

Type of objects in JavaScript

At basic fundamental level JavaScript’s objects can be divided into five brief categories – Native Object, Host Object, User-defined Object. Objects whose properties, values and other specifications are defined internally by JavaScript comes under category of Native Objects for example Date, whereas if JavaScript object is defined by where it’s running(meaning by run time environment) then its called host object. And for User-defined Object, as is clear from name itself these’re defined by programmers.

• Native Object
• Host Object
• User-defined JavaScript Object – Defined by programmer inside code.

Creating Objects in JavaScript

JavaScript objects are fundamental aspect of language – Object Literals, Creating Objects with new keyword, Object.create().

For information about literals in JavaScript see – JavaScript Primary Expressions Literals.

Object literals

Wrapped in curly braces these objects are comman separated list of name-value pairs encapsulating data about object. For example – { x:0, y:0 } is an object literal with two properties.
Instead of having simple syntax for an object literal you could also do more complex expressions for property as well as value. Below is an example of this –

var tesla = { x:0, y:0 };
var new_tesla = { x:tesla.x+1, y:tesla.y+1 };
new_tesla is also an Object literal but for it's property values
its dependent on tesla Object literal

JavaScript creating objects using new keyword

Constructor function used with new keyword can be used for creating objects, set prototype of new object to constructor function prototype, bind this keyword to newly created object and executes constructor function and at last return newly created object.

new keyword javascript, making objects in JavaScript with help of new keyword, javascript objects
JavaScript Object creating using new keyword

Below are some code examples of How to create JavaScript Objects using new keyword?

var o = new Object();
var a = new Array();
var d = new Date();
JavaScript’s Built in Object Constructors
var a = new Object(); // new JavaScript Object
var b = new String(); // new Javascript string object
var c = new Array(); // new JavaScript array object
var d = new Function; // new JavaScript function object
var e = new Date(); // new JavaScript Date object
var f = new Number(); // new JavaScript number object
var g = new Boolean(); // new JavaScript boolean object
vag h = new RegExp(); // new JavaScript RegExp object
Moreover despit these built in constructors you could also define your own Object constructor as well.
Built-in JavaScript Object Constructors

Defining a JavaScript Object Constructor?

An object constructor is also a JavaScript function, that’s why it can be defined in same way as a JavaScript function. Below is a code example explaining How to create a user-defined object in JavaScript

// JavaScript Object Constructor
function tesla(name, model, price, color){
	this.name = name;
	this.model = model;
	this.price = price;
	this.color = color;
}
// Making an object from JavaScript constructor using new keyword
var a_car = new tesla("My car", "Model S", 100000, "red");

// This object a_car will have four properties-values pairs
name - "My car"
model - "Model S"
price - 100000
color - "red"

• Object.create() in JavaScript

JavaScript’s Object.create() method create a new object, by using as exisiting object as it’s prototype. (Seems confusing), it’s same like having a recipe book and then making a dish by referring it moreover it can also be said that actual dish is inheriting certain properties from recipe book.

Code example of Object.create() in JavaScript

var x = { a:1, b:2 };
var y = Object.create(x);

// Here in this example object is inheriting properties from object x

Similarly objects made using Object.creat() method in JavaScript also inherits properties from it’s prototype. Let’s try to understand What is prototype in JavaScript?

What is JavaScript prototype? Completely Explained??

All objects in javascript inherits some properties from certain in built objects, these built-in objects are called Prototypes. For example – Date object inherit from Date.prototype, Array object inherits from Array.prototype.

So any Array created using Obect.create(Array.prototype) will inherit properties from Array.prototype. This chain of inheriting is often called JavaScript’s prototype chain.

Use of prototypes in JavaScript?

Prototypes allow you to easily define methods to all instances of a particular object. The beauty is that the method is applied to the prototype, so it is only stored in the memory once, but every instance of the object has access to it.

JavaScript’s Prototype inheritance diagram

JavaScript prototype chain diagram, javascript prototype
Prototype Inheritance Chain JavaScript

Conclusion

Most JavaScript Programmers use new keyword for creating objects, but it always depend. Moreover what data object can hold, what actions can be done it is more important rather way of defining object itself. Also JavaScript does have other type of objects called Wrapper Objects, which comes into play when JS performs actions on objects. If your interested in learning about Wrapper Objects, see this article which I put up on this website couple of days back – JavaScript Wrapper Objects.

Moreover if in case your learning JavaScript Programming Language, then check out my other articles on JavaScript here – Computer Science Hub JavaScript Programming Language.

Gagan

Hi, there I'm founder of ComputerScienceHub(Started this to bring useful Computer Science information just at one place). Personally I've been doing JavaScript, Python development since 2015(Been long) - Worked upon couple of Web Development Projects, Did some Data Science stuff using Python. Nowadays primarily I work as Freelance JavaScript Developer(Web Developer) and on side-by-side managing team of Computer Science specialists at ComputerScienceHub.io

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts