Built-In Objects

[00:00:00]
>> Now, have you seen any thing that this sort of reminds you of already? Have we worked with any of these complex nested objects already? Policy like you're you've got some tip of your tongue.
>> Well, it's the HTML document is.
>> Document is a great example of this.

[00:00:21]
So, we had already yes, already. We had already earlier in the course, been using this complex kind of chain of dots to pull out properties and even dots to call methods and then call properties on the values returned by those methods. When we were doing things like document.queryselector("h2").append, all of that, which we were already casting these spells yesterday, this is how all of that works is via objects and via properties and methods on objects.

[00:00:58]
And so if you wanted to find out what other properties that document has besides like title and methods like query selector what could you do to find out what other properties document has? There's a couple of things.
>> Document that help [LAUGH]
>> That would be great but actually

[00:01:18]
>> [LAUGH]
>> Even easier if we type in document. Sorry, let me, even easier if we type in document into our console. And we use our browser consoles little built in object viewer here. We can [LAUGH] see that there is a lot of stuff going on in this object and we can drill into other things happening and blah, blah, blah.

[00:01:48]
We can see there's nested, nested, nested things. So that's one way is we can explore it in the console. Is there another thing we could do to find out all of the different things that a document has and can do? MDN exactly, so yes, as usual, MDN has a reference of all of the, you'll notice in this sidebar here it has kinda a list of properties, and then it also has a list of methods.

[00:02:17]
So we can drill down into that and see all of the different stuff available on a built in object like document. Document is built in, we get it out of the box with JavaScript running in our browser. Okay, any other built in objects that we've seen already that have some methods or-

[00:02:40]
>> Arrays.
>> Properties. Yeah, arrays are one of them we saw for example that we had array1, do I still have array1.push, right is already a built in method that we could use. And if I wanted to check out all of the other things available on arrays if I type in array to JavaScript, sorry.

[00:03:08]
If I type in array in MDN, I will get a bunch of information about the properties and methods available on arrays. Like concat and like push and pop sort of spoiled it earlier but there were a few other built in objects that we saw, one of them is console.

[00:03:27]
We've seen console.log a couple of times. Console is a built in object that has a method log that prints something out to the browser console. So if I go back to my console, and type, console.log hi. It prints out the string hi, that's built in. Console also has a couple of other tricks that It can do.

[00:03:54]
It has a console.warn, which similar to console.log Print's something to the console but this time puts a little warning label on it. And similarly, there is console.error. Which if we say, no, now it gets an even stronger red exclamation point. So console has a few built in methods like this.

[00:04:23]
And in fact it also has the clear method which I've also been accessing just with the word clear. So, console is another built in. And we also very briefly talked about something called math, is a built in object which allows us to, let's say get some math related functions, and constants.

[00:04:48]
So for example, if I type in math.pi and we'll notice this one is in all caps because pi is a constant, it never changes. And I mentioned briefly earlier that a naming convention in JavaScript is if we have a constant that's never gonna change, sometimes you see that variable put in all caps.

[00:05:05]
So math.pi is always gonna give me 3.14159 blah, blah, blah, blah. And similarly, math.random is a handy little method, that returns a random, pseudo random but as random as computers get a random value between 0 and 1. And this can be handy for kind of introducing some variety into our programs.

[00:05:32]
So, these are some built in objects and you can find references to all kinds of built in objects on MDN. Now, do you remember that we have also done some tricks on strings like string.index of or string.to uppercase. So at this point, you might be thinking Arjuna you have lied to us.

[00:05:57]
Because you said that strings are primitive values and JavaScript distinguishes primitive values from objects. And yet if we're doing string.to, uppercase or string.length, the dot means that we have an object here. So our strings objects are their primitive values that are strings. And the answer is kind of bow.

[00:06:15]
So what happens here is that strings themselves when we put a string in quotes, that is indeed a primitive value. However, JavaScript behind the scenes, wraps that in an object D thing so that we can interact with the string using some methods and some properties that are on a kind of built-in string wrapper object.

[00:06:43]
So this is why if you type in string to JavaScript, you'll notice that it shows up in the built-in objects section. Because the string object is this wrapper that we can use to manipulate the string, do things like call.toUpperCase, but importantly If I have a little stringy here and I call s.toUpperCase.

[00:07:18]
I get it's returning out the value, STRINGY. [LAUGH] But s still points to that original string, because remember we said stings are immutable. So these methods, these wrapper methods that we have, that we can do, like toUpperCase, they are going to create a new string, which for example, I could capture as a string 2 toUpperCase.

[00:07:49]
So now I call it S. Okay, so now I can see that essentially we're not manipulating the string even though it kind of looks like we are with these dots and these methods. We're really just kind of invoking this wrapper object that lets us do some convenient casts some convenient spells on our string.

[00:08:10]
Which in this case return new values like to uppercase returns a new string with all the capitalized characters Okey-doke. So there are a lot more built-in objects. You can find a whole bunch more on MDN. There's a whole page on standard built-in objects that JavaScript gives you out of the box.

[00:08:31]
So things like arrays are a built-in type of object, we could say. Although again, we saw a type of array equals object. So in JavaScript world, if it's not a primitive value, it is an object and that is what's happening.