Everything is object in javascript

Published at: 2020-02-14 16:00:00

Updated at: 2023-10-01 13:59:37

javascriptobject

Do you know that everything, literally everything in JavaScript is an Object? From just a single primitive or variable declaration to complex arrays and functions, all Object. But before we proceed continuing to the subject. First, we need you to understand what is an Object in JavaScript.

Object is a collection of key/value pairs. The values can consist of properties and methods, may contain all other JavaScript data types, such as strings, numbers, and Boolean.

So let us illustrate how an Object looks like in JavaScript. Let's say we have an Object of john:-

let john = {
    firstName: 'John',
    lastName: 'Smith',
    yearOfBirth: 1993,
    job: 'teacher'
}

So, we knew that object of john is a collection of key/value pairs, right? How we can determine that?

We can actually console.log(to see the results) the keys in John's object like the code shown below:-

// declare a variable that holds the keys in john's object
let keysOfJohn = Object.keys(john)
 
// console.log above variable: keysOfJohn
console.log(keysOfJohn)
 
Output: ['John', 'Smith', 1993, 'teacher'] // Object john's values

There you have it. key/value pairs that made up an Object in JavaScript.

So what's up with all are Object in JavaScript This doesn't proofed anything. We actually already knew that Object is an Object, right?

Yeah, we know that. This is just the tip of the iceberg. Letting you know first makes an Object. So with that out of the way, now we can show you why we said all in JavaScript is an Object.

The simple way to show this is to basically console.log anything that we declared and assigned.

The Fun Part Starts Here...

Open your browser. It can be any browser. We will go with Chrome. Right-click anywhere on the current page, and choose Inspect options in the pop-up window.

alt text

Then, a new sub-window will be opened like so.

alt text

It may be not sticking at the bottom of your page like what we have here. Yours might appear on the left or right side of the page. You can always change the position of the sticky window by maneuvering yourself to the three verticle dots on the right-hand side of this sticky window.

alt text

Then choose Console tab. And from here and out, we gonna code and show you how it's done here.

alt text

Let's declare an Object of john like we did earlier in here.

1. Object

alt text

So, we already knew that if we do this:-

alt text

That's pretty much showing you john is an object that have key/value pairs. That's why we can just call out john.firstName in the first place.

But, how about a function.

2. Function

alt text

And if we do this:-

alt text

It still behaves like an Object. So function do really an Object too.

Let's see array next

3. Array

alt text

From here, you already can see that array also an object. Since it has methods like length. So, if we treat this like an Object, then...

alt text

Yup! Array also behave like an Object.

Last but not least, how about a simple primitive or variable declaration?

4. Primitive/Variable

alt text

There's no way a simple variable declaration could be an Object too right?

Haha. You've guessed it! Variable z also an Object. We can do something like this:-

alt text

That means z also behaves like an Object.

So how all this possible? Actually, the reason is simple though. Since any declaration of primitive/variable, array, function and an object itself all 'inherits' its parent methods through prototype. That's why all of them behave like an Object.

The easiest way we can see what methods does any child have possibly inherits from its parent, are like so:-

alt text

A direct method that makes an array behaves like an Object is method:length:

Like the examples we gave you earlier. If you,

console.log(array.length)
 
Output: 3 // since array consist of three elements/items in it

But, an array also inherits methods from its parent Array default itself, that have a bunch of methods through a prototype. That's when we have access and abled to run or do something like:-

array.push // to add new items in the array list
// or
array.pop // to delete existing items from the array list

But it doesn't end there yet. Since all declarations inherit its' parent methods through a prototype. Then Array methods, which then Array inherits its parent methods which is Object.

alt text

And that what makes the array an Object too.

You can try it yourself in the console tab in inspect right-click options like we show you throughout this article. How?

Just add '.' or period sign after any declaration of variable, function, array, or object itself to see the methods available for them to use. Like so:-

  1. For primitive/variable declaration:-

alt text

  1. For array declaration:-

alt text

Conclusion

There you have it! This concluded that everything is an Object in JavaScript.

Now that you know, leave a comment if this article somehow helps you understand more about how JavaScript Object works in general. Thank you for reading!