Sit back and relax while my experts take care of your project.

Talk to Danish

JavaScript for WordPress Developers: Getting Started with Objects

JavaScript is used on 93.6% of websites around the world. Today, complete websites and apps are developed using JavaScript. Multiple powerful extensions and frameworks are designed on Javascript around the world. Let me introduce some of them to you. JQuery is a JavaScript library, AngularJS is a JavaScript framework and Node.js is a JS runtime environment. If you are a web developer and don’t know these three entities than it is quite necessary that you should learn about them.

What Is JavaScript?

JavaScript is a front end (client-side) programming language. For better understanding, you can say it serves the function of creating a communication channel with a user’s web browser when the user visits your website While PHP, a back-end (server side) language, only communicates directly with the server.

JavaScript ensures that a website will load faster and is more responsive as compared to other websites that are not based on Javascript.

Importance of JavaScript in WordPress

Before diving into JavaScript, it is quite important for you to learn why JavaScript is important for WordPress user. Below are some of the reasons why you should learn Javascript:

  • JavaScript is already part of the WordPress.
  • JavaScript powers WordPress Admin panel.
  • JavaScript is widely used in many different themes and plugins.

Getting Started with JavaScript Objects

Before understanding complex JavaScript features it is important you learn the basics of JavaScript. This article focuses on JavaScript objects only.

What Are JavaScript Objects?

An object in JavaScript is a collection of properties. It can also be termed as something that is available on the website’s page.

A property in JS object is a relation between name and key.

what-are-javascript-objects

In the above example, you can see an object written in JavaScript having two properties type and color.

Method as JavaScript Object Property

What makes JavaScript useful is that the property of an object can be a function as well; this makes the property, a method.

method-as-javascript-object-property

Above code is a jQuery code snippet which sends a post request to given URL. In this example, you can see a property “Complete” which invokes a function as soon as the request is completed. Let’s see how this function works.

In the above example, we have an object “me” having two properties, name and greeting which is in actual not a property but a function. We can assign this function using dot syntax such as me.greeting or using this keyword.

using-this-keyword

Points to Be Considered While Creating JavaScript Object

While creating JS objects, one should keep these basic characteristics in mind.

  • An object is always encased in curly brackets.
  • Property value can be of multiple types including integers, strings, arrays and other objects
  • Property value can be of multiple types including integers, strings, arrays and other objects.
  • Property name can be unquoted; however, they must be quoted if they contain special characters.

Accessing JavaScript Object

We now know how to create a JS object within a website, it is now time we see how we can access this object. Let me demonstrate this with a small example.

accessing-javascript-object

In the above object, I have written a JavaScript object “book” outlining a few of its properties. Now let’s see how we can access it.

dot-syntax-or-bracket-notation

As you can see in the above snippet, we can use dot syntax or bracket notation to access different properties of the object.

output-of-what-you-have-written-above

Here is the output of what you have written above. As you can see, we now have a complete object with its information in the console of the web browser.

Also, we can recall functions just like we used to do in other programming languages.

what-are-javascript-objects

Nested JavaScript Objects

When you create one object inside another object, it is called a nested object. As for those who have queries, Yes! you can also create a nested JS object. Here is an example of how you can do that.

nested-javascript-objects

Iterating over Key Values

Suppose, you have an object with properties and you want to iterate on all of its properties. This can be achieved with the help of a FOR loop.

Here is an example:

iterating-over-key-values

Your Object “menu” has three properties. Once we use the FOR loop to iterate this “menu” with its key, we will get the following results:

Iteration 1: Key: width value:300

Iteration 2: Key: width value:200

Iteration 3: Key: width value:Menu

Object variables are references

By reference, it means an object is nothing but holding a reference to another object. This can be easily understood with an example.

object-variables

As you can see in the above example that we first declared an object “user” and another object “obj”, which was equal to “user” in the second line. Since, obj is just a pointer and is holding reference to a user object, when we change the [name] property of “obj” it actually changes the overall value of the “user” object. This can be seen when we send user.name to console and we see “Peter” as a result on the output screen.

So “obj” is nothing but a reference/pointer to the object “user”. Any changes made to “obj” is actually pointed towards “user” object.

Constructors in a JavaScript

Constructor is a specialized method or a class in Javascript. It is called as soon as an object of the class is created. We can use Constructors to initialize variables/properties of the object and do a task that needs to be done for the object creation.

constructors-in-a-javascript

We see have a function name “Tweet” as a constructor. This constructor accepts parameters on its creation i.e. text and username. So, whenever an object of this function is created it needs to have these two parameters to start with. Every statement written in constructor is called at initialization time of the object.

nd tweet_2 being created. Keep in mind that we have to pass the text and username parameters as well.

This is an important OOP concept which serves the purpose of reusability. You can now create as many objects of Tweet you want and all of them will have these properties and method in them by default.

Conclusion

We know that the world wide web is moving rapidly towards JavaScript development. WordPress has significantly shifted its focus towards JS enabling developers to keep themselves up to date about node.JS and its functionalities.

This is a little sneak peek into what JavaScript objects are and how we can use them. Although, these are the basics of JavaScript objects but if you have a strong command on the basics, you can easily understand more complex JavaScript functionalities that we will be covering in our future posts.

If you are a web developer and want to master the art of front-end programming language, you must start learning JavaScript today.

Start typing and press Enter to search