confusion on the usage of object and function javascript

Question

especially the 'this' keyword. Like below code, using function, I can avoid duplication of code already. The more I read sample code the more confuse I'm, it's like things can be achieved this way, but there are other (complex) ways to do it.. or I'm wrong?

var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "[email protected]"
};

var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888-8888",
    email: "[email protected]"
};

// printPerson added here
function printPerson(person){
    console.log(person.firstName + " " + person.lastName);

}

printPerson(bob);
printPerson(mary);

my question is, how to improve above code by using this keyword. For now, I already seeing OOP (or I'm wrong?).

extra : Need no constructor or something more complex like new keyword.

"Need no constructor or something more complex like new keyword.". Unless you're going to implement an Object.prototype method or use Object.create (which is "complicated"), there's no way around it. — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Dec 14, 2013 at 11:27

thefourtheye · Accepted Answer · 2013-12-14 11:27:13Z

1

function Person(firstName, lastName, phoneNumber, eMail) {
    var that = this;
    that.firstName = firstName;
    that.lastName = lastName;
    that.phoneNumber = phoneNumber;
    that.eMail = eMail;
    return {
        printPerson: function() {
            console.log(that.firstName + " " + that.lastName);
        }
    }
};

var person1 = Person("Bruce", "Wayne", "1234", "[email protected]");
person1.printPerson();

var person2 = Person("Kent", "Clark", "4321", "[email protected]");
person2.printPerson();

answered Dec 14, 2013 at 11:27

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Qantas 94 Heavy Over a year ago

Odd requirement from the questioner, but: "Need no constructor or something more complex like new keyword". This is probably the most sane method of going about it though. Also, any reason for returning only the printPerson method?

thefourtheye Over a year ago

@Qantas94Heavy Its for demonstration only. Also, he had only printPerson only in the question :)

6502 · Accepted Answer · 2013-12-14 11:36:30Z

The problem of the printPerson approach is when you need "polymorphism"; i.e. you want to print an object but you don't want to know what kind of object it is: suppose

function newPerson(firstName, lastName) {
    return { firstName: firstName,
             lastName: lastName };
}

function newPet(name, kind) {
    return { name: name,
             kind: kind };
}

function printPerson(person) {
    console.log(person.firstName + " " + person.lastName);
}

function printPet(pet) {
    console.log(pet.name + " (a nice " + pet.kind + ")");
}

var p1 = newPerson("Andrea", "Griffini");
var p2 = newPet("Tobi", "cat");

printPerson(p1);
printPet(p2);

the problem however is... suppose you're given an object x and you need to print it, but you don't know if it's a person or a pet... how do you do? Solution 1 is checking with if/then

if (x.firstName) {
    printPerson(x);
} else {
    printPet(x);
}

but this is annoying because if you add later another type of object you need to fix that.

The OOP solution is to change the code slightly

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.print = function() {
        console.log(this.firstName + " " + this.lastName);
    };
}

function Pet(name, kind) {
    this.name = name;
    this.kind = kind;
    this.print = function() {
        console.log(this.name + " (a nice " + this.kind + ")");
    };
}

and now the use becomes

var p1 = new Person("Andrea", "Griffini");
var p2 = new Pet("Tobi", "cat");

p1.print();
p2.print();

and the problem for a general x is just x.print().

Basically the idea is to keep the data (e.g. firstName, lastName) and the code (e.g. the implementation of print) together for each type of object. You can add a new object type by just implementing the constructor and without the need to change other code that will "magically" end up calling the correct version of print.

Collectives™ on Stack Overflow

confusion on the usage of object and function javascript

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related