JavaScript – Objects

What are objects? How do you create them in JavaScript? How do you use them in JavaScript? This post will hopefully answer these questions.

Objects in JavaScript are, in the most simplest of terms, a collection of key value pairs. The key can be any string, or it must begin with an uppercase letter, lowercase letter, underscore ( _ ), dollar sign ( $ ), or be an integer.

You can create objects in JavaScript in a number of ways, let’s look at one common way here:

First, object literals (list of name/value pairs wrapped in curly braces):

let obj1 = {
key1: 'value1',
'key 2': 'value2'
};

// we can also add new properties to the object after it's creation:
obj1.key3 = 'value3';
obj1['key 4'] = 'value4';

// we can also create an empty object using just a set of open/closed curly braces, and add new properties the same way:
let obj2 = {};
obj2.hello = 'world';
obj2['foo bar'] = 'baz';

obj2.hello; // 'world'
obj2['foo bar']; // 'baz'


What’s going on here? We’re basically creating a new variable named “obj1”, and setting it equal to a new JavaScript object (we know this because of the open and closing curly braces). We are then creating two properties of our new object, key1, and “key2”. Notice how one is a string, and the other is not. Then we are adding another two properties to our obj1 after it’s creation by simply using the dot operator and square bracket notation.

Let’s see how we can retrieve the values of some of our properties:

obj1.key1; // 'value1'
obj1['key 2']; // 'value2'


As we can see from the above two lines of code that the key names we choose to use for our object’s properties matter. We are able to get the first property using the dot operator “.” like so: obj1.key1

However, we had to use the square bracket notation to retrieve the value stored in key ‘key 2’. What would happen if we tried to use the dot operator to retrieve ‘key 2’? Something like: obj1.key 2

You guessed it, a syntax error!

obj1.key1; // 'value1'
obj1.key 2; // syntax error


This is because we have a space in the key’s name between the word “key” and the number “2”. If we remove this space, then we are able to use the dot operator just fine.

let obj1 = {
key1: 'value1',
'key2': 'value2'
};

obj1.key1; // 'value1'
obj1.key2; // 'value2'


Let’s look at what is allowed and not allowed when using key names:

let obj1 = {
'&a': 'value1', // allowed
&a: 'value2', // not allowed
$a: 'value3', // allowed
_a: 'value4', // allowed
7a: 'value5', // not allowed
'7a': 'value6', // allowed
'7 a foo': 'value7', // allowed
*a: 'value8' // not allowed
'*a': 'value9' // allowed
ba: 'value10', // allowed
87: 'value11' // allowed
};


So basically, as stated before, key names can be anything within quotes (string), or it must begin with a lower case or upper case letter, underscore, dollar sign, or be an integer.

There is one other slight nuance to point out. If we look at the key associated with ‘value9’, it is a perfectly valid key since it is wrapped in quotes, however, it must be retrieved using the square bracket notation only. Using the dot operator will throw a syntax error. This is because it begins with a non valid character, the asterix (*). The same applies to the key associated with ‘value11’, it must be retrieved using square bracket notation as well.

So, something like this will cause an error: obj1.*a;

You must instead retrieve it like so: obj1['*a'];

Let’s look at another, less common and more verbose way to create JavaScript objects: using the “new” keyword

let obj1 = new Object();
obj1.key1 = 'value1';
obj1['key 2'] = 'value2';

obj1.key1; // 'value1'
obj1['key 2']; // 'value2'


We are creating a new variable named “obj1”, and setting it equal to a new JavaScript Object(). This is similar to the way we create an instance of an object using a constructor function. If you would like a primer, check out my post on Constructor Functions here. Then we can add properties to the object using the dot operator or square bracket notation with the same rules for key names as before.

One last thing to point out, and it is an important one. Using variables to retrieve object properties. Let’s see what I mean with an example:

let obj1 = {
'john doe': 'John Doe biography here...'
};

let keyName = 'john doe';

obj1[keyName]; // 'John Doe biography here...'


We are creating a new object just like before with one property in it. We then create a new variable equal to the same string value used as the object’s key name. We can then use this variable to retrieve the value of the object’s property.

If you would like to see one way how this can be a powerful tactic, check out my post on JavaScript Hash Maps here.

I hope this helps, and at least makes some sense. You can see a pen of it here.

Please, as always, also educate me on better ways to code in the comments.