How can I create identical properties and methods to objects stored in an array in JavaScript?

Question

I'm just experimenting with some code in JavaScript to create properties and methods. The following code works, but I want to know if there is a better way to create the same properties and same methods for each object in the array.

As I said, this is just me experimenting with learning JavaScript:

var contact = []; //set up array
var i = 0;

function displayContact() { //create function to display object contents
    console.log(this.name);
    console.log(this.telephone);
    console.log(this.email);
}

//create two empty objects in array
for (i = 0; i < 2; i = i + 1) {
    contact[i] = {};
}

//Create properties (with some test data)
contact[0].name = "Mr Blue";
contact[0].telephone = "08870 7980 11291";
contact[0].email = "Mister_Blue@somewhere.se";

contact[1].name = "Mr Blue";
contact[1].telephone = "07880 7880 11281";
contact[1].email = "Mister_Blue@somewhere.se";

//create method for each object
for (i = 0; i < 2; i = i + 1) {
    contact[i].logDetails = displayContact;
}

//test the method
for (i = 0; i < 2; i = i + 1) {
    contact[i].logDetails();
}

Answer 1

Option 1: defining a constructor

You can transform it to the following, by defining the constructor of a class:

 var Contact = function() {
    this.name = '';
    this.telephone = '';
    this.email = '';
  };

  Contact.prototype.logDetails = function() {
    console.log(this.name);
    console.log(this.telephone);
    console.log(this.email);
  };

  var contact = []; //set up array
  var i = 0;

  //create two empty objects in array
  for (i = 0; i < 2; i = i + 1) {
    contact[i] = new Contact();
  }

  //Create properties (with some test data)
  contact[0].name = "Mr Blue";
  contact[0].telephone = "070 780 1121";
  contact[0].email = "Mister_Blue@somewhere.se";

  contact[1].name = "Mr Blue";
  contact[1].telephone = "070 780 1121";
  contact[1].email = "Mister_Blue@somewhere.se";

  //test the method
  for (i = 0; i < 2; i = i + 1) {
    contact[i].logDetails();
  }

Read more about the constructors in JavaScript.

Option 2: using Object.create()

Object can be created easily with Object.create() method, when you specificy as the first argument the prototype. See the example:

var contact = []; //set up array
  var i = 0,
      proto = {
        logDetails: function() {
          console.log(this.name);
          console.log(this.telephone);
          console.log(this.email);
        }
      };


  //create two empty objects in array
  for (i = 0; i < 2; i = i + 1) {
    contact[i] = Object.create(proto);
  }

  //Create properties (with some test data)
  contact[0].name = "Mr Blue";
  contact[0].telephone = "070 780 1121";
  contact[0].email = "Mister_Blue@somewhere.se";

  contact[1].name = "Mr Blue";
  contact[1].telephone = "070 780 1121";
  contact[1].email = "Mister_Blue@somewhere.se";

  //test the method
  for (i = 0; i < 2; i = i + 1) {
    contact[i].logDetails();
  }

Of course you can define custom constructor to initialize the object properties or create an initialization method. It's a personal preference.

To get familiar with object oriented programming in JavaScript, read this introduction .

Answer 2

To create multiple objects with identical properties and methods in JavaScript we are usually using functions as constructors and prototypes .
Functions are first class objects in JavaScript and can be used as regular functions and as constructors as well.
The constructor name should always begin with capital letter.

// Proper declaring of constructor
function Contact(name, telephone, email) {
    this.name = name;
    this.telephone = telephone;
    this.email = email;
}

// prototype is a crucial mechanism for inheritance realization
Contact.prototype.displayContact = function(){
   console.log(this.name);
   console.log(this.telephone);
   console.log(this.email);
}

// creation of two Contact objects
contact1 = new Contact("Mr Blue", "070 780 1121", "Mister_Blue@somewhere.se");
contact2 = new Contact("Mr Blue", "070 780 1121", "Mister_Blue@somewhere.se");

contact1.displayContact();

Now all the objects that were created with Contact constructor have same property names and shared displayContact method