Organizing and Simplifying JavaScript with Object Literals - 12

Play Organizing and Simplifying JavaScript with Object Literals - 12
Sign in to queue


Developers coming from Object Oriented Programming backgrounds may notice similar constructs (objects, the new keyword, etc.), but in JavaScript these ideas are implemented much differently. This video demonstrates the creation of simple objects called "object literals" to keep related properties and functions (methods) together in one structure.  Finally, Bob demonstrates using constructors and the new keyword to show how different these ideas are from other programming languages.





The Discussion

  • User profile image

    Re-opening this closed thread ...

  • User profile image
    Lee Wood

    You say that "status:" and "rescueBatman:" are variables, so why do you use ":" to define the variable, why can't you use "="?

    also you don't explain object literal very well, this is supposed to be for Absolute Beginners and you were speaking about it as if we have previous knowledge like with C# and it sounds very complicated so this lesson really did nothing for me while the other previous ones have been good.

  • User profile image

    @Lee Wood: Hey Lee, sorry this video didn't do a very good job of explaining it.  If / when I ever re-do this video, I'll pay more attention to how I go about this.  Thanks for the feedback.

    If I said that those object members are "variables", that was a misstatement and I apologize.  They are MEMBERS of an object.  Objects can have properties (attributes) and methods (functionality).  In this case, "status" is a property / attribute, and "rescueBatman" is a method.  Both are members of the whole, of the new object.  We set a reference to that new object using the equals = operator.

    Why use a colon : and not an equals = operator? Here are two examples that are functionality equivalent:

    var myObject = {
        firstProperty:'some value',
        secondProperty:'some other value'};

    .. is functionally the same as:

    var myObject = new Object();
    myObject.firstProperty = 'some value';
    myObject.secondProperty = 'some other value';

    You'll see the former syntax (with the colon : ) more often in JavaScript because it is so compact. In fact, as you learn more, you'll that this is the defacto way to pass data between servers and web browser clients using this exact style of syntax, called JSON (IavaScript Object Notation) BECAUSE it is so compact. More about that in an upcoming video.

    Hope that helps? Please feel free to follow up ... we'll get to the bottom of this! Smiley

  • User profile image
    Bill Cooper

    Hi Bob,

    Great series that has been a break through for me.
    I have a problem similar to our poster above in that I'm a total non programmer who is "undefined" at this point. In your last example in this video, you state that we want our car to have a make property, and we assigned it to the temp variable "make" that was passed into the constructor. You also stated that you hoped it didn't throw anyone.

    I'm tossed :). Regarding

    function car(make, model, year){
    this.make = make;
    this.model = model;
    this.year = year;

    I hope I am not asking to much if I could inquire about a little deconstruction on that point? I'm one of those that over-thinks everything down to the nub, so I've gone and confused myself. Especially because I am completely unfamiliar with the word/object/command "this", what it does, and how it is used.
    (I understand it is a complex power word, but an overview of it's use in the context of just this instance would help)
    To add to my confusion, I'm not sure which instance is the temp variable (this.make?), and when you stated that we passed it into the constructor, I'm wondering if you are referring to the first line in the braces, or if you are saying we are passing it into the finished total block of constructor code.

    Oddly enough, I see clearly that this works, I'm just not so sure on the how/why in the block mentioned above.

    Thank you so much for opening my eyes so far.


  • User profile image
    Bill Cooper

    Regarding "this" usage, the following tutorial about covers nicely:

    Thanks again.


  • User profile image
    Arcangel Panda

    Hi Bob, i'm working with JavaScript, HTML5 and CSS3, and have some questions maybe you can help me, i been following the tutorials but what can i do in that case: i have the javascript, but i don't want the data inside a JavaScript file can be seen or download, i mean if i put on a webpage, you just need to right click the page see source code, look at the name of the js file and write the path int the browser, so how can i prevent this or encript the file to no one see the content but still can be called on the page, some advice to this ?, another question is to recover the windows user, machinename, and domain name from a sesión this to authentificate user on a database without required it everytime and validate the source of the connection, i don want to use asp o jsp o other things diferents from HTML5, JS, CSS3 unless is absolute necesary, thanks (y)

  • User profile image

    @Arcangel Panda:

    re: how can you hide the data from prying eyes?  Great question.  "If there's a will, there's a way." I can almost always get at the data, whether through URL hacking, viewing source or using a network sniffer like the one built into F12 tools.  If the data is non-sensitive, then I wouldn't worry about the 1% of people that would look at the source.  However, if you're building a game or a business app that requires you keep the data private, your best choice is to really think through the entire architecture of the app you're building.  Your architectural strategy will likely require you consider BOTH client-side development and server-side development impact.  It might require you only deliver user-specific JSON data from a web service hosted on a web server for that specific user.  If the user wants to view it, fine.  He's only viewing data pertaining to HIM specifically.  You might use a server-side technology like ASP.NET Web API for this purpose.  If you want to encrypt the data somehow, that would be a bit more challenging ... I would seek out a jQuery library for that purpose.  I would start with the following search terms on "jquery encrypt json" or try variations on that.  There might be some good Stack Overflow threads that would be helpful as well.  In all things that are architectural in nature ... "it depends".  If you gave me more details I might be able to point you in the right direction.

    re: database connection / user session ... I have to admit I don't really understand the question.  Could you clarify this a bit?  I think you may be confusing the role of server-side permissions and client-side permissions?  But I'm not really sure.

    Good luck!

  • User profile image

    wow, this was like way out there for this true beginner. i think i may need to find an easier series. i got lost so badly, royally confused.....i don't know if watching lecture 12 over and over again will change it.

    was just for my taste a bit too much info in too short of a time span....ugh. im fearing i will not be very good at this JS

  • User profile image

    @baerspective: I'm sorry this one was a toughie for you.  If you're willing, I'd be glad to try and help and break it down into more digestible bits.  Can you identify when things begin to fall apart?  What was your first moment of confusion?  We can work through this ... don't let Object Literals stop you!!!

  • User profile image

    A few lessons back you were working with an array and used 'if i < array.length'. I am having a little difficulty understanding why it is not written 'if i <= array.length'. Is the array length in JavaScript one more than the actual array items? Although I watched you run it and saw it worked fine, it would appear to me that the last item in the array would net be presented if you are testing for less than the array length. Could you please explain why this works? Thanks in advance!

  • User profile image

    OK, as Gilda Rader's Emily Litella character used to say "Never Mind!" I believe I have answered my own question. Having work with the ASP.NET list control, I am assuming that array.length is similar to list.count. The items in the list/array are 0 based while the count/length starts with 1.

  • User profile image

    Hello Bob,

    I have found your tutorials very useful up to this point, thank you very much for creating them.

    I have tried the code for this lesson several times, and downloaded your source files, yet when I open them in my browser they do not work. Is there any reason why this could be happening? Everything was working fine up to this point and I have double checked that javascript is enabled in my browser...

  • User profile image

    @Stevan: For the sake of debugging ... can you try the other examples that you download from here and see if they work ... both before and after this lesson.

  • User profile image

    a missing , before cities didn't allowed my script to run am using notepad. thanks for the tutorial

  • User profile image

    How would you create a new instance of the planet var? = "Old Name";
    z = planet; = "New Name";
    document.write("Planet name: " + + " Z name: " +;

    This outputs "Planet name: New Name Z name: New Name "

  • User profile image

    @Robin: In this case, you're merely assigning z a reference to planet.  That's not creating a new "instance" of the Planet object.  However, this does lead to a larger issue ... if you're a VB.NET or C# developer you're used to the concept of a class.  JavaScript doesn't work that way exactly.  Instead, you have the notion of prototypes.  I intentionally different cover that because, frankly, it scares me.  Smiley

    Here's a good start ... if nothing else, you can use this topic as a jumping off point:

Add Your 2 Cents