So, what is an object in JavaScript, just as in many other programming languages, can be compared to real-life objects. The concept of objects in JavaScript can be understood with real life, tangible objects.
In this blog post, we explain:
- What is an Object in JavaScript
- How to add methods to JavaScript objects
- What is a constructor
- What is this keyword
- How to write cleaner code using inheritance
- What is JSON (JavaScript object notation)
Objects in programming can be a combination of variables, functions, and data structures. This means that objects can store values, you can use objects to manipulate values and combine them into more complex objects, like arrays and still get all the benefits. JavaScript is no different. If you want to know more read our blog post: What is JavaScript?
Writing your first object in JavaScript
Best way to explain what objects are is with an example from real life. Take a cup, for example. A cup is an object with properties. A cup has a color, volume, weight, etc.
In the same way, JavaScript objects can have properties, which define their characteristics. You can define a property by assigning it a value.
For example, let's create an object named myCup and give it properties named color, volume, and weight as follows:
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
First, we declare a variable starting with let myCup. We initialize it using a new Object(). Next, we add all the properties. We add a property named color like this. myCup dot color equals. And then write value: transparent in quotes.
For a cup size of 1 liter we can write myCup.volume = 1. Weight is the last property. myCup.weight equals and value 0.5.
Shorter notation for JavaScript objects
We can write the same object in a shorter notation. Comma-delimited list of pairs of property names and associated values, enclosed in curly braces:
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
We declare a variable in the same way with: let myCup equals and then curly brace.
In the new line, we write the first property, color like this: Color colon and then write value: transparent in quotes. Since this is not the last property of an object we have to end the line with comma.
Next is a property: volume. We write volume: 1. Once again we have to add a comma at the end of the line. The last property is: weight. Weight colon and value. This time there is no comma at the end. But we finish the object with a closing curly brace.
Now you know what is an object in JavaScript. And how you can define it in code. We suggest using shorter notation, but you can do it both ways.
When do we use a comma at the end of line?
We use a comma for each property value except for the last one. In some editors, you are allowed to use a comma even for the last property. But the best way is to keep it clean and leave the last property comma free.
Practice - What is an object in JavaScript
We at CodeBrainer like to explain with examples, so let's do another object for a practice. Create an object for a table. Table has properties: height, width, length and color.
Don't worry we show step by step solution in video about "What is an object in JavaScript". You see how to declare a variable for an object and how to enter values.
We explained what are objects in JavaScript. We also showed how to create an object in two ways. Now we will show what the benefits of objects are.
Adding Methods for JavaScript objects
Using objects is great because you can add methods. Methods are functions that are linked to the data within your object. This makes it much easier to work with objects.
We created an object for the table above, for practice. Imagine that you have multiple tables. How would you print out all the colors? A great way is to add a method that will print out a description for the table.
In other words, a method is a property of an object that is a function.
We need an object to show how methods work
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
First, we declare a variable for our object. We start with let myTable equals then we start the object with the opening curly bracket and press enter, now we write values. Height colon and write value "75". Since we have more properties to write, we end with a comma and enter.
Now we write the next property. Width colon and write value "120". We end with a comma and press enter. Now we write the next property.
Length colon and write value "60". We end with a comma and enter. Now we write the next property.
Color colon and write value "white". Now we go out of the object's definition, we also add a semicolon at the end of the definition.
In your code let's make a little space to write our method.
Let's write a method for our object
We can add a method simply by adding another property that is a function. This function will be able to read the values of the object and work with them.
We will add an example that will print out the color of the table.
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
We start with myTable.whatIsMyColor equals and we write a function without parameters.
This is the place where we write our functionality. It can be whatever you want, as long as it helps you work with an object.
For now, we just show how to print out color. You will see that your functions will be more elaborate.
Inside we call console.log and write: "My color is:" plus this.color. Keyword: "This" is important and it links you to the object's data.
We can now make the call.
We can now call myTable.whatIsMyColor(). Remember always to write braces at the end.
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
You can imagine that you can use the method whatIsMyColor many times. And this is one of the benefits since you don't have to repeat the code.
What does "this" keyword mean?
When a function is used as a constructor (with the new keyword), the keyword this is bound to the new object being constructed. This means that the value of this is decided based on how the code is being executed.
Similarly when using this keyword in methods returns an object function is intended for. It kind of makes more sense when you are using writing code for your objects, because you are adding functionality to objects that you understand. And then this returns the object you are working with.
It is important to remember that this keyword has a different meaning according to the context. If you use it inside the constructor, method or outside object. You can read more about it in an article named simply: this.
Practice - methods for an object in JavaScript
It's time for practice. Write a method that returns an area of the table.
Don't worry you can see step by step the solution in video above: How to add method to your JavaScript object
Method that calculates the area of the table is already a better example as it calculates a new value from existing values. In future, you will see that most methods will be used to manipulate data, make calculations and represent values in a new way.
We have now shown how to add a method to an object in JavaScript. This is a technique that you will use a lot, since it makes your code a lot shorter.
What is a constructor for a JavaScript object?
We talked about what is an object in JavaScript, we explained what methods in JavaScript are. Now that we know how to create objects we can work with them.
One important technique in programming is inheritance. In JavaScript, this means that we create a "child" object that inherits features from their "parent" classes.
This means that you can write functions for objects only once and just change values. This makes your work easier and also lowers the number of errors in your code.
A nice way of using inheritance is with constructors. A constructor is a special function called to create an object. It also prepares the new object for use. Most of the time a constructor accepts arguments that it uses to set the initial values of the object.
Let's show this with an example for our table object.
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
We declare a variable with const Table and equals function. For function, we use parameters: height, width, length, and color.
Don't forget to put curly brackets at the end of the line, and then press enter. This defines the body of the function.
For the first property, we write this.height = height. And semicolon and enter to finish the line. Next, write this.width = width. With semicolon and enter at the end. And now for length. Here we use an abbreviation for length: len (since length is already a method of each object in JavaScript). And color.
What is inheritance?
Inheritance is the mechanism of basing an object or class upon another object (prototype-based inheritance, yes, this is JavaScript) or class (class-based inheritance). Inheritance allows programmers to create classes that are built upon existing classes and to reuse code.
An inherited class is called a subclass of its parent class or super class. This is why you can see keyword super used to work with parent class methods.
Shortly, the main advantages of inheritance are code reusability and readability.
Read more on wiki: Inheritance (object-oriented programming)
Methods inside constructors
Constructors are very useful since this is a good way to define methods for objects as well.
Let's show how we can add a method that will tell the color of the table. We talked about methods and you already know how to write them, here we use it directly in the constructor.
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
Write this.whatIsMyColor equals and write a function with no parameters. With curly brackets we define the body of the function.
We call document.write and enter value. Just be careful to enter a tick, not an apostrophe sign.
Value is: "My color is:". Then write $ sign and curly brackets. Inside brackets this.color. This reads value for the object. For the new line we use HTML tag break at the end.
This time we are using document.write. This will show a message on your HTML document. But you can change it and use console.log to see the message in the debug console.
Now we can use constructor to declare new objects.
Using constructor to declare new objects
We declare a variable with let myFirstTable equals and then we call new Table(80, 80, 120, "blue"). Inside the brackets are values for our object.
We can use constructor many times. We can now declare a second variable with let mySecondTable. Once again we call new Table and write values: new Table(80, 100, 150, "red").
Last thing is to call the method for both objects. Call myFirstTable.whatIsMyColor(). Remember, brackets at the end.
Call for the second object is the same: mySecondTable.whatIsMyColor().
Let's take a look at how this looks in a browser. (If you used console.log, check the debug console in your browser.) Don't forget to save your file, before viewing it.
Practice - constructor for JavaScript
Now, let's practice by adding two new objects. First object should be a table that is yellow. Dimensions are up to you. Second object should be a brown table with custom dimensions as well.
You can see step by step solution in video above: What is a constructor in JavaScript
This is a result you should get in browser:
We have shown what is an object in JavaScript, how to write a constructor and what methods are.
If you need any further information, just let us know and we will add it to our blog.
Short notation for objects and JSON
Once you know how short notation for objects looks like you can use that knowledge to write JSON. JSON is a special type of notation that enables you to write data in a compact and readable way. JSON looks a lot like objects in JavaScript plain code. If you want to learn more read our blog post about: What is JSON in JavaScript
Conclusion
Knowing what is an object in JavaScript is important, but you will get the feel for it while programming. More lines of code you write, the more you understand the benefits for objects. Most importantly this is the way to make even complex code understandable and easy to use.
We showed a few examples how to create an object and how to use them using methods, let us know what you think, how can we help you even more. And remember to have fun coding with CodeBrainer.
