There are two common methods to initialize an object variable.

Method 1: Using the predefined Javascript object named Object.

var animal = new Object();

Method 2: Using the literal object curly bracket { … } notation shortcut

var animal = {};

In both examples the object animal has no properties and methods. They can be included when initialized or later.

You will see the property __proto__ included when inspecting Javascript objects.

It is a controversial property that all Javascript objects have. It was intended for internal Javascript to use a programming concept called inheritance.

Inheritance describes rules that allow objects share methods and properties typically in a hierarchical arrangement and is part of a programming design called OOP.

You can safely ignore __proto__ for the objects you create.

You can add properties to objects when they are initialized or later. Properties like variables have a name and a value. The value can be any data expression including another object or array.

Method 1: Adding when initialized

When added during initialization, the property name is separated by a : colon …

var animal = {type:'dog'};
•
•
•
console.log('Animal type', animal.type);

When using the bracket { … } literal object notation you can have multiple properties spearated by a comma.

var animal = {type:'dog', name:'Fideo', color:'brown'};
•
•
•
console.log('Animal type', animal.type);
console.log('Animal name', animal.name);
console.log('Animal color', animal.color);

Method 2: Adding after initialization

To add or update properties after initialization you use the dot notation …

var animal = {};
animal.type = 'dog';
•
•
•
console.log('Animal type', animal.type);

Additional properties can be added as needed using dot notation as well as having their values updated

animal.type = 'Cat'; // Updating existing property
animal.name = 'Fluffy'; // Adding property
animal.color = 'black'; // Adding property
•
•
•
console.log('Animal type', animal.type);
console.log('Animal name', animal.name);
console.log('Animal color', animal.color);

Methods are functions. Everything you learned about creating and using functions applies to methods.

A method has a name the same as a function name.

The method can be assigned an anonymous function or a named function.

Like properties you can add methods to objects when they are initialized or later.

Method 1: Adding when initialized using an anonymous function

var animal = {type:'dog', speak:function(){console.log('Bark');}};
•
•
•
animal.speak(); // Bark

Alternative line format for readablility …

var animal = {
	type:'dog',
	speak:function(){
		console.log('Bark');
	}
};
•
•
•
animal.speak(); // Bark

Method 2: Adding when initialized using a named function

var animal = {type:'dog', speak:dogSpeak};
function dogSpeak(){
	console.log('Bark');
}
•
•
•
animal.speak(); // Bark

Alternative line format for readablility …

var animal = {
	type:'dog', 
	speak:dogSpeak
};
function dogSpeak(){
	console.log('Bark');
}
•
•
•
animal.speak(); // Bark

Method 3: Adding after initialization using an anonymous function

var animal = {type:'dog'};
animal.speak = function(){console.log('Bark');};
•
•
•
animal.speak(); // Bark

Alternative line format for readablility …

var animal = {type:'dog'};
animal.speak = function(){
		console.log('Bark');
	};
•
•
•
animal.speak(); // Bark

Method 4: Adding after initialization using a named function

var animal = {type:'dog'};
animal.speak = dogSpeak;
function dogSpeak(){
	console.log('Bark');
}
•
•
•
animal.speak(); // Bark

The this keyword refers to the object and is useful inside of methods.

var todos = {};
todos.list = [];
todos.addItem = function(item){this.list.push(item);};
todos.listAll = 
	function(){
		for (var i = 0; i < this.list.length; i++){
			console.log(this.list[i]);
		}
	};

Created using the web browser console window.

The web browser console window displaying the todos object.

todos.addItem('Pay bills UGH!');
todos.addItem('Call Mom :-).');
todos.addItem('Food shopping.');
todos.listAll();

The web browser console window displaying the todos object with the added items.

You can follow along with this example using your web browser console window and pasting in the code snippets.

This example creates an object named userList that has a property named list which is a simple indexed array.

It also has two methods addNew and listAll.

var userList = {};
userList.list = [];
userList.addNew = function(userObj){this.list.push(userObj);};
userList.listAll = 
	function(){
		for (var i = 0; i < this.list.length; i++){
			console.log(this.list[i]);
		}
	};

Creating the userList object in the web browser console window.

Inspecting the userList object in the web browser console window.

The addNew method has an argument that requires a user object but for simplicity of illustration does not verify it is valid. The user object has three properties: name, isAdmin and countryCode but no methods.

The addNew method adds user objects to the userList object list property. It takes advantage of the this variable to reference the list property.

This code example shows the creation of a user object.

var user = {};
user.name = "John";
user.isAdmin = false;
user.countryCode = 'usa';

Next the user object is added to the userList object.

userList.addNew(user);

This code example shows the using a literal user object and adding it to the userList object.

userList.addNew({name:'Maria', isAdmin:false, countryCode:'bra'});

Finally the userList object's listAll method to show all the user objects it contains.

userList.listAll();