JavaScript Object: Introduction

There are 2 very important concept in JavaScript: Object and Function. This tutorial will cover JavaScript Object.

Object, in JavaScript, can be viewed as a container that stores a collection of values. Object can store both primitive values and object values.

The following are some characteristics of an object:

• key-value pair
• key can be either string or number
• value can either be a primitive value or object value
• key is known as "property"
• mimic known data structure: "hash", "hashtable", "dictionary", "map"
• dynamic
• property can be added at any time
• property can be removed at any time

There are 3 ways to create an object in JavaScript: 

• object literal
• new operator
• Object.create()

Creating an object: object literal

var car = {
  make : "Honda",
  model: "Civic",
  attributes: {
     doors: 4,
     passengers: 5 // comma not needed here to end the key-value pair
  } // comma not needed here to end the key-value pair
};

Rules for object literal creation: 

• Starts with { and ends with };
• key followed by colon followed by its value and a comma (unless it is the last key-value pair)

Creating an object: new keyword

var car = new Object();
car.make = "Honda";
car.model = "Civic";
car.attributes = new Object();
car.attributes.doors = 4;
car.attributes.passengers = 5;

Rules for new keyword object creation:

• Use the keyword new
• Use a "special" function (in this case, Object) known as "constructor"
• Add key-value pairs one by one
• these pairs can also be initialized inside the constructor just like in mainstream Object Oriented programming languages

Creating an object: Object.create()

var car = Object.create(Object.prototype,{
  make: { value: "Honda" },
  model: { value: "Civic" },
  attributes: { 
    value: Object.create(Object.prototype,{
      doors: { value: 4 },
      passengers: { value: 5}
    })
  }  
});

Rules for Object.create() object creation:

• Use "static" method "create()" of Object.
• First parameter: the prototype object that the new object will be based on
• Second parameter: an object that define the properties attributes, in this particular example, we initialized its "value" attribute (more detail in another blog post)

When to use each technique of Object creation

Use object literal technique when:

• you need a one-off data structure (similar to C-struct) on-the-fly (not a template)
• you need a simple singleton-like object (unfortunately a mutable singleton)

Use new keyword when:

• you need an instance of an object (analogous with mainstream OOP language like Java or C#)
• you need multiple instances of a type of an object with different values
• more details will be covered in another article that covers "prototype" as well.

Use Object.create() when:

• you need more control over the property attributes (will be covered in another article) of the newly created instance of an object
• for example: set the car.make property to be read-only (can only read, but can't modify)

Accessing and Modifying properties

There are 2 ways to access/modify a property of an object (assuming the property can be accessed and modified): dot notation or square bracket notation.

Dot Notation example:

console.log(car.make); // "Honda"
car.make="Toyota";
console.log(car.make); // "Toyota"

Square Bracket example:

console.log(car["make"]); // "Honda"
car["make"]="Toyota";
console.log(car["make"]); // "Toyota"

When to use each technique of Accessing/Modifying properties

Use dot notation when:

• any time you can
• know the property name before hand

Use square bracket when:

• property name is pre-computed or pre-calculated during run-time
• creating an object that maps a range of keys/properties to a set of values
• for example, mapping A-Z or 0-9 to a set of values

Using Number as Key/Property Name

Technically it is legal to use number or a string representation of number as the key/property name but in general, try not to as it may tricked people to think that the object type is an array.

For example:

var one = { 1 : "One" }; 
var two = { "2": "Two" };
console.log(one[1]);  // "One"
console.log(one["1"]); // "One"
console.log(two[2]); // "Two"
console.log(two["2"]); // "Two"

// The following will throw SyntaxError error,
// a number is not a legal identifier
console.log(one.1);
console.log(two.2);

Summary

An object is an aggregate of property-value pairs. There are 3 ways to create an instance of an object in JavaScript. Each technique is useful in certain situations. There are 2 ways to access or modify the property value. In JavaScript, the key/property name can be a number.