Am I Writing JS Object-Oriented Code Properly?

Question

I am new to Javascript and object-oriented programming in general. I would like to know if I am following the best practices when writing JS OOP code.

Here I made a class called _name and gave it some properties as well as an object this.details. Then I use prototyping to create methods for the class.

//define _name class (I use _ to easily recognize classes)
function _name () {
    this.firstName = '';
    this.lastName = '';
    this.middleName = '';
    this.details = {
        eyeColor: '',
        hairColor: ''
    }
}

//begin _name methods

_name.prototype.getFullName = function() {
    return this.firstName + ' ' + this.middleName + ' ' + this.lastName;
}
_name.prototype.setFirstName = function(firstName) {
    if ($.trim(firstName).length && typeof firstName != 'not_defined') {
        this.firstName = firstName;
    } else {
        alert('Please enter a valid first name.');
    }
}
_name.prototype.setLastName = function(lastName) {
    if ($.trim(lastName).length && typeof lastName != 'not_defined') {
        this.lastName = lastName;
    } else {
        alert('Please enter a valid last name.');
    }
}
_name.prototype.setMiddleName = function(middleName) {
    if ($.trim(middleName).length && typeof middleName != 'not_defined') {
        this.middleName = middleName;
    } else {
        alert('Please enter a valid middle name.');
    }
}
_name.prototype.setHairColor = function(hairColor) {
    this.details.hairColor = hairColor;
}
_name.prototype.setEyeColor = function(eyeColor) {
    this.details.eyeColor = eyeColor;
}

//end _name methods

var personOne = new _name();
personOne.setFirstName('John');
personOne.setLastName('Doe');
personOne.setMiddleName('Barry');
personOne.setEyeColor('Brown');
personOne.setHairColor('Black');
document.write(personOne.getFullName());
document.write(personOne.details.eyeColor);
document.write(personOne.details.hairColor);

Answer 1

In the big picture, yes, you're doing fine; nice one. :-) Consider the examples in this other answer on SO for more information and perspective.

Some pointers, none of which is OOP-related, just JavaScript-related:

1. The overwhelming convention in JavaScript is that constructor functions (your _name) are initially-capped, e.g. Name (like Date or RegExp).

2. Your various functions assigned in the form _name.prototype.setLastName = function() { ... } are anonymous functions assigned to properties that have names. Giving your functions proper names helps your tools help you. Some engines are smart enough to figure it out even when you don't give your functions names, but others need proper names. See the link above for examples, and/or Anonymouses anonymous.

3. You're relying on the horror that is automatic semicolon insertion in all of your function assignments: _name.prototype.setLastName = function() { ... } should end with a semicolon after the }. Recommend learning the rules and always supplying the semicolons explicitly; when the engine has to guess, it can guess wrong, and it makes minification/compression/packing difficult when you leave them out.

4. Rather than writing _name.prototype.xyz = ... all over the place, consider using a scoping function and caching _name.prototype to a simpler symbol, e.g.:

   (function(p) {
       p.setLastName = function() {
           // ...
       };
   
       p.xyz = function() {
           // ...
       };
   })(_name.prototype);
   

   ...or using a helper function that goes further than that. Just to cut down on keystrokes and script size.

But again, by and large, yes, you're on the right track.

More reading:

• Mythical methods
• You must remember this

Answer 2

Some comments:

I use _ to easily recognize classes

The standard is to use Capitalized names for constructor functions. The underscore is used to imply privacy of variables or properties - i.e. they are public, but should not be used.

var personOne = new _name();

personOne.setFirstName('John');

personOne.set...

Usually you'd use arguments to the constructor:

function Name (first, last, middle, eye, hair) {
    this.firstName = first;
    this.lastName = last;
    this.middleName = middle;
    this.details = {
        eyeColor: eye,
        hairColor: hair
    }
}

var personOne = new Name('John', 'Doe', 'Barry', 'Brown', 'Black');

The setters will usually be called only once when initialising, so you can move their code into the construtor function. If you plan to make the properties changeable, you still could call the setter function with the validation logic from the constructor.

typeof middleName != 'not_defined'

The result of the typeof operator for value-less variables is "undefined". You also should will need to check that before trimming.

There also might be some flaws in your general code design. You use the same condition for first, middle and last name, you should really move them into a own validateString function which can be called from the single setters (DRY code). As well, a validation function should not give the user the feedback about what to enter, it should just return false for "not valid". The user interaction should be done by the module that also handles your input - not in the data structuring module.