Jump to content
Sign in to follow this  
Wirral

Meaning of ‘object’ and ‘property’

Recommended Posts

I’m working my way through Javascript Step by Step (Steve Suehring, Microsoft Press) and I’m having difficulty understanding the way the words ‘object’ and ‘property’ are used in the book. In this post I will put verbatim extracts from the book in blue. Things start off simply enough: You can create an object in Javascript in two ways: * Using the new keyword, as shown here: var star = now Object; * Using curly braces, as shown here: var star = {}; The author explains there is no concept of classes in Javascript, but shows how to create objects using pseudo-class constructors: var star = {}; function Star(constell,type,specclass,magnitude) { this.constellation = constell; this.type = type; this.spectralClass = specclass; this.mag = magnitude;} star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0);star["Mizar"] = new Star("Ursa Major","Spectroscopic Binary","A1 V",2.3);star["Aldebaran"] = new Star("Taurus","Irregular Variable","K5 III",0.85);star["Rigel"] = new Star("Orion","Supergiant with Companion","B8 Ia",0.12);star["Castor"] = new Star("Gemini","Multiple/Spectroscopic","A1 V",1.58);star["Albireo"] = new Star("Cygnus","Double","K3 II",3.1);star["Acrux"] = new Star("Crux","Double","B1 IV",0.8);star["Gemma"] = new Star("Corona Borealis","Eclipsing Binary","A0 V",2.23);star["Procyon"] = new Star("Canis Minor","Double","F5 IV",0.38);star["Sirius"] = new Star("Canis Major","Double","A1 V",-1.46);star["Rigil Kentaurus"] = new Star("Centaurus","Double","G2 V",-0.01);star["Deneb"] = new Star("Cygnus","Supergiant","A2 Ia",1.25);star["Vega"] = new Star("Lyra","White Dwarf","A0 V",0.03);star["Altair"] = new Star("Aquila","White Dwarf","A7 V",0.77); The heading he puts on this section is Assembling a star object using a pseudo-class. Note he uses the singular. He doesn’t say ‘Assembling star objects’. The next section is headed Displaying Object Properties and has the following code and explanation: With a for…in loop, you can loop through each of the properties in an object: DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Properties</title> <script type="text/javascript"> var star = {}; function Star(constell,type,specclass,magnitude) { this.constellation = constell; this.type = type; this.spectralClass = specclass; this.mag = magnitude; } star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0); star["Mizar"] = new Star("Ursa Major","Spectroscopic Binary","A1 V",2.3); star["Aldebaran"] = new Star("Taurus","Irregular Variable","K5 III",0.85); star["Rigel"] = new Star("Orion","Supergiant with Companion","B8 Ia",0.12); star["Castor"] = new Star("Gemini","Multiple/Spectroscopic","A1 V",1.58); star["Albireo"] = new Star("Cygnus","Double","K3 II",3.1); star["Acrux"] = new Star("Crux","Double","B1 IV",0.8); star["Gemma"] = new Star("Corona Borealis","Eclipsing Binary","A0 V",2.23); star["Procyon"] = new Star("Canis Minor","Double","F5 IV",0.38); star["Sirius"] = new Star("Canis Major","Double","A1 V",-1.46); star["Rigil Kentaurus"] = new Star("Centaurus","Double","G2 V",-0.01); star["Deneb"] = new Star("Cygnus","Supergiant","A2 Ia",1.25); star["Vega"] = new Star("Lyra","White Dwarf","A0 V",0.03); star["Altair"] = new Star("Aquila","White Dwarf","A7 V",0.77); </script></head><body><script type="text/javascript" > for (var propt in star) { alert(propt); } </script></body></html> View this page in a web browser. You are presented with an alert() dialogue box for each of the stars in the star object, for a total of 14. Here’s an example of the type of dialog box you see: (displays alert box with 'Polaris', followed by 13 more alerts, Mizar through to Altair) This step-by-step builds on the earlier example of using pseudo-classes to define properties of objects. In this case, a star object was created with the following code: var star = {}; That object was then given several properties of individual star names by using a call to create a new Star [sic] object (using the pseudo-class): star["Polaris"] = new Star("Ursa Minor","Double/Cepheid","F7",2.0); Each property of the original star object, in this case the name of each star, was then enumerated within the <body> of the code using a for…in loop: for (var propt in star) { alert(propt); } You might be wondering how to get the actual properties of the stars, such as the constellations, magnitudes, types and spectral class. Chapter 14 shows you how to enumerate through each of these. The bits in bold are what trouble me. Here are my questions: 1. When the block of code above is run, how many objects are created in total? 1, 14 or 15? 2. Would it be right or wrong to call the result a collection of objects (in the sense of a Visual Basic collection)? 3. Is the word preceding my [sic] mark a typo for star, seeing that Star is the name of a function, not an object? 4. When the author refers to the named properties of star (constell, type, specclass, magnitude) as it’s ‘actual properties’ (his last para), is he implying that the star name (e.g. Polaris) is not a true property? Hope someone can clear this up so I can get on to the next chapter!

