JavaScript the Basics for Beginners- Section 2: Objects | Rob Merrill | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

JavaScript the Basics for Beginners- Section 2: Objects

teacher avatar Rob Merrill, JavaScript Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (40m)
    • 1. JavaScript the Basics - Objects: Promo Video

    • 2. JavaScript the Basics - Objects: Object Literals

    • 3. JavaScript the Basics - Objects: Object Literals Lab

    • 4. JavaScript the Basics - Objects: Dot & Bracket Notation

    • 5. JavaScript the Basics - Objects: Dot & Bracket Notation Lab

    • 6. JavaScript the Basics - Objects: Object Constructor Function

    • 7. JavaScript the Basics - Objects: Object Constructor Function Lab

    • 8. JavaScript the Basics - Objects: The Secret Life of JavaScript Primitives

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


Course 2 - JavaScript Objects

In this course you will cover: 

  • object literals
  • dot and bracket notation
  • object constructor functions
  • object prototypes

Through our whole JavaScript the Basics for Beginners course series you will find this is your one stop necessary to enter into the language of JavaScript. We are going to start from scratch and build up our understanding of the world's most popular programming language together. 

View JavaScript in action with whiteboard videos optimized for viewing on your smartphone. This is truly a course that you can engage with no matter where you are. Take your JavaScript eduction on the go! With whiteboard videos you get to visualize what JavaScript does under the hood. 

You can practice JavaScript in your web browser! Take advantage of Google Chrome developer tools to put the JavaScript you have learned during our whiteboard lesson into practice with further examples and challenges. This is our JavaScript playground.

Learning JavaScript is like learning a language. This course won't make a false promise of saying you will master JavaScript overnight. However, this course will immerse you into the world's most popular programming language. 

Each course will introduce you to something new in JavaScript :

  • JavaScript Syntax
  • JavaScript Building Blocks
  • JavaScript Best Practices
  • JavaScript Objects
  • JavaScript Arrays
  • JavaScript Regular Expressions
  • JavaScript Functional Programming
  • JavaScript Algorithms
  • JavaScript Data Structures
  • JavaScript ES6 Syntax

You'll finish this course with an understanding of JavaScript that will let you take a deeper dive into the language and possibly launch you into a new career as a JavaScript web developer.

Learning a new language can be difficult and even feel intimidating. JavaScript the Basics makes the the learning process feel accessible and welcoming!

Meet Your Teacher

Teacher Profile Image

Rob Merrill

JavaScript Instructor


Rob Merrill is a Full Stack JavaScript Developer. His specialty is in the MEAN stack focusing on AngularJS, NodeJS, ExpressJS and MongoDB.

He is a graduate of Code Fellows Advanced Full Stack JavaScript Development course and has been developing with JavaScript for three years.

