Javascript Standalone Objects Tutorial

How to create standalone objects

Because Javascript is template based, we can create objects directly, instead of needing classes first.

There are 3 ways to create objects.

• Object Literals
• Instantiating an object with new
• Instantiating an object with a constructor method and new

How to create an object literal

We create an object literal by specifying a name, followed by the assignment operator and a code block (open and close curly braces).

Inside the code block we add the property we want, followed by a colon and the value we want to assign to it. Multiple properties are separated by a comma.

object_name = {

  property: value,
  property: value

}

<script>

  person = {

    first_name: "John",
    last_name: "Doe",
    age: 29
  }

</script>

We access the properties through dot notation, using the object’s name.

<script>

  person = {

    first_name: "John",
    last_name: "Doe",
    age: 29
  }

  document.write("Name: ", person.first_name, " ", person.last_name);
  document.write("<br>");
  document.write("Age: ", person.age);

</script>

How to instantiate an object with new

We can also instantiate an object with the new keyword, and afterwards add the properties we want.

First, we specify a variable that will hold the object and an assignment operator. Then we use the new Object() keywords and terminate the statement with a semicolon.

Similar to instantiating a new object from a class, the Object keyword has a pair of open and close parentheses.

// instantiate a new object
var object_name = new Object();

Once the object exists, we can initialize and access properties with dot notation, using the object_name.

// instantiate a new object
var object_name = new Object();

// initialize properties
object_name.property = value;

<script>

  var person = new Object();

  person.first_name = "John";
  person.last_name = "Doe";
  person.age = 29;

  document.write("Name: ", person.first_name, " ", person.last_name);
  document.write("<br>");
  document.write("Age: ", person.age);

</script>

How to create an object with a constructor

A constructor is simply a function that initializes the object with values we specify.

First, we need to create a function with all the properties we want to initialize when the object is instantiated as function parameters.

function constructor_name(property_1, property_2, ...) {}

Inside the function we assign the parameters to properties in the object. To do this, we have to specify the this keyword, which will reference the calling object.

The variables and parameters may have the same names.

function constructor_name(property_1, property_2, ...) {

  this.property_1 = property_1;
  this.some_property_name = property_2;
}

Anything we pass to the constructor as an argument, will be assigned to the property of the object.

The this keyword references the calling object. That is to say, we can just imagine the this keyword being replaced by whatever we name our object.

To instantiate an object with the constructor, we create a new instance, as we did before. However, this time we pass the values we want between the parentheses to assign them to the properties of the object.

var object_name = new constructor_name(argument_1, argument_2);

As with any other object, we access the properties through dot notation.

<script>

  function person(first_name, last_name, age) {

    this.fn = first_name;
    this.ln = last_name;
    this.age = age;
  }

  var p1 = new person("John", "Doe", 29);

  document.write("Name: ", p1.fn, " ", p1.ln);
  document.write("<br>");
  document.write("Age: ", p1.age);

</script>

Define a method inside a standalone object

We can define functions inside a standalone object. But, before we define the function, we must first create a variable with the same name as the function and refer to it with the this keyword.

function constructor_name() {

  this.method_name = function_name;

  function_name() {
	// body
  }
}

<script>

  function person(first_name, last_name, age) {

    this.fn = first_name;
    this.ln = last_name;
    this.age = age;

    this.walk = walk;
    function walk() {

      document.write("<p>Walking...</p>");
    }
  }

  var p1 = new person("John", "Doe", 29);

  p1.walk();

</script>

List of Object methods

Summary: Points to remember

• We don’t have to create classes to be able to create objects. We can create them directly by either creating object literals, using the new keyword, or with a constructor method.
• The this keyword in a constructor method refers to the calling object, the object that will be created from the constructor.
• Before an object method can be defined, we must create a variable with the same name as the method first.