What are objects in Javascript?

Konfinity
September 24,2020 - 15 min read
What are Frames in HTML?

Javascript, invented by Brendan Eich in 1955 was initially just designed to run on the browser. It was popular as the client-side scripting language and was used to enhance the functionality on the client side.

Now, several years after its invention, Javascript has diversified into its utility. Let’s look at the various applications of Javascript that have emerged in the last few decades.

  • Firstly, it is now used at the server-side also. Nodejs is a framework which is used for server-side web development.
  • Javascript can also be used to make stand-alone desktop applications. Electron js is a cross platform framework used to build standalone software applications.
  • React is used with Javascript to create dynamic web and mobile applications. React native is used to create dedicated mobile applications only.
  • Angular is another framework, developed by Google, that can be used with Javascript in order to make dynamic web applications. It is a Model View Controller Framework.
  • React vr is another interesting thing that has emerged which is used to make virtual reality applications.
  • Tensor flow has become very popular lately. It is a javascript library that can be used to train machine learning models.

Now that we have seen the various uses of Javascript in different domains, you can easily understand the importance of Javascript in the world of technology.

In order to learn Javascript, there are various concepts you need to master. One of them is Javascript objects. In this article we are going to have a comprehensive look and understand in detail Javascript objects. Let’s get started.

What are Javascript Objects?

Objects in Javascript is a collection of properties and methods. These properties of an object are defined as a key-value pair. The key is the name of the attribute. Methods can also be a part of Javascript objects. Object names are case-sensitive in Javascript.

Objects are best understood in a real-life instance. To get the hang of objects, imagine your own laptop as an object.

The properties of your laptop are Company, Model, Processor, software, color, weight etc. Now, these are the properties which define your laptop and its features. Similarly, Javascript objects also have a set of properties and methods which essentially describe their characteristics.

The properties of an object are just like any other javascript variables that are attached to a particular object. You can access the property of a Javascript object with a dot operator. The name of the property in Javascript is case sensitive just like the object name and any other variable in this language.

Javascript also has methods which are basically just properties that are functions.

Let us discuss each of them, properties and methods, in detail so that we have a better understanding of Objects in javascripts.

Properties and Methods in Javascript Objects

  • Properties

    As discussed earlier, Javascript objects have properties associated with them that define the object’s features and characteristics. The syntax for creating and assigning values to properties can vary according to the method used to create a new object in Javascript.

    There would be a different syntax for defining properties if you have used object initializer method and different if you have used the constructor function. Each of these different methods are described under the heading ‘Creating New Objects in Javascript’.

    However, there are several ways to access the properties and the values assigned to them. These ways are independent of the way chosen to create a new object in Javascript.

    1. Objectname.property

      This method is the most used syntax for accessing a javascript object. In a real code, it seems like -

      • car.color
      • // This is used to access the property of color of the object car.
    2. Objectname[property]

      This method uses square brackets to access the property. A real code would look like –

      car[“color”]
    3. Objectname[expression]

      It is similar to the method above except you can put an expression inside the square brackets and not just any property. The real code would like –

      • x=” color”;
      • car[x];
    4. Looping

      This method is not used to access a particular object but to traverse every property of the object. The syntax for the same is –

      • For (variable in object)
      • {
      • // Code to be executed
      • }

      To understand this method, we need to create an object first. The real code for the same is -

      • var car = {company:” XYZ”, color: “Red”};
      • for (x in car)
      • {
      • Txt+=person[x]+ “ “;
      • }
    5. Adding and Deleting Properties

      Objects in Javascript are mutable, that means you can add, delete or modify properties and methods.

      Properties can be added in Javascripting objects simply by writing the attribute and the value.

      While deleting a property requires the use of the delete keyword. The syntax for deleting a property would like – delete person[age]; or delete person.age;

  • Methods

    Methods in Javascript objects are just like properties except that they are functions. Methods are used to perform actions on Javascript objects. Javascript also contains several bulilt-in methods also, for example toUpperCase () which is used to convert any string to upper case alphabets. Other built-in javascript objects include math, regular expression, DOM manipulation etc. However, you can build your own object methods also. An example of a customised Javascript method can be –

    • var car = {
    • name = “ Ferrari “ ;
    • color = “ Red ” ;
    • statement: function () {
    • return this.fname + “ “ + this.color ;
    • }
    • } ;

    Functions can be accessed just like properties. Car.statement();

    Now that we have read enough about what objects are and understood properties and methods in Javascript. Let us start by learning how to create Javascript objects. The different ways in which we can build Javascript objects and use them in our real-life programs to make them more efficient.

Creating New Objects in Javascript

