Understanding JavaScript objects
Tags: beginners, codenewbie, javascript, objects
Published: 2019-11-09 20:03:24

Have you ever read the sentence, "_In JavaScript (nearly) everything is an object_"?. I'm willing to bet that you have, and probably when you were learning JavaScript, at least in my case I did.

But this is not just for the case of JavaScript, actually, if you google ["everything is an object"](https://www.google.com/search?q=everything%20is%20an%20object), you will see the same sentence referring to a plethora of programming languages (especially Python).

For someone that is just starting to learn how to code, reading something like that can do more harm than good, you don't even yet understand what an object is and someone is telling you that *everything* is an object? what are you suppose to do with that information?.

So, let's try again to understand, what is an object in Javascript.

## Javascript data types

To understand what objects are, we need to understand what is a data type.

>In computer science and computer programming, a data type or simply type is an attribute of data which tells the compiler or interpreter how the programmer intends to use the data.

Basically, a type is an attribute of all the variables (or constants) you are creating when you are coding, in the case of JavaScript, there are 8 data types:

* Undefined
* Null
* Boolean
* String
* Symbol
* Number (Number type and BigInt type)
* and Objects

Out of these data types, 7 are considered primitives (`Undefined`, `Null`, `Boolean`, `String`, `Symbol`, `Number` and `BigInt`) and `Objects` are what we call _references_.

What does it mean for `Objects` to be references? lets see an example. Let's declare a couple variables like this:

```bash
> let foo = 42;
> let bar = foo;
> bar
42
```

If we modify the variable `foo`, the variable `bar` will maintain its initial value of 42 (like expected).

```bash
> let foo = 42;
> let bar = foo;
> foo = 43;
> bar
42
> foo
43
```

In the case of `Objects` we see a different behaviour:

```bash
> let foo = { key: 42 };
> let bar = foo;
> bar
{ key: 42 }
> foo.key = 43;
> bar
{ key: 43 }
```

As you can see, changing the value of a key in `foo` will affect `bar`. If you need to make a copy of and `Object` and modify the original `Object` without this affecting your copy, there's several ways of doing this, I tend to prefer the relatively new `spread` operator:

```bash
> let foo = { key: 42 };
> let bar = { ...foo };
> bar
{ key: 42 }
> foo.key = 43;
> bar
{ key: 42 }
```

## An in-depth look at Objects

Now that we know what `Objects` are, let's talk about what can they contain. Basically, `Objects` in JavaScript are a type of data that stores collections of other data in *key:value* pairs, as simple as that.

In their most simple form they look like this:

```bash
let foo = { bar: 1, baz: "two" }
```

There are some rules about what the keys can be (they can either be a `string` or a `symbol`), but the values can be basically anything:

```bash
let foo = {
 one: 1,
 two: 'string',
 three: { another: 'object' },
 four: [ 'an', 'array' ],
 five() { return "how about a function? (actually a method)"},
 }
```

This gives us a lot of flexibility when it comes to coding, but can be a little confusing when you are starting to learn about `Objects`.

Functions that are inside `Objects` are called methods, and with them you can access the data inside the `Object`, let's define an `Object` the following way:

```javascript
let rectangle = {
 length: 4,
 width: 2,
 area() {
 return this.length * this.width
 }
}
```

Now we can do things like this:

```bash
> rectangle.area()
8
> rectangle.width = 4
> rectangle.area()
16
```

As you can see `Objects` can be more complex than you might initially imagine and is that flexibility that allows us to do more interesting things with our code.

## Why is (almost) everything in JavaScript an Object?

As we have already seen, `Objects` can have very complex shapes, you can have any data type as values inside an `Object` (called properties), and you can define functions inside your `Objects` (which are called methods) to access those properties.

Now that you know about this shape that `Objects` can have, other things are going to start looking very familiar.

### Object wrappers for Primitives

Let's take a look at the primitives we already discussed at the beginning.

```bash
> let num = 42;
> num.toString()
'42'
```

Does the expression `num.toString()` looks familiar to you?, if it does is because it's a method call, just like we did earlier with the `rectangle.area()` example.

But why numbers have methods if they are not objects? (you may ask), well, almost all primitive values (except for `null` and `undefined`) have an object equivalent or wrapper that wraps around the primitive value to allow us to make things like `num.toString()` and make our life easier when coding.

Lets get one thing clear, this does not mean that numbers or other primitives are `Objects`, when for example you try to access a property of a string, JavaScript coerces said string to an `Object` (the `String` wrapper), this all happens under the hood, you do not have to worry about what is going on behind the curtains, but its good that you understand it.

Lets see what methods and properties does the `Number` object wrapper has:

```bash
> Object.getOwnPropertyNames(Number)
[ 'length',
 'name',
 'prototype',
 'isFinite',
 'isInteger',
 'isNaN',
 'isSafeInteger',
 'parseFloat',
 'parseInt',
 'MAX_VALUE',
 'MIN_VALUE',
 'NaN',
 'NEGATIVE_INFINITY',
 'POSITIVE_INFINITY',
 'MAX_SAFE_INTEGER',
 'MIN_SAFE_INTEGER',
 'EPSILON' ]
> Object.getOwnPropertyNames(Number.prototype)
[ 'constructor',
 'toExponential',
 'toFixed',
 'toPrecision',
 'toString',
 'valueOf',
 'toLocaleString'
```

As you can see there's several very handy properties and methods for the object wrapper `Number` and you can access them as you would on any other `Object`.

### Arrays and Functions

Other things in the list of _things that are objects_, are the `Arrays` and `Functions`. So far you might have learned that `Arrays` are ordered list, and this is truth but, under the hood, `Arrays` are `Objects` too.

```bash
> let someArray = ['foo', 'bar', 'baz']
> someArray
[ 'foo', 'bar', 'baz' ]
> Object.getOwnPropertyNames(someArray)
[ '0', '1', '2', 'length' ]
> Object.getOwnPropertyNames(Array.prototype)
[ 'length',
 'constructor',
 'concat',
 'find',
 'findIndex',
 'pop',
 'push',
 'shift',
 'unshift',
 'slice',
 'splice',
 'includes',
 'indexOf',
 'keys',
 'entries',
 'forEach',
 'filter',
 'map',
 'every',
 'some',
 'reduce',
 'reduceRight',
 'toString',
 'toLocaleString',
 'join',
 'reverse',
 'sort',
 'lastIndexOf',
 'copyWithin',
 'fill',
 'values' ]
```

For the case of `Functions` we have the following:

```bash
> function foo(param1, param2) {return [param1, param2]}
> Object.getOwnPropertyNames(foo)
[ 'length', 'name', 'arguments', 'caller', 'prototype' ]
> foo.length
2
```

As you can see we have for example a property called `length`, this value indicates how many parameters the function expect.

And if we call `Object.getOwnPropertyNames()` on the `Function.prototype` we have other interesting stuffs:

```bash
> Object.getOwnPropertyNames(Function.prototype)
[ 'length',
 'name',
 'arguments',
 'caller',
 'constructor',
 'apply',
 'bind',
 'call',
 'toString' ]
>
```

## Let's wrap things up

There's a lot of details in terms of what are `prototypes`, `constructors` and what is an `instance` that I'm purposely not talking about or getting into too much detail, I wanted for this article to be just an overview of `Objects` in JavaScript for people that are still learning the basics.

The important thing to know is that `Objects` are everywhere in JavaScript, and is important to understand them in order to improve your JavaScript skills.

If you are new to programming and have any questions about objects in JavaScript, put it in the comments!

Thanks for reading!.