Objects vs non-objects in JavaScript

This article discusses the difference between objects and non-objects in the JavaScript language.

Image by Unsplash

Objects VS non-objects

In JavaSript, everything is either an object or a primitive value.

There are 7 primitive values in JavaScript.

Remember what we said about primitive values?

JavaScript SNUBS values:

This is an easy mnemonic to help remember the primitive data types in JavaScript:

1. S - strings
2. N - numbers, null
3. U - undefined
4. B - boolean, bigint
5. S - symbols

In point 2 above, the only reason to put numbers and null together is because they start with the same letter. Other than that, they’re two completely different types.

Similarly, in point 4 above, we have the bigint value, which is listed together with boolean only because they start with the same letter, but actually have nothing in common.

Now, how are these primitives different than objects?

Objects are simply groupings of related data and functionality.

This data can come in the form of either primitive data types or nested objects (objects inside objects). An object’s data is referred to as object properties.

The functionality of our object comes in the form of object-specific functions, which we refer to as methods.

So, how do we group this data?

To begin, we can just list some characteristics of a real world object, for example, a car.

Here’s our car’s data:

• model: sedan
• make: VW
• year: 2020
• color: red
• lights: off

Here’s our car’s functionality:

• lightsOn
• lightsOff

Great, now we need to turn this into an object:

1
let car = {}

Now we’ll just expand our object with the data:

1
2
3
4
5
car.model = 'sedan';
car.make = 'VW';
car.year = 2020;
car.color = 'red';
car.lights = 'off';

…and we’ll now add the functionality:

1
2
3
4
5
6
car.lightsOn = function() {
    car.lights = 'on';
};
car.lightsOff = function() {
    car.lights = 'off';
}

We can now inspect our object:

1
car

And we’ll get this back:

We’ve seen one way to build an object in JavaScript. We first declare a variable and assign it an object literal:

1
var car = {};

…and then we build up our object using the object property accessor - in the above example, the dot operator.

Alternatively, we can use the bracket notation for the object property accessor:

1
2
3
4
5
6
7
8
9
10
11
12
let car2 = {};
car2['model'] = 'sedan';
car2['make'] = 'VW';
car2['year'] = 2020;
car2['color'] = 'red';
car2['lights'] = 'off';
car2['lightsOn'] = function() {
    car2.lights = 'on';
};
car2['lightsOff'] = function() {
    car2.lights = 'off';
}

The result is the same, we can inspect our new car2 object by just typing its name into the console.

We can build up entire objects with our two property accessors (either the dot operator or brackets). Instead of assigning an empty object literal to a variable and then slowly building it up, we can simply pass the entire complete object and assign it to the variable right away:

1
2
3
4
5
6
7
8
9
10
11
12
13
let car3 = {
    model: 'sedan',
    make: 'VW',
    year: 2020,
    color: 'red',
    lights: 'off',
    lightsOn: function() {
        car3.lights = 'on';
    },
    lightsOff: function() {
        car3.lights = 'off';
    }
}

Again, to view our object, we simply type its name into the console:

1
car3

Finally, our data can also be other objects:

• just plain objects, or
• arrays (which are actually a kind of object in JS)