You can create customized Javascripts object can be created in two ways –

  • Using Object initializer

    Objects can be created using an object initializer, the curly brackets {}. It is also called creating objects with literal notation. Object initializers are expressions which result in the creation of new objects.

    The syntax for the same is –

    • var obj_name {
    • property_name1: value1,
    • property_name2 value2,
    • property_name3: value3
    • }

    In the syntax above, obj_name is the name of the new object. The property_name is the name of the attribute and value is the expression that is assigned to property_name in this case.

  • Using Constructor Function

    Alternatively, Javascript objects can be created by using constructor functions. In order to make objects using constructor functions, we have to first make a create function that specifies the name, properties and methods of the object. It would be best understood if we see the syntax first -

    • function Obj_name (property1, property2) {
    • this. property1 = property1;
    • this. property2 = property2;
    • }

    The ‘this’ keyword plays an important role as it is used to assign the values passed to the function to the object’s properties.

  • Using the ‘Create’ Method

    In ECMAScript 5, Objects in Javascript can also be created using the object.create method. A distinct feature of this method is that it allows the user to select the prototype object for the object that has to be created. In this you don’t have to define a constructor function.

    The new keyword can also be used to make Javascript objects which we would read about later in the article itself.

Displaying Javascript Objects

We have seen how to create objects in Javascripts. However, our main focus is not on merely making them but also using and making our code much more efficient. Here we would like to see how to display objects in Javascripts. The few ways of displaying Javascripts is –

  1. Displaying object properties by name or through looping method

    We can display the object by simply accessing its properties (and methods). We have seen the ways to access Javascripts properties earlier in this article.

  2. Display the object by the use of Object.values()

    Javascript objects are converted to arrays using Object.values(). It is better explained through this code –

    • var car = {
    • name = “ Ferrari ”;
    • color = “ Red ”;
    • }
    • var myArray = object.values (person) ;

    myArray is just like any other Javascript array, the user can display it in any preferred way. The resultant array would contain all properties and methods of the object.

  3. Display the object using JSON.stringfy ()

    In this method, Javascript objects are stringified. That means the objects are converted to strings using JSON.stringify (). The code for the same is –

    • var car = {
    • name = “ Ferrari ”;
    • color = “ Red ”;
    • }
    • var myString = object.values (person) ;

    myString is just like any other Javascript string, the user can display it in any preferred way. The result will be in the form of a string.

The New Operator

The new operator in Javascript is used to create an instance of an object. This object can be built-in or user defined that has a constructor function. The code for the same is -

  • function car (name, color)
  • {
  • this. name = name;
  • this. color = color;
  • }
  • Const car1 = new car ( ‘ Ferrari ’ , ’ Red ’) ;

In the code above, car1 is an instance of the object ‘ car ’. Developers can make as many instances of this object as they want. This is one of the main advantages of the objects in Javascript. This reduces code redundancy and increases efficiency. In javascript a lot of things are or can be converted into objects, it’s popularly said that everything is an object in Javascript. The basic datatypes in Javascripts - Boolean, number strings can also become objects if they are defined with new keywords. Understand this concept with the following example. We have used the built-in function of typeof () to understand the new keyword.

  • var str1 = “Hello Konfinity”;
  • typeof (str1) ;

The output of the above code would be ‘string ‘. Now let us look at another piece of code -

  • Var str1= new string () ;
  • typeof () str1 ;

The output of the code above would be ‘object’. The output is so because the new keyword has converted the variable str1 into a Javascript object.

Here we come to an of our comprehensive guide to Javascript objects. As always, if you have any doubts regarding the topics discussed above, you can always pop up questions and we would be more than happy to answer.

The importance of Javascript can be gauged by the fact that over 94% of companies across the globe are using Jacascript as a part of their development process. Hence, the demand for developers with a sound knowledge of Javascript is growing day by day. If you are enthusiastic to become a developer, Javascript can not be neglected. We have covered objects in Javascript in detail, however in order to get a sound knowledge and become industry relevant, you require professional guidance.

In case you didn’t know, Konfinity ‘s Web Development Course is developed by experts from IIT DELHI in collaboration with tech companies like Google, Amazon and Microsoft. It is trusted by students and graduates from IIT, DTU, NIT, Amity, DU and more.

Join the course to master the art of creating web applications by learning the latest technologies, right from basic HTML to advanced and dynamic websites, in just a span of a few months.

Konfinity is a great platform launching a lucrative tech career. We will get you started by helping you get placed in a high paying job. You know what’s amazing - no prior coding experience is required to take up our courses. Start your free trial here.

Chat with us on WhatsApp