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