Javascript Objects

Defining JavaScript Objects

Generally, JavaScript is known as an Object Oriented Programming language. Hence, in JavaScript, objects are the most important data types and forms. They are entirely different from primitive data types in JavaScript. As it was mentioned in the the chapter “Data types”, there are seven data types in JavaScript, six of which are called “primitive” as their values include a single thing ( it can be a number, a string, etc.).

Unlike data types, we use objects for storing keyed collections of different data and more complicated entities. In JavaScript, objects are included in all aspects of the language, so you need to learn them as soon as you start to study the language.

Objects are created with figure brackets {…} and should have a list of properties. Property is known as a “key: value”, in which key or property name is a string and value can be whatever.

You can create an empty object running one of the following syntaxes:

let user = new Object(); // "object constructor" syntax
let user = {}; // "object literal" syntax

As a rule, figure brackets {…} are used. This declaration is called object literal.

Properties and Literals

You can instantly input properties in that brackets as pairs of “key: value”, like this:

w3docs logo Javascript create object
let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; console.log(site);

site has one property : the name "name" and the value "W3Docs".

Property values can be accessed using dot notation, as follows:

w3docs logo Javascript get property values of the object
let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; // get property values of the object: console.log(; // W3Docs

It can have any type of value. For example:

w3docs logo Javascript object add a property
let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" }; site.haveAdmin = true; console.log(site);

delete operator is used is used for deleting a property. For instance:

