Table of Contents
After arrays, next data type to explore are objects. Objects are one of the most important thing in JS you can work with. Different people have different opinions on this, but they are definitely in top three. Objects are pretty huge subject to study and there are whole books on object-oriented programming, so we should start coding … Let’s dive in!
Little side note … Almost everything in JavaScript are, in fact, objects. You can point at anything you wanted. Numbers, strings, dates, arrays, functions and etc. These all are objects.
Objects are data types containing properties and values or methods. We didn’t talk about functions yet, but just for you to know, functions created in objects are called methods. When you want to create and object, you have two options. One is called object constructor and second is object literal. In case of object constructor you will create empty object first and then add properties or methods. Let’s take a look at both of these approaches individually.
Object constructor
As said before, this way include creating an empty object first and adding content later. Say we want to create variable called avatar with some properties like name, age and sex. Name of the avatar will be “David”, age will be 25 and sex “male”. To create the empty object we will use “var” keyword, define variable “avatar”, followed by equal sign and command to create our new object – “new Object()”. Don’t forget to write semicolon at the end of line.
JavaScript:
var avatar = new Object();
Now, to add the properties we will use the name of variable, which is “avatar” followed by dot and then property. The rest is like creating a variable. You will write equal sign and value of that property (strings have to be written in quotes). Adding name, age and sex properties will look like this:
JavaScript:
var avatar = new Object(); avatar.name = “David”; // creating avatar object avatar.age = 25; // adding age property to avatar object avatar.sex = “male”; // adding sex property to avatar object
As you can see, creating objects through constructor is easy. Just remember – write name of variable (object) followed by dot, equal sign and the value of property. To practice constructor little bit more, let’s create another two objects. First will be dog with name and bark properties and second will be cat with name and meow property. Feel free to choose whatever names you want.
JavaScript:
var dog = new Object(); // creating dog object dog.name = “Rex”; // adding name property to dog dog.bark = “Woof-woof!”; // adding bark property to dog var cat = new Object(); // creating cat object cat.name = ”Abby”; // adding name property to cat cat.meow = “Meow-meow”; // adding meow property to cat
One more for car lovers …
JavaScript:
var car = new Object(); // creating new car object car.numOfWheels = 4; car.maxSpeed = 350; // km/h car.brand = “Lamborghini”; car.model = “Aventador”; car.color = “red”; car.condition = “new”; car.price = 400000;
Object literal
After practicing constructor let’s create a little mess in your head and switch to object literal. Object literal or literal notation looks different from constructor. You don’t need to create empty objects, but you still can. You can simply create object and add properties and values at the same time. Content (code) in object literal is surrounded by curly brackets. Properties and their values are divided by colon. It looks like rule in CSS. Let’s modify our previous examples into this notation. You begin by, again, writing “var” keyword do define variable followed by its name “avatar”, equal sign and curly brackets. Next steps depend on your decision. You can leave it like that – empty object and add content just like in constructor example – dot, name of property, equal sign and value – or you can write properties and values right inside the curly brackets …
JavaScript:
var avatar = {}; // empty object
// adding properties like in constructor example avatar.name = "David"; avatar.age = 25; avatar.sex = "male"; alert(avatar.age);
// creating object and adding properties at the same time
var avatar = {
name: “david”,
age: 25,
sex: "male"
};
In case of object literal you have to write comma after every property-value pair (or method) except the last one. If object has only one property or method, then do not write comma after it (like in case of last property). You can wrap properties inside quotes if you want. It will work exactly the same.
JavaScript:
var avatar = {
“name”: “david”,
“age”: 25,
“sex”: “male”
};
// only one property
var avatar = {name: “Josh”}
Let’s rewrite our car example into object literal.
JavaScript:
var car = {
numOfWheels: 4,
maxSpeed: 350,
brand: “Lamborghini”,
model: “Aventador”,
color: “red”,
condition: “new”,
price: 400000
};
Cat and dog examples would be in following fashion.
JavaScript:
var dog = {
name: “Rex”,
bark: “Woof-woof”
};
var cat = {
name: “Abby”,
meow: “Meow-meow”
};
When you want to access any property created inside of your object, you can do it in two ways. First way is to use the name of object immediately followed by square brackets containing the property inside the quotes or, the second way, is to use name of the object followed by dot and property (no quotes or brackets). This is called dot notation. These ways work the same for both, object constructor and object literal.
Accessing with square brackets:
JavaScript:
// Object literal
var cat = {
name: “Abby”,
meow: “Meow-meow”
};
cat[“name”]; // result - “Abby”
cat[“meow”]; // result - “Meow-meow”
// Object constructor var dog = new Object(); dog.name = “Rex”; dog.bark = “Woof-woof!”; dog[“name”]; dog[“bark”];
-note: Use alert() or console.log() methods to see the results (alert(cat[“name”]); or console.log(cat[“name”]);).
Accessing with dot notation:
JavaScript:
var dog = {
name: “Rex”,
bark: “Woof-woof”
};
dog.name; // result - “Rex”
dog.bark; // result - “Woof-woof”
var car = {
numOfWheels: 4,
maxSpeed: 350,
brand: “Lamborghini”,
model: “Aventador”,
color: “red”,
condition: “new”,
price: 400000
};
car.numOfWheels; // result – 4
Changing the values
If you want to change value of some property, just use one of the ways to access that particular property and add equal sign followed by new value like when creating new variable (now WITHOUT “var” keyword).
JavaScript:
cat.name = “Cindy”; // dot notation cat[“meow”] = “meow” // square notation car[“maxSpeed”] = 370; // square notation car.price = 415000; // dot notation
It depends on you if you will use Object constructor or Object literal to create objects in JavaScript. If you search on couple of forums, most programmers use Object literal because it is faster and often more readable.
Summary
This is all for today. I hope that you understood everything. Practice creating objects and play with them. In next issue of JavaScript 101 we will take a look at functions and how they work.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
