Introduction to JavaScript Objects and Their Properties - What Is the Object() Constructor, and When Should You Use It?

[ryanqpublic]

Tell us what’s happening:

Some of the console.log() examples in this lesson have no result next them. Am I correct that this is a mistake? I’m having a hard time absorbing the lesson and I’m wondering if it’s because I’m missing those logs.

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Challenge Information:

Introduction to JavaScript Objects and Their Properties - What Is the Object() Constructor, and When Should You Use It?

freeCodeCamp.org

Github Link: freeCodeCamp/curriculum/challenges/english/blocks/lecture-introduction-to-javascript-objects-and-their-properties/6732b758194c97257d23fc72.md at main · freeCodeCamp/freeCodeCamp · GitHub

[hbar1st]

it would help if you gave us an example.

here for example is one log without the output listed next to it, but there is no need for it to be listed as it is shown on the right-hand-side anyway

[Guided]

I dont think its a mistake.

I’m assuming you were expecting something like this:
console.log(toObject(null)); // {}
console.log(toObject(true)); // Boolean { constructor: { name: “Boolean” }}
console.log(toObject([1, 2, 3])); // [1, 2, 3]

With some longer inputs it doesn’t really make sense to do this in code snippets, since users may need to scroll horizontally to see it all.

In some documentation you might see output displayed beneath the code, like this:

console.log(toObject(null));
console.log(toObject(true));
console.log(toObject([1, 2, 3]));

========

{}
Boolean { constructor: { name: “Boolean” } }
[1, 2, 3]

As for the material, Some programming concepts are harder to understand until you have a chance to use them.

[ryanqpublic]

I didn’t realize the interactive editor worked in these contexts. I’ve never enabled it. However, now I’m more confused. I don’t understand what I’m looking at here…

Number { constructor: { name: "Number" } }

As to my original confusion, that was one of the examples I was thinking of. Shouldn’t…

console.log(numObj);

…yield 42? Or maybe a whole, unnamed object which includes “num: 42”? And if not, why is this line here? Is the purpose of its emptiness to illustrate something? I would say the need for it to not be empty is for consistency of the presentation of the lessons.

Another example is the third example box. Shouldn’t…

console.log(toObject(null));

…show {}, and so on?

[ryanqpublic]

