What is the difference between these apparently similar JS codes?

Question

I'm a new comer to JS & working my way around it. I was trying to test my JS skills, so I decided to write down a simple code that displays employees information in the console and indeed I wrote it, but in a way different from what I've learned from 2 tutorials, the first explaining "How to create objects & methods" and the second explaining "The prototype objects". Although, the results are pretty identical. So if anyone could help me to understand the difference, I'd be very grateful.

Important !!

If you want to test the code, please open your console!
I couldn't paste the link to the third code because I still don't have enought reputation points to post more than 2 link. Sorry.

This is the project using my method (JSFIDDLE: http://jsfiddle.net/9NUGC/)

var peter = {name:"Peter", age:"23", sex:"Male", country:"Russia", position:"Manager"};
var mark = {name:"Mark", age:"21", sex:"Male", country:"US", position:"Designer"};
var jessica = {name:"Jessica", age:"19", sex:"Female", country:"UK", position:"Programmer"};

function showDetailsInLog(x){
    console.log("Employee Name: " + x.name);
    console.log("Employee Age: " + x.age);
    console.log("Employee Sex: " + x.sex);
    console.log("Employee Country: " + x.country);
    console.log("Employee Position: " + x.position);
    console.log("-----------------------");
}

showDetailsInLog(peter);
showDetailsInLog(mark);
showDetailsInLog(jessica);

This is the project using the method in "Creating objects & methods" tutorial (JSFIDDLE: http://jsfiddle.net/s5d64/)

var peter = {name:"Peter", age:"23", sex:"Male", country:"Russia", position:"Manager"};
var mark = {name:"Mark", age:"21", sex:"Male", country:"US", position:"Designer"};
var jessica = {name:"Jessica", age:"19", sex:"Female", country:"UK", position:"Programmer"};

function showDetailsInLog(){
    console.log("Employee Name: " + this.name);
    console.log("Employee Age: " + this.age);
    console.log("Employee Sex: " + this.sex);
    console.log("Employee Country: " + this.country);
    console.log("Employee Position: " + this.position);
    console.log("-----------------------");
}

peter.logInfo = showDetailsInLog;
mark.logInfo = showDetailsInLog;
jessica.logInfo = showDetailsInLog;

peter.logInfo();
mark.logInfo();
jessica.logInfo();

This is the project using the method in "Prototype objects" tutorial

function Employee(n, a, s, c, p) {
    this.name = n;
    this.age = a;
    this.sex = s;
    this.country = c;
    this.position = p;
}

Employee.prototype.logInfo = function() {
    console.log("Employee Name: " + this.name);
    console.log("Employee Age: " + this.age);
    console.log("Employee Sex: " + this.sex);
    console.log("Employee Country: " + this.country);
    console.log("Employee Position: " + this.position);
    console.log("-----------------------");
}

var peter = new Employee("Peter", "23", "Male", "Russia", "Manager");
var mark = new Employee("Mark", "21", "Male", "US", "Designer");
var jessica = new Employee("Jessica", "19", "Female", "UK", "Programmer");

peter.logInfo();
mark.logInfo();
jessica.logInfo();

Both first and second one are almost the same, with difference that the function you have used on first case becomes a method of each object in second case. The third case is using prototype instead of annon objects. It seems a little obvious to me. — DontVoteMeDown, Dec 30 '13 at 10:30
Well OP is a new-comer to JavaScript. It was a well done post with a direct question, so I think it's worthy of direct answer. — Jack Guy, Dec 30 '13 at 10:32
@DontVoteMeDown i would say the second and the third have more in common then the first and the second. For the second and the third `logInfo` is called in the _context_ of the object therefor `this` referrers for both cases to the object, only how the function is _assigned_ to the object and the type of the object differs. For the first one the object is passed as parameter to the function. — t.niese, Dec 30 '13 at 10:33
@t.niese I keep my opinion, because besides the context, the prototype makes total difference from dynamic objects, like Kevin Bowersox answered. — DontVoteMeDown, Dec 30 '13 at 11:01
http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Dec 30 '13 at 11:18
@HMR Althought it's a long post, I found it very informative. Thanks to all of you guys for helping out a newbie :) — Dr. A. Waheed, Jan 01 '14 at 08:23

score 2 · Accepted Answer · answered Dec 30 '13 at 10:34

Your method creates a global function that accepts an argument (hopefully of type employee). The function is then invoked once per each object, using each of the employee objects as arguments.

The second method attaches a property showDetailsInLog to each of the employee objects. This property is assigned the global function showDetailsInLog and then is invoked for each employee object.

The third method uses a function constructor to instantiate an employee object who's prototype contains a logInfo function which is then invoked for each object.

In this scenario, I would use the third approach since the code is creating multiple instances of the same object.

Thanks, Kevin. You recommend the third option, but in a practical scenario would it be ok to use the first or the second since they make a lot sense to me (as I'm still a beginner & don't understand the prototype concept very well) ? — Dr. A. Waheed, Jan 01 '14 at 08:20

What is the difference between these apparently similar JS codes?

1 Answers1