Maintainable JavaS cript
Nicholas C . Zakas
S r. Frontend E ngineer, M y
Yahoo!

Why?
Writing New
Code
Maintaining
Code

Who cares ?
• Your employer
• Your co-workers, present and future
• D evelopment community

What is maintainability?
• Understandable
• Intuitive
• Adaptable
• E xtendable
• D ebuggable

C ode C onventions
M aintainable JavaS cript

R eadable code
• Indent your code
• C omment your code
– E ach method
– Large sections of code
– D ifficult-to-understand algorithms
– Hacks

Naming
• Use logical names for variables and
functions
– D on’t worry about length
• Variable names should be nouns (i.e., car)
• Function names should begin with a verb
(i.e., getName())
– For functions returning Boolean values, prefix
with “is”, such as isValid()
• Avoid useless names such as foo, bar,
temp

Indicate variable type
• Initialization
var found = false;
• Hungarian Notation
var sName = \"Nicholas\";
• Type C omments
var cost /*:float*/ = 5.23;

Loos e C oupling
M aintainable JavaS cript

C lient-s ide Layers
Behavior Presentation
(JavaScript) (CSS)
Structure
(HTML)

S eparate HTML and
JavaS cript
• JavaS cript in HTM L
<a onclick=\"sayHi()\">text</a>
• HTM L in JavaS cript
element.innerHTML = \"<div>\"
+ \"<a href=\"/js/\">text</a></div>\";

S eparate C S S and
JavaS cript
• JavaS cript in C S S
div.hd {
width:
expression(ref.offsetWidth+\"px\");
}
• C S S in JavaS cript
element.style.color = \"red\";

E vent handlers handle
events
function handleKeyPress(event){
if (event.keyCode == 13){
var value = 5 *
parseInt(txt.value);
div.innerHTML = value;
alert(\"Updated\");
}
}

E vent handlers handle
events
function handleKeyPress(event){
if (event.keyCode == 13){
performCalculation();
updateUI();
}
}

Prog ramming Practices
M aintainable JavaS cript

Don’t Modify Objects You
Don’t Own
• D on’t add methods
• D on’t override methods
• You don’t own O bject, Array, R egE xp,
S tring, Number, B oolean, D ate,
Function

Avoid g lobals
• All publicly-accessible
functions/ variables should be attached
to an object
• Namespace your objects
– D on’t go overboard
– Three levels is enough
YAHOO.Way.Too.Long.Namespace

Don’t overus e popular
techniques
• C losures/nested functions
– Use sparingly
• O bject literals
– S ingletons
– P ass data

Throw your own errors
function add5(value) {
if (arguments.length < 1) {
throw new
Error(\"add5: Not enough args\");
}
return value + 5;
}

Avoid null comparis ons
function sortArray(value) {
if (value != null) {
value.sort();
}
}

Avoid null comparis ons
function sortArray(value) {
if (value instanceof Array) {
value.sort();
}
}

Avoid null comparis ons
function sortArray(value) {
if (value instanceof Array) {
value.sort();
} else {
throw new Error(\"sortArray:
argument must be an array.\");
}
}

Avoid null comparis ons
• Use instanceof for specific types of
objects
if (value instanceof
constructor){
• Use typeof to test for string, number,
B oolean
if (typeof value == \"string\") {

Us e C ons tants
function validate(value) {
if (!value) {
alert(\"Invalid value\");
location.href =
\"/errors/invalid.php\";
}
}

Us e C ons tants
var Constants = {
INVALID_MSG : \"Invalid value\",
INVALID_URL : \"/errors/invalid.php\"
};
function validate(value) {
if (!value) {
alert(Constants.INVALID_MSG);
location.href =
Constants.INVALID_URL;
}
}

Us e C ons tants
• R epeated unique values
• UI strings
• UR Ls
• Any value that may change in the future

B uild Proces s
M aintainable JavaS cript

B uild Proces s
Source Files
Build

R ecommendations
• O ne object or object definition per file
– Indicate dependencies
• Use a build step
– C ombine files in appropriate order
– S trip comments/ whitespace
– Validate code

S ummary
M aintainable JavaS cript

S ummary
• C ode C onventions
• Loose C oupling
• P rogramming P ractices
• B uild P rocess

Ques tions and Ans wers
M aintainable JavaS cript

E tcetera
• M y email: nzakas@ yahoo-inc.com
• M y blog: www.nczonline.net