I was expecting to see the first and third of your top examples, but I might have expected just true for the middle one. I don’t know what Boolean { constructor: { name: “Boolean” } means.

I guess what I expect is for all of the lessons to use consistent methods. Up until this point, console.log was always presented side-by-side with a result, so when it comes up empty, it makes me think that either there is an error on the site or I’m not understanding something. Making use of concepts definitely helps with the learning process, but to me the issue here is the presentation of the lesson.

Horizontal scrolling wouldn’t be a problem to me because that seems to be the norm on websites with code snippets.

[hbar1st]

@ryanqpublic

Shouldn’t…

console.log(numObj);

…yield 42? Or maybe a whole, unnamed object which includes “num: 42”?

42 is a primitive while what we see numObj is, is an Object of type Number. Those two things in JavaScript are different.

If you then proceed to use the returned Object to construct the object then try to log that then you will see 42

@ryanqpublic

why is this line here? Is the purpose of its emptiness to illustrate something?

I didn’t understand what line you meant here.

@ryanqpublic

Another example is the third example box. Shouldn’t…

console.log(toObject(null));

…show {}

Yea it does return {}. Look at what is being returned. Once you understand that calling Object as a function just creates an Object wrapper for the given value, then you should understand the output

[ryanqpublic]

Thanks for trying to help. I’m not sure what your coding background is, but I’m coming from a place where the entirety of my coding learning and experience is the full-stack curriculum up to this point (just HTML, CSS, and a bit of JavaScript). So there’s a lot that might be obvious to others than is just currently beyond me.

Your reply seems to refer to something I’ve heard about but not encountered (unless it was a typo, but I don’t think it was).

“If you then proceed to use the returned Object to construct the object then try to log that then you will see 42.” Is there some difference between Object with a capital O and object with a lowercase one? If so, we haven’t learned about that yet.

I also don’t believe we’ve been taught that there are types of objects. In the lessons thus far we’ve been taught that objects are containers for key-value pairs, which values can be numbers, strings, functions, etc. So the concept of an object with the Number type is foreign to me. As for constructing them, prior to this lesson we’ve learned that you create them like variables but they look like :

const car = {type:“Fiat”, model:“500”, color:“white”};

So based on what we’ve learned, I wouldn’t know how to construct an object with a returned object.

Trying to navigate this thread and consider yours and @Guided 's responses, and having gone through the lesson again, I have a better understanding of my issues with it so will leave a more detailed post below.

[ryanqpublic]

Ok, I went through the lesson again. I still have the same issues, but am better able (I think) to express them. Sorry if this comes across as harsh. It’s not meant to be, but I’m trying to present a tangle of things in a concise way.

There are actually two separate issues with this lesson, as I see it.

1. Inconsistency with how previous lessons have worked

When I open any lesson, including this one, the Interactive Editor is not open. It’s possible that in a much earlier lesson there was some brief mention of the editor, but I don’t remember it and have gotten through all of the lessons so far without even noticing it. That’s because, in every lesson, if console.log is included in a code block, it has the return value or some explanation in a comment next to it. In this lesson, a couple of the code blocks have console.log() with no comment next to it, so to me they were empty and I couldn’t see what was happening.

I see now that the return values are shown in the editor, but think the lesson should still be changed to make it consistent with the others, and also with itself (because there are some logs with comments next to them and some without, with no discernible reason for the disparity).

2. The lesson itself is unclear

There are enough things about this lesson that are unclear that I don’t feel I’ve learned much. It doesn’t:

-explain what this syntax from the editor means:

Number { constructor: { name: "Number" } }

It looks like an object called Number, which contains a property called “constructor,” whose value is a property called name, which has the value of “Number.” Based on what we’ve learned so far, this is not understandable.

-explain what is being created and how we would use it. I know it’s an object, but based on the Interactive Editor and my own experiments in Firefox’s console, I don’t know how this relates to what we were taught about an object being a wrapper that looks like { property: value, property: value }. What happened to the 42? This should show up somewhere other than the creation of the initial variable.

-explain what the difference is between using the new keyword and not using it, and when we would choose one over the other

-give us an answer to the question that follows the lesson, “When might you use the Object() constructor instead of object literal notation?”

[hbar1st]

Coding is an ‘active sport’. That is, you should expect to participate in your learning rather than sit back and let the concepts come to you passively. Now, what that effectively means, regardless of how fCC presents their material, is that you should
1- ask questions when you don’t understand something (that’s why you’re here, so that’s good) - you can also look up concepts outside of fCC to get different explanations that may yield more insight. (a good resource for this is the MDN website)
2- test what you see (or are learning) in an editor (whether the one provided or an external one online or a local one on your computer)
3- play around! (that is, mess up what you see and break stuff or build stuff!)

So w.r.t. the issues you noted around inconsistency or not noticing the editor or information not being presented well, I would strongly urge you to go ahead and open a GitHub issue with essentially what you described earlier so that the maintainers can consider improving the material in future.

for now, I would personally not worry too much about understanding the difference between object and Object right now, beyond knowing that objects are a representation of data that are not primitives. Later on, when you learn what a class is, you can try to connect some dots between that material and this one and come back to this to see if you can gain a different insight into it.
(quick tip: Object with a capital is a special type of data type which lets you make objects. It is what you will learn about later is referred to as a ‘class’. So you can think of it like a blueprint for making objects of various types. But you will gain more bits and pieces of information about this as you get deeper into JS)

[Guided]

I feel for you. I had the same complaints when I first started learning.

The truth is, no matter how good the course material is, how in depth they make it, you’ll still forget and miss important points.
Its not enough for someone to tell you how to do something, to truly understand it you need to use it.

So dont wait to use it.
When you come across something new, try it out in the editor, make mistakes, then look for documentation.
Reading documentation is a skill you will need as a programmer. Its not always easy and can take a little time.

I wanted to post you this link yesturday, but wasn’t sure if it would leave you more confused
Its from the MDN documentation hbar1st mentioned. I use these docs all the time when learning or working on a project.

When you read through the documentation dont worry if you dont understand it.
Read through the page once then click on links to other pages if you need more info.
I’d recommend not clicking more than one link when reading docs, they can be a bit of a maze, try not to get lost.

Heres the link to the Object constructor

Some extra stuff I’ve picked up from other developers:

• Keywords are just functions built into a language. (like the new keyword)
• Functions can return different things depending on the arguments type or the number of arguments it receives
• Types are important even in languages without strict typing
• The brackets () indicate a function to be executed, if a function name is used without the brackets, it is a reference to the function (like a variable) and does not get executed.

function say() {
    return "hello";
}

console.log(say);   // does not execute, prints the function
console.log(say()); // executes, prints "hello"

• object constructors are a type of funciton that returns an object when executed
• console.log is just a type of function someone else wrote. It does its best to print its arguments in a readable way, its not perfect.

[ryanqpublic]

@hbar1st

you can also look up concepts outside of fCC to get different explanations that may yield more insight.

Yes, I do do that… although I’m more likely to use w3schools or web-design blogs. MDN is much more advanced so, most often, it explains the thing I don’t understand using terms I don’t understand. Definitely a great source of info, though.

@hbar1st

I would strongly urge you to go ahead and open a GitHub issue with essentially what you described earlier so that the maintainers can consider improving the material in future.

Ok, I’m glad you said that. I have done that before for FCC issues but, prior to this back and forth with you two, I wasn’t sure to what extent I was simply missing something. Didn’t want to add unnecessarily to the pile but now I do feel confident it should be brought to their attention.

@hbar1st

Object with a capital is a special type of data type which lets you make objects. It is what you will learn about later is referred to as a ‘class’. So you can think of it like a blueprint for making objects of various types.

Excellent. This alone is a much better explanation than the very little I found online when I went looking to see if there was a difference. (It’s not so easy to research the difference between two words whose only variation is lower-case vs. upper-case!)

[ryanqpublic]

@Guided

I wanted to post you this link yesterday, but wasn’t sure if it would leave you more confused

Haha, thank you. It doesn’t take much! I did check that link out when I was trying to figure things out but the jargon very quickly became thicker than I could handle. Usually I have better luck understanding w3schools, but less so this time.

@Guided

console.log(say);   // does not execute, prints the function
console.log(say()); // executes, prints "hello"

This is very helpful. Thank you. When it comes to coding-type stuff, seeing things presented like this is often easier to wrap my mind around than reading something like MDN and trying to mentally convert heavy paragraphs into code.

@Guided

Its not enough for someone to tell you how to do something, to truly understand it you need to use it.

I like w3schools because, not only is it concise, but each code example they give can be opened in an editor that allows me to play around with it in different ways. I did, just since this thread, try doing the same in the FCC Interactive Editor. It worked to some extent but anytime I typed anything, in addition to the result I was looking for, I would get a huge stream of text I didn’t understand against a red background. It looked like errors or something.

One thing I liked about the previous FCC curriculum (which they replaced with this full-stack one), is that it was more hands-on. They would explain a thing while they were getting you to do it. This curriculum is more of a series of lectures punctuated by small projects. The lectures generally give more detail than before, which is great, but there’s less hands-on work, which is not so great (for me at least).

[Guided]

It worked to some extent but anytime I typed anything, in addition to the result I was looking for, I would get a huge stream of text I didn’t understand against a red background. It looked like errors or something.

Dont let this scare you.
I know it looks horrible, but not all errors or warnings are because you’ve done something wrong.
If your in a “playground” editor in a webpage some of the errors can be ignored.
Scroll down to see if what you wanted is present. If it is, ignore the errors. If not go through the errors and find the ones that seem like they might matter to you.

The error here does not matter to me, its just the console complaining because I changed something. Only the last line matters.

You’ll get errors and warnings in your terminal all the time when you make a webpage.
A lot of the errors will refer to things like resources being invalid or not found. Sometimes you need to add multiple resources for different browsers to read. The browser will take the one it can understand and will probably complain about the rest

Do you know how to open Devtools in your browser?
Are you able to create a simple “hello world” webpage locally on your device?

[ryanqpublic]

@Guided

If your in a “playground” editor in a webpage some of the errors can be ignored.
Scroll down to see if what you wanted is present.

Ok, good to know. Yes, I noticed the errors started as soon as I started to type anything, but I did see the result I was looking for at the end of it.

@Guided

Do you know how to open Devtools in your browser?

Yes, that’s actually how I do all of my practice outside of Free Code Camp. I’ve made a couple of websites that I just run locally. Just HTML and CSS, though. It’s great for toggling back and forth between different viewport sizes. I’ve also used the console part of devtools a bit, just to test some of the JavaScript stuff I’ve learned or been having trouble with. It also throws a lot of what look like errors or other messages that don’t (yet) mean much to me… but not of the big red wall variety.

[Guided]

When you look in devtools your looking at an object representation of a webpage, known as the DOM (Document Object Model).
This is created by your browser from the HTML when you go to a webpage.

In devtools you can make changes to the DOM and have them display locally on your machine. Refresh the page and a new DOM is created.

Javascript manipulates the DOM.

Errors can be really cryptic. Try to get into the habit of copy and pasting them into a search engine. You should be able to find a better explanation. Errors will become your best friend once you understand them