Lecture 45, Part 1: Creating Objects Using 'new Object()' Syntax

Loading...

From the course by Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

3964 ratings

Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

3964 ratings

Course 4 of 6 in the Specialization Ruby on Rails Web Development

Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones. In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

From the lesson

Introduction to Javascript

What fun would a web site be if there was no functionality to it? In this module, we are going to concentrate on learning the fundamentals of the Javascript language. A lot of even seasoned developers “tinker” with Javascript without really understanding how the language works. That leads to viewing the language as more of a nuisance instead of a powerful tool. That is why we are going to concentrate not only on the “how” but also on the “why”, so you are empowered by the Javascript language features, not confused by them. We’ll cover just about everything - from common language constructs and Javascript types to objects, functions, arrays, closures, and scope isolation.

Lecture 45, Part 1: Creating Objects Using 'new Object()' Syntax7:25

Lecture 45, Part 2: Creating Objects Using Object Literal Syntax5:55

Lecture 46: Functions Explained8:34

Lecture 47, Part 1: Passing Variables by Value vs. by Reference6:39

Lecture 47, Part 2: Passing Variables by Value vs. by Reference7:34

Lecture 48: Function Constructors, prototype, and the 'this' Keyword12:02

Lecture 49: Object Literals and the 'this' Keyword6:44

Meet the Instructors

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[MUSIC]

In a lecture on JavaScript types we mentioned one very special type,

that is object type.

An object is, again, a collection of name-value pairs.

In this lecture we're going to go over how to create objects in different ways and

how to assign properties, in other words how to create those name-value pairs.

Okay, so currently I am in the sublime text, and

I'm looking at script.js and I'm located in the lecture 45 folder.

Let me go ahead and close the file explorer and

what you see in front of you is a very simple object creations, so

we're creating a company variable and we're setting it to new object.

Once we created a reference to an object,

we're ready to create properties of that object.

Now in JavaScript, when a property doesn't exist and you simply mention that property

in an object, JavaScript engine creates that property for you.

So for example, we'll say company.name and

that property name doesn't exist yet but but the second I set it to something or

the second I mention it on the object, it becomes a reality and now it does exist.

So now if I go ahead and do console.log and

I output the company object, I'll see.

Let me save that and you'll see that now the company object has a name property and

the name property value is Facebook.

But let me erase that and I can keep going and say company.ceo and

I want ceo to have several properties and I want ceo to be an object by itself so

let me just go ahead and try this.

First name is equal to Mark and let's go and save that and

maybe we'll do console.log and we'll output company again.

Then let's see what happens.

Then we save it.

We're going to get an error.

What is the error?

The error is, cannot set property first name of undefined.

Now what is going on here?

Why is this not working?

The reason this is not working is because, company.ceo,

is something that hasn't been defined yet.

Remember just like if we had said, var a and

then try to do a.hello equals hello.

Let me comment this line out.

So if I save that it will give me a hello of undefined.

Cannot set property hello of undefined.

So it's the same type of issue.

So what do I have to do here?

Let me uncomment this line.

What I really have to do here is I can specify that firstName, but

I first have to create the .ceo property.

So let me go ahead and copy it here and say here, new object.

Once I set ceo to the new object, now I can set the property firstName in it.

Let me go ahead and save that.

And now I can see that Object has firstName, and it has ceo,

which is also an object.

So if I open that up and as ceo is an object and ceo has first name, Mark.

Well, let me set another property.

Let's give Mark his favorite color.

The ceo fav color.

Now give it blue, since Facebook is blue.

And we'll print it out again for the screen.

So now we have ceo fav color and first name.

And just like I set the properties with a dot notation,

I could certainly get at the property with a dot notation.

So for example, let me do another console.log and I could say that,

let's say company CEO name is and

put a space and I'll do string cognition and I'll say company.ceo.firstName,

okay and we'll put a semicolon at the end.

And we're kind of going off the border here.

So when we will just JavaScript is very liberal with spaces so we'll just do that.

And when we save it, we can see it now says, Company CEO name is Mark.

So the JavaScript engine traversed the object's company and

went to the CEO property, which is also an object.

And then, went and retrieved the first name property.

Now the dot notation is not the only way for me to get at the properties.

I could also do the following.

I could say consoles go in the console.log.

Console.log and what we'll do this time is we're going to use the bracket notation,

so we'll say company and we'll say bracket name, and

name will be in quotation marks because now we're getting at the property name.

And the name is a string.

And go ahead and output that.

So you see now it's getting to be Facebook.

So I can get at the company name using the bracket notation,

not just the dot notation.

Now why does there two notations here?

Why can't I just use the dot notation?

Well the reason I can't always use the dot notation, is because the dot notation will

only work with whatever is a valid JavaScript identifier, or

valid JavaScript, either function name, or valid JavaScript variable name.

So for example, if I wanted to say, that company.$stock.

And remember dollar sign is something JavaScript variables,

identifiers and function names are allowed to start with.

And I'll say stock = 110.

Let's say that's how much it is.

And I'll go ahead and do console.log and console open up company and

we'll output that.

You can see that the stock property got set to 110.

But what if I wanted to be kind of, you know, very dramatic.

I don't want to just say stock.

I want to say stock of company.

And put spaces in here.

I can't really do that, I can't really do that either.

That wouldn't work either.

However what work is,

instead of the dot notation, I'll put it in the brackets notation.

And when I do that and save it, you'll see that our

property's now named stock with a dollar sign of company.

And we could probably remove the dollar sign now.

That was only for the effect of the variable name.

So now if we look we have stock of company and that is the name of our property.

So I can now go and retrieve the stock price by saying, okay, stock

price is and we'll concatenate this string and say company and

since I can't really do a .stock price because it's stock of company,

what I could do is I could use the bracket notation the same way and

say stock of company.

And if I save that I'll see stock price is 110.

And notice that it doesn't have to be a string literal here.

I can actually set it to a variable so if I go ahead and cut that out of here and

say, var stockPropName and I will set it

to "stock of company" and I'll go ahead and use stockPropName right here.

And we'll do the same thing over here.

Let's do stockPropName.

And if I save that, everything works exactly the same way.

So I'm able to actually calculate the name of the property in my code on the fly.

Okay, so let me fix this up so you can see it a little bit better.

So, if I save it again, everything works as expected.

Now this is a way to create an object and it kind of looks kind of verbose.

That there's new objects everywhere, and I wish there would be kind of a shorter way

to create the same thing that would be much more readable.

And in part two of this lecture,

we're going to take a look at a syntax that does just that.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play