Share this post


Link to post
Share on other sites

It's almost like this author went out of his way to confuse people. 1. You could get some argument here, but it's not important. There is 1 object. (To be more specific, there is 1 object in the global context.) That object is called star (lowercase). It has 14 properties (which we can also call elements). They are named "Polaris" "Mizar" and so on. Each of those properties is an object of type Star (uppercase). 2. In the world where JavaScript meets the HTML DOM, it is wrong to call these objects collections. That term is reserved for a collection of DOM nodes. Most nodes are HTML elements that are a part of your HTML document. Node collections are returned by special DOM methods. You don't need to know what that means yet. All you need to know is that the word collection has a special meaning here. The star (lowercase) object created above is a lot like a JavaScript array and like an array created in most languages that use the term "array." It is not a true JavaScript array because it does not have direct access to array methods. I personally find it useful to create an array when all the elements are of the same type and I might want to use native array methods. I create objects when I need the properties to be of different types, and especially when one or more of them will be a method (function). 3. Not a typo. Star (uppercase) is a function being used as an object constructor. (The word new when it is called makes it a constructor). Constructors name the type of object, and their return value IS an object. 4. Language is tricky, and this is where the author could have helped us out by not naming the global object star (lowercase). The properties of star (lowercase) are the Star (uppercase) objects named "Polaris" and so on. Those names are not properties of the Star (uppercase) objects. The properties of the Star (uppercase) objects are "constellation," "type," "spectralClass," and "mag." (Note the spelling. These properties are identified in the constructor.) When the author refers to the "stars" he means the properties/elements of the star (lowercase) object, and when he refers to the properties of the "stars" he is referring collectively to all the properties of all the objects of type Star (uppercase). BTW, I hate the author's use of the term "pseudo-class" here because that term has a special meaning in CSS. In fact, it's 100% incorrect to use the word class in JavaScript. The correct word is prototype. It is similar to class, so using words like "class" is useful in early lessons for the sake of readers who understand what a class is in other OOP languages, but it should be discarded quickly. I hope some of that helps. :)

Edited by Deirdre's Dad

Share this post


Link to post
Share on other sites

Deirdre's Dad, thankyou for that highly illuminating answer. I think I now understand the distinction between star (lowercase) and Star (uppercase). The penny dropped as I read your use of the word 'type'. Perhaps the author avoided the term in case his readers were unfamiliar with it. He does briefly mention prototypes. For interest, I'll type the paragraph: The creation of a class-like interface in this section used the constructor pattern. The constructor pattern is helpful but results in multiple instances of the same method being created each time the object is initiated. A better, but more advanced, way to create multiple objects is to use a prototype pattern. For more information about creating objects using prototypes, see http://msdn.microsoft.com/en-us/magazine/cc163419.aspx I had a quick look at that link but it is not for beginners :umnik2: . Maybe in a year's time :dirol:

Edited by Wirral

Share this post


Link to post
Share on other sites

That is interesting. In Javascript I rarely want to climb out on the OOP limb unless I am forced to. In the example above I would not really know what was being created since Javascript allows vars to be created without requiring var declarations and doesn't care about typing either. Is star an array of objects, or an object that is an array of objects, or what? Is there a different more understandable declaration scheme that would be equivalent? Thanks

Edited by davej

Share this post


Link to post
Share on other sites

star is an array (associative, or in other words just an array that uses non-numeric indexes, which is also just an object in JS) of Star objects, created using the Star function constructor (i.e. using new Star()).

Edited by thescientist

Share this post


