JavaScript-Objects

Balasubramaniam S R
3 min readNov 5, 2020

Objects are used to store keyed collections of various data and more complex entities. An object can be created with figure brackets {…} with an optional list of properties. A property is a “key: value” pair, where key is a string (also called a “property name”), and value can be anything.

Given below is an example of how an object looks.

var user= {

name: ‘John’,

age: 30

};

Here, ‘name’ and ‘age’ are called keys of the object user and ‘John’ and 30 are called the values of the object user.

We can add, remove and read files from it any time.

Property values are accessible using the dot notation:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

To remove a property, we can use delete operator:

delete user.age;

Object.create():

Let us see how Object.create() works with the help of an example.

Example:

const person = {
isHuman: false,
printIntroduction: function() {
console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
}
};

const me = Object.create(person);

me.name = ‘Matthew’; // “name” is a property set on “me”, but not on “person”
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: “My name is Matthew. Am I human? true”

Computed properties

We can use square brackets in an object literal, when creating an object. That’s called computed properties.

For instance:

let fruit = prompt("Which fruit to buy?", "apple");let bag = {
[fruit]: 5, // the name of the property is taken from the variable fruit
};
alert( bag.apple ); // 5 if fruit="apple"

Property names limitations

As we already know, a variable cannot have a name equal to one of language-reserved words like “for”, “let”, “return” etc.

But for an object property, there’s no such restriction:

// these properties are all right
let obj = {
for: 1,
let: 2,
return: 3
};
alert( obj.for + obj.let + obj.return ); // 6

There’s a minor gotcha with a special property named __proto__. We can’t set it to a non-object value:

let obj = {};
obj.__proto__ = 5; // assign a number
alert(obj.__proto__); // [object Object] - the value is an object, didn't work as intended

As we see from the code, the assignment to a primitive 5 is ignored.

Property existence test, “in” operator

A notable feature of objects in JavaScript, compared to many other languages, is that it’s possible to access any property. There will be no error if the property doesn’t exist!

Reading a non-existing property just returns undefined. So we can easily test whether the property exists:

let user = {};alert( user.noSuchProperty === undefined ); // true means "no such property"

There’s also a special operator "in" for that.

The syntax is:

"key" in object

For instance:

let user = { name: "John", age: 30 };alert( "age" in user ); // true, user.age exists
alert( "blabla" in user ); // false, user.blabla doesn't exist

The “for…in” loop

To walk over all keys of an object, there exists a special form of the loop: for..in. This is a completely different thing from the for(;;) construct that we studied before.

The syntax:

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

For instance, let’s output all properties of user:

let user = {
name: "John",
age: 30,
isAdmin: true
};
for (let key in user) {
// keys
alert( key ); // name, age, isAdmin
// values for the keys
alert( user[key] ); // John, 30, true
}

Note that all “for” constructs allow us to declare the looping variable inside the loop, like let key here.

Summary

Objects are associative arrays with several special features.

They store properties (key-value pairs), where:

  • Property keys must be strings or symbols (usually strings).
  • Values can be of any type.

To access a property, we can use:

  • The dot notation: obj.property.
  • Square brackets notation obj["property"]. Square brackets allow to take the key from a variable, like obj[varWithKey].

Additional operators:

  • To delete a property: delete obj.prop.
  • To check if a property with the given key exists: "key" in obj.
  • To iterate over an object: for (let key in obj) loop.

--

--