w3docs logo Javascript object delete a property
let site = { // an object name: "W3Docs", // by key "name" store value "W3Docs" haveAdmin: true }; delete; console.log(site);

Multiword property names can also be used. But they need to be quoted like this:

w3docs logo Javascript object multiword a property
let user = { site: "W3Docs", "teaches JS": true // multiword property name must be quoted }; console.log(user);

End the last property of the list with a comma:

w3docs logo Javascript objects
let site = { name: "W3Docs", haveAdmin: true, } console.log(site);

Square Brackets

The dot access doesn’t operate for multiword properties. Here is an example:

// this would give a syntax error
site.teaches JS = true

The dot needs the key for being a valid variable identifier. It means no limitations, such as spaces, etc.

You can use an alternative square bracket notation. It will operate with any string. For instance:

w3docs logo Javascript objects with square bracket
let site = {}; // set site["teaches JS"] = true; // get console.log(site["teaches JS"]); // true // delete delete site["teaches JS"]; console.log(site);

With the help of the square brackets, you can keep the property name as a result of any expression like this:

w3docs logo Javascript objects
let site = {}; let key = "teaches JS"; // same as site["teaches JS"] = true; site[key] = true; console.log(site);

In this case, the variable key can either be measured at run time or lean on the user input. Then you can use it for accessing the property as follows:

w3docs logo Javascript object properties
let site = { name: "W3Docs", }; let key = prompt("What do you want to know about the site?", "name"); console.log(site[key]); // If enter "name", you will see W3Docs

Note that you can’t use the dot notation similarly:

w3docs logo Javascript objects can’t use the dot notation
let site = { name: "W3Docs" }; let key = "name"; console.log(site.key) // undefined

Computed Properties

Square brackets are also used in an object literal. It is known as computed properties.

Here is an example:

w3docs logo Javascript the object's property name is taken from the variable
let car = prompt("Which car do you like?", "bmw"); let color = { [car]: "white", // the property's name is taken from the variable car }; console.log(; // white, if car="bmw"

You can also use more complicated expressions in square brackets, like this:

w3docs logo Javascript object's more complicated expressions in square brackets
let car = 'bmw'; let carColor = { [car + 'Color']: 'white' // carColor.bmwColor = 'white' }; console.log(carColor.bmwColor); // white

So, when the name of the property is simple and known, you can use dots. And when you need something more complicated, then turn to square brackets.

Shorthand for Property Value

In real code, existing variables are often used as property name values.

Here is an example:

w3docs logo Javascript object's property name values
function makeCar(name, model) { return { name: name, model: model, // ...other properties }; } let car = makeCar("BMW", "M5"); console.log(; // BMW
function makeCar(name, model) {
  return {
    name, // same as name: name
    model // same as model: model
    // ...

Both normal properties and shorthands can be used in the framework of the same project. It will look like this:

w3docs logo Javascript objects
let car = { name, // same as name:name model: "M5" }; console.log(car);

The “” loop

The “” loop is a unique form of a loop. It’s totally different from the for(;;).

The syntax is the following:

for (key in object) {
  // executes the body for each key among object properties

Let’s have a look at an example, where all properties of car are output:

w3docs logo Javascript objects for in loop
let car = { name: "Mercedes", model: "C-Class Cabriolet", toDrive: true }; for (let key in car) { // keys console.log(key); // name, model, toDrive // values for the keys console.log(car[key]); // Mercedes, C-Class Cabriolet, true }

Take into account that all the constructs of “for” gives an opportunity to declare the looping variable in the loop. For example, let key in the example given above. Another variable name can also be used instead of the key.

Checking Existence

One of the most significant advantages of objects is that it gives access to any property. No error will occur, in case the property doesn’t exist. If you access a non-existing property, you will be returned to undefined. It gives a unique opportunity of checking the property exists or not:

w3docs logo Javascript objects property is undefined
let car = {}; console.log(car.noSuchProperty === undefined); // true means "no such property"

You can use a unique operator "in" as well for checking a property existence. To run it, use the following syntax:

"key" in object

Copy by Reference

One of the principal differences objects via primitives is that they can be stored and copied by reference.

You can assign/copy primitive values (strings, numbers, booleans) as an entire value. Just look at this example:

w3docs logo Javascript primitive copy by value
let message = "Welcome to W3Docs!"; let phrase = message; console.log(phrase);

In consequence, you will have two independent variables; each of them will store the string “Welcome to W3Docs!”.

Objects don’t work like that.

A variable will store not the object but its “address in memory”. In other words, it stores just a reference to it.

For instance:

w3docs logo Javascript object
let car = { name: "BMW" }; console.log(car);

Where the object is in the memory, and the variable car contains a reference to it. Anytime you copy an object variable, you duplicate the reference, but the object is not copied.

For example:

w3docs logo Javascript copy an object variable by reference
let car = { name: "BMW" }; let sportCar = car; // copy the reference console.log(sportCar);

Comparing by Reference

In JavaScript, two objects can be considered equal only in case they are the same object.

For example, two variables are equal when they reference the same object:

w3docs logo Javascript objects comparing
let obj1 = {}; let obj2 = obj1; // copy the reference console.log(obj1 == obj2); // true, both variables reference the same object console.log(obj1 === obj2); // true

In the following case, the two independent objects can’t be considered equal, even though both of them are empty:

w3docs logo Javascript objects comparing
let obj1 = {}; let obj2 = {}; // two independent objects console.log(obj1 == obj2); // false

Const object

An object that is proclaimed const can be changed. Here is an example:

w3docs logo Javascript const objects
const car = { name: "BMW" }; car.model = "M5"; // (*) console.log(car.model); // M5

You may think that the (*) will give an error, but there is no error here. You will wonder why. The reason is that const can fix only value of car. It will cause an error only while trying to set car to something else like this:

w3docs logo Javascript const objects
const car = { name: "BMW" }; // Error (can't reassign car) car = { name: "Mercedes" }; console.log(car);

Clone and Merge, Object.assign

To copy an object variable means to create another reference to the same object.

But what to do when you need to duplicate the object?

Of course, you can clone it, but it is not an easy job, as JavaScript doesn’t have a built-in method. So, whenever you need to do so, create a new object replicating its structure and iterating over the properties and copy them on the primitive level. The example is as follows:

w3docs logo Javascript objects clone
let car = { name: "BMW", model: "M5" }; let cloneObj = {}; // the new empty object // start copying all properties of the car into it for (let key in car) { cloneObj[key] = car[key]; } // now clone is a fully independent clone = "BMW"; // changed the data in it console.log(; // still BMW in the original object

The Object.assign method is used for that, as well. You just need to use the following syntax:

Object.assign(dest, [src1, src2, src3...])

It can also be used for merging several objects:

w3docs logo Javascript objects merging
let car = { name: "BMW" }; let resolve1 = { canDrive: true }; let resolve2 = { canChange: true }; // duplicates overall properties from resolve 1 and resolve2 into car Object.assign(car, resolve1, resolve2); // now car = { name: "BMW", canDrive: true, canChange: true } console.log(car);

In JavaScript, objects are much more powerful than it can seem from the first sight. This is an extensive topic, and you will learn more about it in the next chapters.

Do you find this helpful?