In his spare time he travels around Seattle's finest craft breweries with his wife and their dog.

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. JavaScript the Basics - Objects: Promo Video : Welcome to Java script. The Basics. JavaScript is the most popular programming language in the world has been called the language of the Web Stack Overflow listed as the most popular deaf technology and get have numbers it as the top ranks language learning JavaScript will allow you to be a full stack developer or fund a specialty on the front end or the back end. With JavaScript, you'll be able to cope with front and frameworks like react and angular on the client side . And you can also cut on the back end server side with no Js and create databases with Mongo . DB JavaScript is a language, so it's going to take some time to learn before you can write poetry or a novel in any language, you have to first learn the languages alphabet, how to make words and see how others use it. To learn JavaScript. We're gonna look under the hood. This isn't just going to be an exercise in copying someone else's code to wind up with an application you don't understand. Everything we do will be visual in the form of a whiteboard lesson where you can really see how everything works and connects. If you are a visual learner, this is the course for you. This isn't about going 0 to 60 or zero to hero, because if you really are starting at zero, those courses leave you behind quickly. It's about learning. Understanding and applying is that you could build and create with JAVASCRIPT. Way will then follow our white board. Lessons into the lab way will enter into the Google Chrome software developer. Consul thistles are Java script playground. There is nothing you will need to download for this course. No special tools, no extra steps. Just Google, chrome, everything. You learnt the lesson we will then recreate in the lab together. I'll then give you a code challenge to recreate what we learned together and then we'll look together at a possible solution. Welcome to Java Script. The basics. Let's start speaking job script 2. JavaScript the Basics - Objects: Object Literals: Welcome to Java. Script the basics in this section. We're going to look at objects in this lesson. We're going to look at object. Literal notation. What is an object? In Javascript? An object is a value type consisting of key value pairs. JavaScript has two main value types. Primitives and objects. What is a primitive in javascript? Strings numbers Bruins Noel undefined. And with s six. We have symbols, so anything that isn't a primitive is an object. That means Java script has a lot of objects, including a raise and functions that we will look out later. Most everyday items can help us to understand how JavaScript objects work, whether it is a TV, a bathtub or a car, you can turn just about anything around you into a Java script object. We're gonna have some vocabulary changes when we talk about objects that will be important to remember as you learn to think and talk and javascript in an object. Variables become known as properties. If a variable is part of an object is called a property. Properties tell us about the object, such as the name of a hotel or the number of rooms it has in an object. Functions become known as methods. If a function is part of an object, it is called a method. Methods represent tasks that are associated with the object. We're going to dive deeper into functions and methods. In a later lesson, let's look at creating an object. JavaScript gives us a few ways to create objects. In this lecture, we will look at object. Literal notation. This is a simple is using to curly braces and placing key value pairs within those curly braces. With commas separating the key value perish. Let's go ahead and build a car. Our object is now created, but there isn't anything in it. It's a car with no parts and no features. Let's go ahead and brainstorm. What does your car have? Way need four wheels, red paint, fuel efficiency engine and a Guest Inc Let's add these items between the opened and closed curly braces. Objects are full of property values or key value pairs in JavaScript, the Keys air, also known as properties, and we can use those terms interchangeably. When we're talking about objects, the key or properties don't need single or double quotes, though they may have them as long as it is a valid JavaScript variable. We will see later how we can add property names that would be invalid variable names, but surround them with quotes. Note that between each key value pair of you have a comma except for the ending key value pair. No, there are other ways to build a car. As soon as we have declared our object, we can add properties of via dot and bracket notation. It'll take a second to grasp but should sink in quickly with use. First will make sure that our object is declared as we show how to build with both dog and bracket notation. Let's go ahead and start building with dot notation. First, we simply follow the formula of naming the object that we've created. Then we put a dot and then we named the property and we assign it value. These are parts were going toe access with dot notation. The object is car. The property we want to add is wheels and the value is the number four again the object, his car, the property you want to add his color and the value is the string red and so on If we type this into the console as you will in the lab, we'll get the same result. Now let's build the same car with bracket notation. Make sure that we have declared the object. VAR car equals open and closing curly braces. Now to add properties and values with bracket notation will follow a formula similar to dot notation. We'll start with the declared object that instead of a dot, will put in open and closing square brackets with single or double quotes within them. And the property name within that after that will assign the value, as in our dot notation. Example. If we were to put this in our consul, we would find that this returns the same car in our next video. We're going to take a deeper look at dot and bracket notation and see how they can access and even change values in our object. Thanks for joining me in looking at object literal notation. Now let's drive off into our challenges and I'll see you in the lab 3. JavaScript the Basics - Objects: Object Literals Lab : all right, we just finished our lesson on Java script objects. We learned that objects are loose collection of key value pairs, and anything that isn't a primitive value in JavaScript is an object. We even built a car together three different ways. Let's go ahead and open up our consul and do more work with objects. Here's the challenge. Let's build a person with object literal notation. I want you to start with three property value pairs inside the object. When you declare it, let's make sure that the values represent three types of values. A string number and Boolean. After you've built this, we're gonna create two more objects with the dog and bracket notation. Go ahead and pause your video and build this and then we'll come back and do one possible solution together. All right, how to go? Let's play creator and let's build a person. We'll begin by adding three key value pairs that contain at least one string number and bullion. We have a hungry man, mid twenties and a height of five feet 10 inches. As you can see, I turned what might look like a number into a string and used the escape clause to keep the single quote in the string text. Now let's go ahead and create a new object with curly braces as we did above and use dot notation toe add value to the object. The object is your choice. I'll go ahead and suggest pizza if you need an idea. But go ahead and positive video and create an object with dot notation. It could be any combination of property and values. Then we'll come back together and make a pizza. All right, let's go ahead and come up with a solution together for a pizza object. Our first step is to create the pizza object. Our next step is to start making our pizza. We do this by naming our object than placing the dot then placing our property and finally assigning it a value. Every good pizza has a crust. Let's make it a healthier crust and use wheat. It's also going to need a sauce. Let's go ahead and add Maren. Era for cheese will go ahead and use mozzarella, and we've got to have some toppings. We'll go ahead and add cheese again. Pepperoni, olives and mushrooms. Let's go ahead and type pizza into a console and see what we get. That's just what we were looking for. Now let's go ahead and build a cup with bracket notation for this object. I want you to include three properties and values using a data type of string, Boolean and a number. Go ahead and build that cup, and when you're done, we'll go over a possible solution together. All right, how to go? Let's build a cup together. We'll start by building our cup. Object will build our cup with bracket notation by placing the property within single or double quotes and surrounding that with square brackets. Then we'll assign a value. We'll give it a property of insulated on. A Boolean of truth will give it a property of liquid and a string of water. We'll give it a property of ounce and a number of 16. Let's go ahead and put that cup into a console and see what it returns. They're exactly what we were looking for. Something that is probably staying out to you by now is how much easier it is to write in dot notation. It is three less characters and comes much more naturally while typing. So why does bracket notation exists? We'll find out soon. See you in our next lesson 4. JavaScript the Basics - Objects: Dot & Bracket Notation : welcome back to Java, stripped the basics in this lesson. We're going to look at accessing properties of an object with dot and bracket notation. In our last lesson, we built a car together. Let's suppose you're a mechanic and you need to access apart or property value from your car or object or in some cases, even change the property values. Before we do anything, let's look at our car and at a new property in value. Let's add what would be an invalid variable toe our car object. We can also add this invalid variable to our car with bracket notation. In both of these examples, we need to have quotes around our property. We could put quotes around the other properties, but don't need Teoh. That would be considered bad practice. But when we haven't involved variable, we must surround it with quotes. It isn't possible to add this with dot notation. This is one of dot notations limitations. We can add variables that start with numbers, have spaces or use reserved words such as Var function or CONST. They need to be placed via the literal object notation or added with bracket notation. Let's add another property and value to our car using an invalid variable name car. Property function equals drive way. Have to put quotes around the property named function because this is a JavaScript reserve keyword that would normally be an invalid variable. And then we have given it the value of the string drive. Now let's return to our story of a mechanic trying to access property values from the car object. Let's start with dot notation, toe access, a property or a method of an object with dot notation. You use the name of the object, followed by a dot then the name of the property or method. You want to access toe access. A property of an object with dot notation. You use the name of the object, followed by a period than the name of the property you want to access. So let's imagine that we want to access the color red and then make Honda of the car. We would write object, car dot property color and get Red Way Would write object car dot property, make to get Honda. We can also change the property values using dot notation as well. Suppose you wanted to turn the card green and turned it into a Toyota. We would write object car dot property, color and a son at the Value Green well right object car dot property. Make and assign it value. Toyota. We can access nearly every property in our object of dot notation, and in most cases this is the preferable way to gain access to a property's value, as it is much easier to type. But in some cases, dot notation fall short as we saw earlier. We can't use dot notation with an involved variable, starting with a number. A Java script reserved keyword or one that contains a space trying to access the properties . Origin year and function are going to air out with dot notation. Let's look at how to get access to involved variable names for properties with bracket notations. Now first, to access the properties of a value with bracket notation, we have to put a single or double quote around the property and place it inside of the brackets. Suppose you want to access the color and make of our car again. We write object car opening square bracket opening single or double. Quote the property color in a closed, single or double quote, then a close square bracket to get red Way right Object car opening square bracket opening . Single or double quote property make than a close quote and a close square bracket to get Honda. Now let's go ahead and see how bracket notation allows us to grab origin near property value and the property value of function. The process is exactly the same, the properties air already within quotes, and now we just place them within square brackets and we're all set. If bracket notation is so much more flexible than dot notation. Why's dot notation so much more popular? Let's look at these two next to each other. Remember the best coders. The best programmers are often referred to as lazy. This means that you are always doing things in the most efficient way. This is one small example of the ease of typing. Dot notation often makes it the first choice over bracket notation. Let's close up this lesson by taking one last look at a football and accessing all of its property value. As we look at this, we should that dot notation is going to give us access to the 1st 3 properties. However, when we get to the property made in way, can't access it because there is a space also the property length and with doesn't have a space. But it does have a special character making it an invalid variable. Remember the quotes air on the properties tip us off that we will most likely need bracket notation toe access those properties long before we even begin to analyze them. All right, thanks for taking a look with me at dot and bracket notation. Let's head to the lab and put what we've learned into practice. 5. JavaScript the Basics - Objects: Dot & Bracket Notation Lab: all right. We just finished our lecture on excess ing and changing properties from an object with dot and bracket notation. We learned that despite dot notation being the cleanest and most often used method to obtain properties from an object bracket, notation is the most flexible, sometimes the only option to create an access properties in an object that we would consider tohave invalid variable names. Let's go ahead and open up our consul and do some work with objects. Let's go ahead and build an object together. This might feel a little repetitive. If it does, that's good. It means that it's starting to become natural to you. Let's build a snowman with object, literal notation. Then I'm gonna ask you to access different parts of the snowman and even change some of its parts. So do you want to build a snowman? Let's go. We're going to declare a variable snowman, and it's sign it. The value of this object the properties are going to be is snow and assigned. The Boolean True color is assigned. The string white made of snowballs is assigned the number three, and the first name is assigned the string frosty all right. Your first challenge is to access all of the properties, go ahead and hit pause and then we'll solve this together. All right, How to go? Hopefully this went smoothly for you. Although you probably noticed a problem. Let's start grabbing all the values. I'm going to go ahead and use dot notation Stoneman dot is no returns. A boolean of true snowman dot color returns a string of white and snowman dot made of snowballs returns the number three. Then you got to the first name and you probably saw that this Onley creates an air right off the bat. We know that this is going to be an involved variable because of the single quotes around it, meaning that dot notation won't be able to access it. We'll review in a minute how to access the first name property with bracket notation. Next, let's change all of the property values that dot notation gives us access to will change snowman dot Is snow to the string? Yes, I could change it to the bully and false, but then it really want to be a snowman. Would it will change snowman color to the string orange and won't change Snowman. Made of snowballs to eight. This is a giant snowman. Now let's quickly access or Snow man's first name property with bracket notation and change up the property's value. We just write our object and then within the square brackets and quotes, we write our property name and we assign it the value of the string. Jack Frost. OK, let's build another object. This time I'm gonna ask you to build a house. I want you to add four property values with dot notation with values of three different data types, then at another three property values with bracket notation using three property names that can only be added with bracket notation rather than dot notation. Go ahead and hit the pause button and give it a shot. Then come back to the video and we'll build a home together. All right, I'm sure you wound up with a pretty incredible house. Let's go ahead and build one together. First thing I want to do is add some doors in the bedroom house. Dot doors equals the number four. How stopped bedrooms equals the number three house dot Address equals the string of 42 19 south of fellow street house dot office equals the Boolean False Well Lister object of house in all three cases. Then within this square brackets and quotes Willis the properties to swimming pool and involved variable because of the space will sign the Boolean false to the first owner property and involved Variable because it starts with the number will sign a string of John Doe to the type of property and involved variable. Because it is a JavaScript reserved word, we'll send the string apartment. Let's look at her house in the console. Great all over parts or their chances are you saw that dot notation is so much simpler. And unless brackets are absolutely necessary, the dot notation is typically best practice. That's all for this lab, and we'll see in the next lesson. 6. JavaScript the Basics - Objects: Object Constructor Function : Welcome back to Java. Script The basics. In this lesson, we're going to look at object constructor functions. Object constructor functions allow us to create many objects using a function as a template . We'll cover functions in the future section. A function for now is something you count on to do work for us. So in this lesson, we're going to learn what the object constructor function does for us. So let's say we want to make a car, then another car and then another car. This could take a long time. In her previous example, we have only been able to build one object, a k a. A car at a time. Sometimes in Javascript, we like to have an object type that can be used to create many objects of one type. The standard way to create an object type is using object constructor function. So let's pretend we're a car factory and have to build a lot of cars. We will first create the template with the objects properties. This will save us from writing a lot of the same coat over and over again. Well, look at functions in a later lecture, but when you find yourself repeating the same code over and over. There is the sun. There is probably a function that can do the work for us. Let's look at this code since it is new to us, then we'll look at the magic it performs. First, we have the JavaScript reserved keyword function. This is for a Java script interpreter, so it knows what to do with the code we're giving it. After this we have the function name, car. It is capitalized. I know that I told you before that capitalizing the first word of variables is not the best practice. But when it comes to object constructor notation, this is in fact, best practice. This isn't necessary, But remember, we're always coating for the Java script interpreters understanding, but also for human eyes that will look at her code later. The function has three parameters. Each one sets the value of a property in the object. The properties will be the same for each object created. Using this function, we have a new word for a Java script vocabulary. It is the reserved word. This let's pause for a moment and talk about this. The keyword. This is commonly used inside functions and objects where the function has declared alters what this means. It always refers toe one object, usually the object in which the function operates in JavaScript. The thing called This is the object that owns the JavaScript code. The value This, when used in a function, is the object in this case car that owns the function. The this keyword in an object constructor does not have a value. It is only a substitute for the new object. The value of this will become the new object from the constructor is used to create an object note that this is not a variable. It is a key word. You cannot change the value of this to be something else and get the same result. Let's produce a mass amount of cars. The function car is an object constructor. Once you have an object constructor, you can create new objects or instances of the same type. We can do that by setting a new variable of car one and assign it value of new car and around. Car doesn't have to be capitalized, but it is the convention and best practice. In this case. You then give it arguments. Remember the car object? Constructor has the parameters built into it, and this is where you are calling the function. So we put in arguments. We can then fill her car with arguments that match the parameters of our object constructor . We had Honda for Make Civic for model and 2006 for year, and here's what our value for Car one is. That's a lot of code. Look how easy it is to make a bunch of cars using the object constructor function. Once we have created our new objects, we can add an access them the same way as any other object. We could look at car for the Jeep Cherokee, and we might want to add a few features we could give it for will drive with dot notation Car for 0.4 Will drive equals the Boolean. True, we could give it a Boolean as to whether it has bumper stickers or not, and in this case, we can use bracket notation to do this. There you go. You have moved from making cars one at a time to becoming a car factory. Now let's give this a shot again. Let's build a zoo If we were to build a zoo with object little notation, it might look something like this. By the way, I'm not a zoologist, so I'm just making this stuff up off the top of my head First, what's at a lion will give the name Simba. I know. Not very original. We'll go to food type of carnivore and a Boolean of True for King of the Jungle. Then we could add a monkey will give him a first name of Louis, a food type of carnivore and a Boolean for false in regards to being king of the Jungle. As you can see, this is gonna take a while and a lot of repeated keystrokes to Philip Arzu. So let's create another object constructor function. It looks like all of her animals. We're going to have a name, food type and status as to where their king of the jungle. We'll start off by declaring a function and choosing a function name in this case animal again. We capitalize it as best practice. We then fill in the parameters which are name, food type and king of the jungle. Then we have opening and closing curly braces for function code and they're replaced Our this keyword that will be referring to the object animal and they're replaced. Our this keyword that will be referring to the object constructor function attached to each keyword is the property that will belong to each instance of the object. And then we set the value equal to the parameter above. That will be filled in with the argument when we invoke the function. So we're all set. Let's Philip Arzu. We'll just declare new variable for each animal and the Senate. The value of the new keyword that's going on with the job script interpreter know that we're going to make new instances of our object. Then we just fill in the parameters and we're all set and there you have it. Thanks for joining me in our first look at object constructor functions. We'll see you in the lab to put what we have learned into practice 7. JavaScript the Basics - Objects: Object Constructor Function Lab : All right, Welcome to our lab. In our previous lesson, we looked at object constructor notation. We saw that through the use of a function, we can create a lot of objects really fast. We also learned that if we're having to repeat the same code over and over again, there is probably a function that can help us out. Constructors are just regular functions which are used with the new keyword. They come and hand you and we need to make multiple similar objects of the same properties and methods in this lab. We're going to build object constructor functions. We're going to build a house constructor function and a book instructor function. We'll start out by building object liberals, as we did during our first lesson on objects. From there, you're going to turn that object literal into an object constructor. Let's go ahead and build a home together. So we've declared a variable called home rooms with the number four apartment with the bullion false color with the string brown swimming pool with the Boolean True State with the string of Washington City with the string of Seattle. Now we have one home to do another home with object literal. We have to type all of this in again. We have our home Teoh rooms, the number two apartment, the Boolean True color, the string white swimming pool, the bullion, false state, the string California and city, the string Sacramento. It took the same amount of time with a lot of repeated code. Let's imagine that we're home developer and we have acres of land to fill with houses. This is going to take a while from building each house by hand. But what if I could just build the blueprints and then hand off that work to a construction crew? It's not a perfect analogy, but close to what an object constructor function does. Let's build our blueprint. We have named our function home, and we have capitalized the H again. We don't have to do this but to be human readable. It's best practice and expected. We then put in the parameters. These were going to be the parts of our house. They are what we will fill with arguments when our work crew starts to implement our blueprints calling a function. We then have the this keyword, which is doing some magic, and it's essentially creating an empty object that we can then fill with these different properties of rooms apartment, color, swimming pool, state and city there, then assigned to our parameters, which will later be filled out with our arguments. Now let's build a ton of homes. Each of our home building crews takes this as their blueprint. They named their homes by declaring a variable. This son of the value of the new keyword. The new cured is for the job. A strict interpreter to Stan, she ate a new object. We then named the object constructor function name in this case home, which is now case sensitive to how we defined it earlier. Best practice again. Keep it capitalized. We now fill in the arguments for object constructor function rooms, three apartment, false color, the string blue swimming pool, the bullion, False City, Atlanta and ST Georgia. One line of code pretty fast. Okay, here is your challenge. I want you to build three more homes with your object constructor function. Go ahead and pause the video, grab your tools and build some homes than will come together in a few moments and build some more. All right, how to go, let's build our houses. We're just going to declare three variables followed by the new cured, creating new instances of the object constructor home. And then we're going to fill in our arguments. Iran's for a new challenge. I want you to do the same with the book and a library at first. Want you to build a book object of any book with an object literal. I then want you to imagine that you were filling a library with books and you want to do that in a shorter amount of time and less code, so you're gonna have to create an object constructor function. I then want you to populate the library by creating five more instances. This should take you a few minutes. You might want to watch the example we just did. If you aren't sure where to start, go ahead and pause the video and in a few moments will come up with a possible solution. All right. How did it go? Hopefully was a bit of a challenge, but still manageable for you. Let's start by building a book object with object, literal notation. Let's just give it to properties for the sake of brevity, author and title. Actually, let's make it three and ad pages first will declare the variable book. Our Author will be Victor Hugo. The title is Laziness and the Pages. I don't know if the top of my head I know it's huge and I started it and couldn't finish. So we'll say 1200 pages. No, let's go ahead and build the object constructor function Based off of this, we're gonna use the keyword function, followed by Capital book, followed by our parameters of author title and pages. Then we have our code block with the keyword this connecting to the book object and the properties of author title and pages and setting them equal to the parameter values later to be filled in with the arguments. All right, we're almost done. Let's create three new instances of our book object constructor function we just declare are variable and then a sign of the value of the new keyword, which will make new instances of our book. And then we feel in our arguments as we call or invoked the function. Now, when we enter these variables into our consul, we get the objects we were looking for there you have it. Thanks for joining me in this first look at object constructor functions and we'll see you in the next lesson. 8. JavaScript the Basics - Objects: The Secret Life of JavaScript Primitives: in this lesson of jobless stripped the basics. We're going to look at what happens when JavaScript primitives act like objects. Or, as Angus Kroell says, the secret world of Javascript primitives. Remember when we talked about JavaScript being made of primitives and objects? Primitives? Our strings numbers billions no undefined. And with es six symbols and everything else in JavaScript are objects. But if you have noticed we have ran into several times in which primitives have done what Onley objects can do. Let's look at the following code. Var welcome equals the string Good to see you. Var shout welcome is assigned the value of welcome dot to upper case method The variable welcome is a storage container containing a string of good to see You Welcome is storing a primitive In our next line of code we see that we have created a variable called shout Welcome and to the shell welcome variable were storing the variable Welcome containing a string primitive and we're attaching the method to upper case to that hold on Aren't methods on lea attached to objects? How can this string stored inside of welcome which we've discussed is a primitive be treated like an object. Strings aren't the only primitives that function like objects, either. Bully ins and numbers do this as well. You have access to properties. Their object equivalent exposes another term for that. Is there object rapper? Let's keep the focus on strings. In this lesson, we've already seen in our first example that strings can be treated as objects. We have built objects previously using object literal notation. We do that by using, opening and closing curly braces. For example, if we want to build a car, we can name a variable called Khar and assign it the value of opening and closing curly braces. But that isn't the only way to make an object. Remember the object function constructor? In the case of making a string object, we might do this. This actually is an object function constructor. It's on Lee Purpose is to create objects. If we were to go into our consul and look at the two strings we have created, we have welcome and we have superhero. One is a string primitive we created, and the other is a string object that we created. But our superhero variable is much more complex. Let's look visually, what is happening with superhero? We have superhero pointing to the string Superman, but we also find that we point to the prototype of the string object that exists. The string object has a whole set of properties and methods it can access. We saw earlier that he can access the to upper case method, and the string object is able to access the properties that its own prototype, the object prototype possesses. The object prototype doesn't have a prototype that it points to. Maybe this will help you see why JavaScript is referred to as an object oriented language. It's okay if this is still a little bit foggy for you. For now, just know that the object form of any primitive carries with it a lot of functionality. So why does knowing this matter? And what does it have to do with a string that we create as a primitive knowing that strings have an object type or rapper? It's helpful to know, because it takes away the mystery of how you can attach a method to what appears to be a primitive. So now let's go back to looking at how a string, which is a primitive can access properties and methods on it. Let's take our original variable welcome that contains a primitive string of Good to see you. We can access the length of this string by using the length property, even though it was created as a primitive string and not a string object. While evaluating welcome dot length, JavaScript will convert your primitive string into an object for a moment in time, your primitive string will become an object to figure out what the length of your string actually is. This is only temporary. You receive the evaluation for length, a number and the welcome variable still as a string primitive. However, if you create a string object, as in the case of superhero, it will remain permanently as an object. Primitives can move from primitive toe objects and then back to primitives. Objects. Can't do that dance To verify that are welcome, Variable has returned back to a string after temporarily becoming an object toe, access the length property. We can use the type of operator and welcome, and the result we get is strength. We can then use the type of operator on welcome dot length, which returns a number So in that moment, the welcome primitive has become an object that we can attach the dot length property too. But when we look at our welcome again, we're back to the string Primitive. If we run through the same process with our superhero, we will see that it starts as an object and remains an object. As a result of this lesson, you should now know why and how primitives behave like objects when they have to. It is very unusual to use the object function constructor to make a string. Why? Because you don't need to. To save space, the JavaScript engine will convert your string into an object toe, access its properties and methods when necessary, Then return that object back into a primitive. This will save memory consumption. Objects are bigger than primitives. So when we can just convert to an object when we need Teoh, we keep a low memory footprint. So when should you use an object function constructor to create a string object? Not often, because javascript is more than happy to do that work for you. Thanks for joining me in this lesson of looking at the secret world of javascript primitives