{"id":456,"date":"2013-06-12T07:36:09","date_gmt":"2013-06-12T07:36:09","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=456"},"modified":"2013-06-12T07:36:51","modified_gmt":"2013-06-12T07:36:51","slug":"javascript-refresher-properties-methods-and-types","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/javascript-refresher-properties-methods-and-types\/","title":{"rendered":"JavaScript Refresher – Properties, Methods and Types"},"content":{"rendered":"

Properties and Methods<\/strong><\/p>\n

JavaScript is a dynamic language. We do not need to declare properties or methods on an object prior to using them, for example the following will automatically add a new property and method to an object<\/p>\n

\r\nvar o = new Object();\r\no.Message = "Clicked";\r\no.Clicked = function() {\r\n   alert(this.Message);\r\n}\r\n<\/pre>\n
So in the above code we create an instance of an Object and then by calling o.Message we basically add a new property to the object o. Next we create a method on the object. Note: We need to use “this” to access the property from within the method otherwise the code tries to access an undefined variable.<\/p>\n
We can actually add properties and methods as well as access them using indexer notation, for example<\/p>\n
\r\nvar o = new Object();\r\no["Message"] = "Hello";\r\n<\/pre>\n
and this allows us to even call methods dynamically such as<\/p>\n
\r\nvar clicked = "Clicked";\r\n\r\nvar o = new Object();\r\n   o["Message"] = "Clicked";\r\n   o["Clicked"] = function() {\r\n      alert(this["Message"]);\r\n   }\r\n\r\n\r\n   o[clicked]();\r\n<\/pre>\n
So in the above we can dynamically change the method called (assuming we had more than one method).<\/p>\n
We can also iterate over the members of an object using the following <\/p>\n
\r\nvar o = new Object();\r\n   o["Message"] = "Clicked";\r\n   o["Clicked"] = function() {\r\n      var s = "";\r\n      \/\/ iterate over the object\r\n      for(var p in o)\r\n      {\r\n         s = s + p + ";"\r\n      }\r\n      alert(s);\r\n   }\r\n<\/pre>\n
Using the for..in loop we simply iterate over and object, the string “s” will be “Message;Clicked”.<\/p>\n
Finally, we can add properties and methods, but we can also delete them using<\/p>\n
\r\ndelete o.Message;\r\n<\/pre>\n
This deletes the Message property from the object o.<\/p>\n
Types<\/strong><\/p>\n
JavaScript is loosely types. We declare variables using the var keyword and a variable can change type at any time, for example<\/p>\n
\r\nvar tmp = 3.1415926;\r\ntmp = "Hello";\r\n<\/pre>\n
The runtime will not complain about the type conversion from a floating point number to a string.<\/p>\n
JavaScript has a small number of types which include, string, number, boolean, array and object.<\/p>\n
    \n
  • A string may be declared using either double quotes or single quotes, obviously this helps when the string is declare inline.<\/li>\n
  • A number can be declared with or without decimal places (in other words it can be floating point or an integer).<\/li>\n
  • A boolean may be true or false (as one would expect)<\/li>\n
  • An array can be declared in various ways (described later) and can store heterogeneous data types<\/li>\n
  • An object can be declared and properties and methods assigned to it (see above)<\/li>\n<\/ul>\n
    If a var is not assigned a value it is “undefined” (which is itself a type), basically this is a variable that has no value, but we can also use null to denote an “empty” value.<\/p>\n
    Declaring Arrays<\/em><\/p>\n
    Arrays can be declared in various ways, for the first example we declare an array and then we dynamically add items by creating an index to them<\/p>\n
    \r\nvar vowels = new Array();\r\nvowels[0] = "a";\r\nvowels[1] = "e";\r\nvowels[2] = "i";\r\nvowels[3] = "o";\r\nvowels[4] = "u";\r\n<\/pre>\n
    A couple of alternatives are <\/p>\n
    \r\nvar vowels1 = new Array("a", "e", "i", "o", "u");\r\nvar vowels2 = ["a", "e", "i", "o", "u"];\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
    Properties and Methods JavaScript is a dynamic language. We do not need to declare properties or methods on an object prior to using them, for example the following will automatically add a new property and method to an object var o = new Object(); o.Message = "Clicked"; o.Clicked = function() { alert(this.Message); } So in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45],"tags":[],"class_list":["post-456","post","type-post","status-publish","format-standard","hentry","category-javascript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=456"}],"version-history":[{"count":7,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/456\/revisions"}],"predecessor-version":[{"id":463,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/456\/revisions\/463"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}