In the last article in this series, we looked at the very basics of JavaScript<\/a> \u2013 how to add to a page and use variables and functions. In this tutorial, we’ll focus on commonly used objects\u00a0in JavaScript.<\/p>\n Missed a tutorial in our JavaScript for WordPress Developers series? You can catch up on all five posts here:<\/strong><\/p>\n Let’s dive straight in by looking at an example of an object in JavaScript:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n This is a very simple object with four properties. The first property has the key “name” and the value “Daniel Pataki.” 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’ve 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 Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n The code above would send a post request to the given URL. The “complete” property invokes a function, which is run when the request has been completed. To see how this would work let’s quickly write a function of our own:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\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: If you’ve 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 Let’s 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’s create a test object with some useful information we can manipulate:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\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 Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n And here’s what it looks like in the browser console:<\/p>\n You can use a function contained within an object similarly, just add a parenthesis at the end (and parameters if needed).<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\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’s the complete code re-written to use objects:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n The biggest change you’ll see is that instead an array of tweets and a username given separately, I’ve 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 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’t really define our This is where constructors come in. If you’re 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\n
Objects<\/h3>\n
me.greeting<\/code>. You can even reference properties from within the same object using the this<\/code> keyword.<\/p>\nWorking With Objects<\/h3>\n
![\"Logging](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/logging-the-object.png\")
tweet()<\/code> function now uses the object’s properties instead of separate arguments and I’ve removed document.write<\/code> to make sure it just returns a string, which can then be used anywhere.<\/p>\n\nUsing Constructors<\/h3>\n
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>\n