<\/span><\/p>\nObjects<\/h3>\n Let\u2019s dive straight in by looking at an example of an object in JavaScript:<\/p>\n
.gist table { margin-bottom: 0; }<\/p>\n
This is a very simple object with four properties. The first property has the key \u201cname\u201d and the value \u201cDaniel Pataki.\u201d As you can see from the other properties, values may use many different data types.<\/p>\n
What makes objects so useful, but also a little confusing, is that property values can also be functions. If you\u2019ve copy-pasted some jQuery code before you may have seen this in action in the form of callback functions, which looks something like this:<\/p>\n
.gist table { margin-bottom: 0; }<\/p>\n
The code above would send a post request to the given URL. The \u201ccomplete\u201d property invokes a function, which is run when the request has been completed. To see how this would work let\u2019s quickly write a function of our own:<\/p>\n
.gist table { margin-bottom: 0; }<\/p>\n
The object contains a name property and a greeting property, which is a function. Once defined we can invoke that function using the dot syntax: me.greeting<\/code>. You can even reference properties from within the same object using the this<\/code> keyword.<\/p>\nIf you\u2019ve worked with PHP objects before the idea is very similar. The simplicity of the syntax throws people sometimes, but there is tremendous power within.<\/p>\n
Working With Objects<\/h3>\n Let\u2019s take a step back and learn how to create and manipulate objects. An object is always encased in curly braces. Property names can be unquoted but must be quoted if they contain special characters like dashes. Property values can be of multiple types including strings, integers, arrays and other objects.<\/p>\n
Let\u2019s create a test object with some useful information we can manipulate:<\/p>\n
.gist table { margin-bottom: 0; }<\/p>\n
To get the value of a property you can use the dot notation or the square bracket notation. The bracket notation is useful if you want to use a variable property name. Take a look at the example below:<\/p>\n
.gist table { margin-bottom: 0; }<\/p>\n
And here\u2019s what it looks like in the browser console:<\/p>\n
\n
Logging object values<\/figcaption><\/figure>\n<\/div>\nYou can use a function contained within an object similarly, just add a parenthesis at the end (and parameters if needed).<\/p>\n
.gist table { margin-bottom: 0; }<\/p>\n
The function calculates reading time by presuming a reading speed of 2.5 minutes per page. I multiplied the total page count by 2.5 to arrive at the number of minutes required for a complete read through. I then divide by 60 to arrive at the number of hours needed.<\/p>\n
In the previous article, we created an example where we listed some tweets using an array, but we can make our example a lot more flexible using objects. Here\u2019s the complete code re-written to use objects:<\/p>\n
.gist table { margin-bottom: 0; }<\/p>\n
The biggest change you\u2019ll see is that instead an array of tweets and a username given separately, I\u2019ve created an array of tweet objects. Each tweet object contains the tweet and the username. This removes the uncertainty of passing in the username from somewhere else.<\/p>\n
The tweet()<\/code> function now uses the object\u2019s properties instead of separate arguments and I\u2019ve removed document.write<\/code> to make sure it just returns a string, which can then be used anywhere.<\/p>\n<\/div>\n<\/p>\n
\n
\n
\n
\n
COURSES<\/h3>\nWP Academy \u2013 WordPress Wisdom, Bitesized.<\/h4>\n Structured e-learning to expand your WordPress and general business horizons. Learn from people like our very own CEO James Farmer with more than a decade\u2019s experience running a WordPress Business!.<\/p>\n
LEARN MORE<\/a>\n<\/div>\n\n
\n<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n
<\/p>\n
\n
Using Constructors<\/h3>\n Currently, our code is not bad but it could still be a lot better. We will probably never need to display a tweet without a tweet object, so we shouldn\u2019t really define our tweet<\/code> function outside of the object. If we use the same structure we would need to add a display_tweet()<\/code> function into all three objects.<\/p>\nThis is where constructors come in. If you\u2019re familiar with object-oriented PHP this is similar to using classes and objects in PHP. Think of a constructor as a way to initialize a class. Let me show you some code to make this clearer:<\/p>\n
.gist table { margin-bottom: 0; }<\/p>\n
\u00a0<\/p>\n
Let\u2019s start with tweet_1<\/code>. I used new Tweet()<\/code> to call the Tweet<\/code> function, passing in two parameters. The function is a constructor that creates properties for the object dynamically. It assigns the first parameter to this.text<\/code> and the second to this.username<\/code>. It also creates a this.display<\/code> function that displays the tweet.<\/p>\nWithin the function we can refer to properties using the this<\/code> keyword. Outside of the function we use the dot notation. To log the first tweet\u2019s text we use tweet_1.text<\/code>, to log the tweet display for the second one we use tweet_2.display()<\/code>.<\/p>\nThe beauty of this is its reusability. You can create as many tweets you like by creating a new object using the Tweet<\/code> class. The object will contain all the functions and other elements it needs to function.<\/p>\nLet\u2019s rewrite our tweet example with constructors in mind:<\/p>\n
.gist table { margin-bottom: 0; }<\/p>\n
That\u2019s a lot cleaner and a lot more understandable. I\u2019ve added the ability to add a prefix and a suffix to the tweet to give it some extra flexibility. This way we can display it as a list element easily.<\/p>\n
Overview<\/h3>\n In this tutorial, we delved into JavaScript objects and learned how they can be used to create data structures to make our code neater, better to understand and more flexible. Along with the previous tutorial you should now be up to speed on arrays, variables and basic JavaScript.<\/p>\n
In the next tutorial, we\u2019ll take a look at jQuery, the JavaScript framework used heavily by WordPress. You\u2019ll learn how to manipulate websites so you can create great things like toggle sections, date drop-downs and more.<\/p>\n
![\"Logging](\"https:\/\/i0.wp.com\/byteplate.com\/wp-content\/uploads\/l-n\/logging-the-object.png?resize=735%2C258\")
![](\"https:\/\/premium.wpmudev.org\/wp-content\/themes\/wpmudev-2015-1\/assets\/img\/trial\/courses.svg\")
\n<\/div>\n<\/div>\n