Link to post
Share on other sites
Is there a different more understandable declaration scheme that would be equivalent? Thanks
The chapter begins with a longhand method of creating the star object: var star = {}; star["Polaris"] = new Object; star["Mizar"] = new Object; star["Aldebaran"] = new Object; star["Rigel"] = new Object; star["Castor"] = new Object; star["Albireo"] = new Object; star["Acrux"] = new Object; star["Gemma"] = new Object; star["Procyon"] = new Object; star["Sirius"] = new Object; star["Rigil Kentaurus"] = new Object; star["Deneb"] = new Object; star["Vega"] = new Object; star["Altair"] = new Object; star["Polaris"].constellation = "Ursa Minor"; star["Mizar"].constellation = "Ursa Major"; star["Aldebaran"].constellation = "Taurus"; star["Rigel"].constellation = "Orion"; star["Castor"].constellation = "Gemini"; star["Albireo"].constellation = "Cygnus"; star["Acrux"].constellation = "Crux"; star["Gemma"].constellation = "Corona Borealis"; star["Procyon"].constellation = "Canis Minor"; star["Sirius"].constellation = "Canis Major"; star["Rigil Kentaurus"].constellation = "Centaurus"; star["Deneb"].constellation = "Cygnus"; star["Vega"].constellation = "Lyra"; star["Altair"].constellation = "Aquila"; star["Polaris"].type = "Double/Cepheid"; star["Mizar"].type = "Spectroscopic Binary"; star["Aldebaran"].type = "Irregular Variable"; star["Rigel"].type = "Supergiant with Companion"; star["Castor"].type = "Multiple/Spectroscopic"; star["Albireo"].type = "Double"; star["Acrux"].type = "Double"; star["Gemma"].type = "Eclipsing Binary"; star["Procyon"].type = "Double"; star["Sirius"].type = "Double"; star["Rigil Kentaurus"].type = "Double"; star["Deneb"].type = "Supergiant"; star["Vega"].type = "White Dwarf"; star["Altair"].type = "White Dwarf"; star["Polaris"].spectralClass = "F7"; star["Mizar"].spectralClass = "A1 V"; star["Aldebaran"].spectralClass = "K5 III"; star["Rigel"].spectralClass = "B8 Ia"; star["Castor"].spectralClass = "A1 V"; star["Albireo"].spectralClass = "K3 II"; star["Acrux"].spectralClass = "B1 IV"; star["Gemma"].spectralClass = "A0 V"; star["Procyon"].spectralClass = "F5 IV"; star["Sirius"].spectralClass = "A1 V"; star["Rigil Kentaurus"].spectralClass = "G2 V"; star["Deneb"].spectralClass = "A2 Ia"; star["Vega"].spectralClass = "A0 V"; star["Altair"].spectralClass = "A7 V"; star["Polaris"].mag = 2.0; star["Mizar"].mag = 2.3; star["Aldebaran"].mag = 0.85; star["Rigel"].mag = 0.12; star["Castor"].mag = 1.58; star["Albireo"].mag = 3.1; star["Acrux"].mag = 0.8; star["Gemma"].mag = 2.23; star["Procyon"].mag = 0.38; star["Sirius"].mag = -1.46; star["Rigil Kentaurus"].mag = -0.01; star["Deneb"].mag = 1.25; star["Vega"].mag = 0.03; star["Altair"].mag = 0.77;

Share this post


Link to post
Share on other sites
The chapter begins with a longhand method of creating the star object:
Hopefully there is something better than that. Maybe...
var star = new Array({}); etc...

Share this post


Link to post
Share on other sites
star is an array (associative, or in other words just an array that uses non-numeric indexes, which is also just an object in JS) of Star objects, created using the Star function constructor (i.e. using new Star()).
There's bound to be argument here. star is actually an object, not an array. Javascript does not have associative arrays, only numeric arrays. Associative arrays in Javascript are actually objects. Even if you mix numeric and string indexes, it is an object where some properties are numbers. In fact, to be really technical, in Javascript even arrays are objects. Everything in Javascript is an object, even a function. That is why you can use the new keyword to create a new object by calling a function, because the function itself is an object (and functions also have properties and methods, like any other object). Anyway, star was declared like this: var star = {}; That is a literal declaration for a generic object (type Object), not an array declaration (type Array). You'll notice that star does not have a length property like normal arrays do. In fact, if you start with a numeric array and add string indexes to it, adding those strings does not increase the length of the array. You're just adding properties to the array object, not new array elements. An example from Chrome's console:
var test_ar = [];
undefined
test_ar
[]
test_ar.push('val');
1
test_ar
[
"
val
"
]
test_ar["prop"] = 'prop val';
"
prop val
"
test_ar
[
"
val
"
]
test_ar.length
1
test_ar.prop
"
prop val
"
Notice that after setting the prop property, the length did not change and that value was not included when the array gets printed.
And why is my text now indented.... whatever.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...