Published at: 2020-02-14 16:00:00
Updated at: 2023-10-01 13:59:37
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.
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.
Then, a new sub-window will be opened like so.
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.
Then choose Console tab. And from here and out, we gonna code and show you how it's done here.
Let's declare an Object of john
like we did earlier in here.
So, we already knew that if we do this:-
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.
And if we do this:-
It still behaves like an Object. So function do really an Object too.
Let's see array next
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...
Yup! Array also behave like an Object.
Last but not least, how about a simple primitive or variable declaration?
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:-
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:-
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
.
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:-
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!