Table of Contents
Ever heard about objects? I bet you did and if not, today you will get full dose of them because they are next on the line right after arrays. In this post we will explore this amazing world of JavaScript objects. The best way to learn something is to practice it, a lot, so we will code. We will start by practicing creating objects and then accessing their properties and methods. Stretch your fingers and prepare them for upcoming coding marathon. Let’s dive in …
Creating objects
To start on lighter note, we will begin with creating few simple objects. We already discussed ways to declare new object, however, let’s remind all the options we have. We can either use object constructor or object literal. In both cases we start with “standard” way of creating new variable – write “var” keyword followed by variable (object) name and equal sign. The difference between these two approaches comes right after equal sign. Object constructor use “new Object()” command (remember to end the line with semicolon). When you want to add a property or method to that object, use dot notation.
Dot notation is when you write name of the variable followed by dot, name of property or method, equal sign and content of property or “function()” keyword for methods.
On the other hand, object literal use empty curly brackets – if you want to define the content of object later – or write the content inside those curly brackets. If you chose to define empty object first, you will later use have to use dot notation to add properties and features to it. Let’s take a look at couple of examples …
– note: To make it easier to understand the difference between literal and constructor, we will use the same example.
JavaScript:
// object constructor (dot notation)
var man = new Object(); // creating new object “man”
man.name = “Kumar”; // adding property “name” containing string “Kumar”
man.surname = “Sayed”; // adding property “surname” with string “Sayed”
man.age = 35; // adding property “age” with integer of value 35
man.greeting = function() {
// method “greeting”
console.log(“Helo, I am ” + this.name + “ and I am “ + this.age + “years old.”);
};
man.greeting(); // result - “Helo, my name is Kumar and I am 35years old.”
// Object literal – empty first and then dot notation
var man = {}; // declaring empty object
man.name = “Kumar”; // adding property “name” with value of “Kumar”
man.surname = “Sayed”; // adding property “surname” with value of “Sayed”
man.age = 35; // adding property “age” with value of “35”
man.greeting = function() {
console.log(“Hello, I am ” + this.name + “ and I am ” + this.age + “ years old.”);
};
As you can see above, object constructor looks almost the same like object literal when declaring empty first. However, when you add properties and methods to object while creating it via object literal it will look completely different.
When you use object literal and add content while declaring it, the syntax is always name of the property or method followed by colon and its value. In case of methods followed by “function() {}”.
JavaScript:
// Object literal – creating and adding content at the same time – the best way
var man = {
name: “Kumar”,
surname: “Sayed”,
age: 35,
greeting: function() {
console.log(“Hello, my name is “ + this.name + “ and I am ” + this.age + “ years old.”);
}
};
man.greeting(); // result - “Hello, my name is Kumar and I am 35 years old.”
this keyword
As you probably noted in code examples above, we used “this” keyword inside “greeting” method followed by object property to print information to console. Some of you may already understand how “this” works. For the rest of you … When used inside some object, “this” refers to that object and it is used to access properties of that object inside methods and properties. In plain language by writing “this.age” you are saying “value (content) of age property of this object”.
JavaScript:
… console.log(“Hello, my name is “ + this.name + “ and I am ” + this.age + “ years old.”);
This line simply means “Hello, my name is ‘value of property name of this object’ and I am ‘value of property age of this object’ years old”. Remember that “this” always refers to object inside which is used.
Accessing properties and methods
When you want to access property or method declared inside some object, you will use dot notation again. In case of accessing method, you also have to write parenthesis after the name of method. You can use various basic methods discussed earlier to display data inside properties. Just to remind you, these basic methods are console.log(), confirm(), prompt() and alert().
JavaScript:
// creating new object
var woman = {
name: “Victoria”,
surname: “Dail”,
age: 24,
greeting: function() {
console.log(“Hello, I am “ + this.name + “ ” + this.surname + “.”);
}
};
console.log(woman.name); // result - “Victoria”
console.log(woman.surname); // result - “Dail”
console.log(woman.age); // result – 24
woman.greeting(); // result - “Hello, I am Victoria Dail.”
var dog = {
name: “Azor”
numOfLegs: 4,
living: true
}
console.log(dog.name); // result - “Azor”
console.log(dog.living); // result - true
console.log(dog.numOfLegs); // result – 4
var dolphin = {
name: “Charlie”,
living: true,
mammal: true,
haveFins: true,
environment: “water”
}
console.log(dolphin.name); // result - “Charlie”
console.log(dolphin.living); // result - true
console.log(dolphin.mammal); // result – true
console.log(dolphin.haveFins); // result – true
console.log(dolphin.environment); // result - “water”
Summary
This is all for today ladies and gentlemen. We practiced basic including ways to create objects via object constructor and object literal. We also took a look at how to access properties and methods declared inside our objects. In next part we will get deeper inside this topic and explore things like prototypes and more.
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
