first! … lol always wanted to do that… nice article

another great tuts! thanks jeff!

Awesome practices.

Example #11 is still passing a string… instead of setInterval(”someFunction()”, 3000); it should be setInterval(someFunction, 3000); That’s now passing a function reference instead of a string.

Other than that, excellent tips and reminders for beginners and experts alike.

Nice list. Would be nice to see something about anonymous functions, prototyping, native objects and the fact that everything in JavaScript is an object.

Greate tips, I found this very helpful seems as how im just starting to learn javascript.

Good list – some of the things apply to multiple languages (not a criticism!)

I find very few people adopt number 9

Nice compilation, thanks Jeffrey.

thanks Jeffrey!!

Like it, thanks it was a good reading.

On #24 you can eliminate the type attribute as well.
“There is no need to use the language or type attributes. It is the server, not the script tag, that determines the MIME type. ”
( http://javascript.crockford.com/code.html ).

Excellent!

Excellent Post!! Learned a few new tricks!!

I will try for some bonus points

6. Declare Variables Outside of the For Statement

I think your example can be made faster by assigning the HTML to a variable… and then assigning the innerHTML outside of the loop. This way you are only injecting the code into the DOM once!

Number 6, better still:

var container = document.getElementById(’container’);
var iArrayLength = someArray.length;
for(var i = 0, len = iArrayLength; i < len; i++) {
container.innerHtml += ‘my number: ‘ + i;
console.log(i);
}

Saves the cost of calculating the length of someArray on each pass of the loop.

Where do I claim my bonus points?

great tut jeff !

Thank you deeply for #24. People still do this all the time and it irks me to no end.

I had read in a lot of places that Array.join() is the fastest way to do string building, but eventually I did some more research and some benchmarking of my own, I’m really not so sure it is.

First, it depends A LOT on the browser. IE and Firefox have opposite strengths between array.join and the string concatenation operator.

It also depends on several variables like the number of iterations and the length of the strings being concatenated.

If you don’t have all the data in hand up front, and need to use array.push(), just so you can use array.join() at the end, this can end up being much, much slower.

In the end, string concatenation is really fast for most uses, so I’m wary of the suggestion that people not use it.

Great article, I’d like to add to number 3 – only use if statements if necessary, use the conditional ternary instead, e.g.

don’t use:

if (a > b) {
//do something
}

but use:

(a > b) ? //do something : null ;

(obviously that comment in the above example would kill it, it’s just for the purpose of the example!)
The ternary can even nest so most if…else loops can be replaced as well. Like with number 15, you may not see any real performance gains, but the code is much neater

For number 6 I’d be tempted to move the len variable out of the for construct as well and use:

var container = document.getElementById(’container’),
len = someArray.length;

for(var i = 0; i < len; i++) {
container.innerHtml += ‘my number: ‘ + i;
console.log(i);
}

Great list Jeffrey!

– “As you’ll notice, the indentation mimics the functionality of the curly brace”

Just to add a little explanation to this. IF statements are constructed in the following way:

if ([expression]) [statement]

If the expression evaluates to true then the statement is run. The good practice you mention involves surrounding multiple statements with curly braces, thus producing a “statement block” – a statement block is effectively a single statement containing any number of additional statements. Statement blocks are rarely seen as a construct in their own because they’re rarely useful on their own – you’ll normally only use them with a native language construct like with() or if() of for().

On another note, I’m glad that you put the advice about equality operators as #1. I really can’t stress the importance of this enough. People just don’t realise that doing this:

if (val == null) {…}

Is effectively the same as:

if (val === null || val === false || val === “” || val === 0 || val === undefined) {…}

Tip #3 reaction: Are you sure? Omitting { } is fine?

For me, I wouldn’t understand th logic if if I am going to remove the { and }
And I don’t take a risk bcause it might cause any errors and its hard for me not to use { } in IF (no ELSE) statement.

Guys, what do you think about it? do you think it would be ok to remove it? do you practice the traditional way (like putting {} ) or new-school way ?

Nice list. A few things I’d add.

Decrementing over a large array or collection in is faster than incrementing.

for (var i = someBigArray.length – 1; i >= 0; i–) {
processElement(someBigArray[i]);
}

Use object literals instead of new Object();

var obj = {};

Use innerHTML when making many changes to the DOM. Not only is it less code, but it executes native, compiled code that builds the DOM structure and appends it to the DOM.

el.innerHTML = “Hello, World”;

The number 5 is cool, I never used the scripts in that part of the page. Excellent tips.

Yet another great tuts post!

Thanks Jeff

you can improve that for loop by replacing the coma after

var i = 0 with a semicolon so that this actually works.

so instead of

” (var i = 0, len = someArray.length; i < len; i++) ”

make it

“(var i = 0; len = someArray.length; i < len; i++)”

thanks ,i didn’t understand any tip,because i haven’t start JS yet,your advice
the best way to start JS (Pls help !)

I’m not seeing #16.

Thanks for tip № 21.

var container = document.getElementById(’container’),
len = someArray.length,
result = ”;

for(var i = 0; i < len; i++) {
result += ‘my number: ‘ + i;
console.log(i);
}
container.innerHtml = result;

One more addition to #11:

Rather than pass a reference to a function as the first argument of setTimeout/setInterval, you can use an anonymous function:

setTimeout(function() {
// do something
}, 1000);

One thing I had hoped would be on here would be the differences between parseInt() and Number() and common problems people run into.

parseInt(str, [radix]) – where radix is the base you wish to convert the string to.

Javascript number literals have support for octal and hex. For instance numbers starting with “0″ are octal. 011 is octal for 9. Those starting with “0x” are hex. 0×10 is hexadecimal for 16. parseInt reads values in the string up until the first invalid character for the number its parsing (this is dependent on the radix). This allows you to do the following:

parseInt(”12eggs”) => 12

However a common mistake for beginners is that they don’t provide a radix and get unexpected results. For instance take a date string such as “08-08-2009″. Trying to convert the string might baffle you:

parseInt(”08″) => 0
parseInt(”08″,10) => 8

The first case is correct behavior of parseInt(). The 0 at the start puts parseInt into octal mode, and 8 is invalid in octal. Therefore this is just like the “eggs” case where the letters were invalid in base 10, because “8″ is invalid in base 8 (0..7). I’d recommend always specifying the radix unless you are sure you want to allow octal and hex numbers with parseInt.

I’ll be brief with Number(). This provides developers with the advantage of failing if you really expect a string to be a raw number and get anything except a pure number, parses into base 10, and can convert Date objects to numbers:

Number(”12eggs”) => NaN
Number(”0010″) => 10
Number( new Date() ) => 1245173237669

Cheers.

I would add ‘Use a Library’.

Nice list of useful information!

Great article! Also, instead of doing:

if (!amount) {
amount = 1;
}

you can use shorthand like this:

amount = amount || 1;

use an editor like netbeans to clean your code from unused vars, arguments, etc…

Nice, the firts article that I bookmarker related with JavaScript tips!
I think that you could talk about OOP with JavaScript. I wrote some articles related to JavaScript OOP in Portuguese:
http://joaopedropereira.com/blog/2009/03/14/js-oop-conceitos-basicos/
http://joaopedropereira.com/blog/2009/01/13/javascript-oop-1/

Take advantage of JS libraries to handle cross browser problem areas like event handling, ajax.

Indent your code consistently.

Declare all variables before using them.

Always use {} for if statements, even if they’re one-liners

If you make calls to long namespaces, declare a var pointing to it
foo.bar.baz = { whatever… }
var baz = foo.bar.baz

Thanks!!!

Great Tut!

Thanks Jeffrey, always a pleasure to read your articles !
And the comments are damn interesting too, I already wrote some tips down on a post-it deep behing the eyes

Great post, I love it!!
- Greg

More Efficient way

var container = document.getElementById(’container’);
var i = 0;
var len = someArray.length;

for(i, i < len; i++)
{
container.innerHtml += ‘my number: ‘ + i;
console.log(i);
}

Great post! Even for an advanced programmer.

God Like

Wow! Perfect timing – thanks a lot!

Excellent hints even for a beginner like me
Thanks!

Kind Regards
Rata

Nice post. Most advice I was already following, thankfully, but when it comes to the Object protoype function “hasOwnProperty”, why would this function skip over function data and process non function data only?

I have the book “JavaScript: The Good Parts” by Crockford, and it doesn’t answer my question.

I searched the web but there doesn’t seem to be a lot of accurate info around the function.

Any ideas anyone?

Thanks for the JavaScript Tips!

thanks for this

Another great post from Nettuts!
It refreshes my mind,
and clear some of my questions!
Thanks.

Great Tutorial.

Maybe a PHP edition of the “Best Practices for Beginners” next??

Hey nice tips, nice to know that i am following almost half of them.
Like using {} for empty objects, using JSLint, using [] for array, always making use of {} for conditions , love to use raw JS try to implement things in raw JS which people are using as plugins with jQuery, using === and few more….
Thanx to James Padolsey and Douglas Crockford for gr8 inspiration.

Love to watch video of presentations of Douglas Crockford and other JS videos from YUI Theatre (Go thru them, they are nice and informative). If you are new they are quiet helpful.

Where is 16 ??

Great article – thanks. Just a question on declaring Objects and Arrays. What’s the issue with new Object{} as apposed to object literals? I’ve tended to use the former as it’s more consistent with ActionScript and therefore easier to switch between the two. Be good to understand why {} and [] are best practice though.

About nr 9. Commenting code. If you feel the need to comment the code as you do, it is a sign that you need refactoring. I’d suggest do one or two of this instead:

A. Put it in a good named function. An added bonus is that it shows up in for example the Firebug profiler. In your case the function could be called logArray or printArray or debugLogArray. That makes the comment obsolete, and the code self-documenting.

B. Reduce the trickiness. The example you have is quite simple, but I think the for loop is verbose. There are two new variables and four or so expressions. Why not use some library and a function for iterating over arrays?
I’d think this is clearer and less bug prone:
somelib.each(array, console.log)
Replace somlib and each with your own choice.

Nice list!
You could also combine #8 and #21 to avoid global variables by putting all code that goes together in the same function scope:
(function(){
var name = ‘Jeffrey’;
var lastName = ‘Way’;
var doSomething = function() {…} ;
console.log(name); // Jeffrey — not window.name
})(); // semi-colon, remember #17

Thanks author. Some gr8 tips. anyway 16 is missing.

I’d say, a good advice for beginners would be to not go too fast into frameworks like jQuery. Because it might lead to confusion.

#2

For example – to avoid using eval for dynamic function names

Eval
// Call the function
result = eval(”test” + i + “();”);

Not Evil
// Call the function
result = window["test" + i]();

Avoiding the “new” keyword…any other obvious reasons other than that it reduces some verbose typing? It’s pretty much engraved in mind from those old OOP days to use “new”. Wanted to see if it’s worth to get rid of that notion from mind.

As usual, excellent advice. As mundane as #24 sounds, I still do it…Old habits die hard!

Great list! Thank you dude.

Thanks, very helpful and informative, picked up a few things I never even thought of.

Amazingly helpful! Thanks a lot I learned so much.

absolutely love it!

Very helpful, great tips, thanks!

I’m new to JS but shouldn’t there be a name = ‘name’ instead of name: ‘name’? I don’t know for sure but just want to ask it.

#7 is brilliant – I would never have thought of it.

I’m not sure I see the benefit of #15, though.

where is #16? should it not be “23 javascript best practices for beginners?”

tnx

Extremely helpful post. I’m surprised there were this many comments without a grammar cop busting you on #22: “…can always…” Those two words are mutually exclusive. I something can happen, it doesn’t always happen.

I knew most of them already!!!!

nice tutorial
thanks alot

If you have to comment your code it is time to refactor.
Extract methods an name them properly, have a good controller function and no need for comments. The only place I would use comments is if I have complex algorithms or complex regular expressions.

Number 16 is missing.

16. Don’t assume that document elements exist.

Bad:

document.getElementById( ‘myLabel’ ).innerHTML = ‘Some wonderful text’;

Better:

var element = document.getElementById( ‘myLabel’ )
if ( element && ( ‘innerHTML’ in element ) ) {
element.innerHTML = ‘Some wonderful text’;
}

#6 should really be worded as “Define variables outside of For Statement”

Declaring is not the same as defining.

also…

Use local variables in For Statement is really important.
For example, in #18, you have:

for(key in object) {

instead of:

for(var key in object) {

which means that key is a global variable.

In #19, you have:

for(x=5000; x > 0; x–){}

instead of:

for(var x=5000; x > 0; x–){}

What does this mean for your benchmarks?

Yes evals are evil..but sometime needed. I never discount anything.

When possible traverse the array backwards. The comparison to 0 is faster on all architectures than to a variable.

var container = document.getElementById(’container’);
for(var i = someArray.length – 1; i >= 0; i–) {
container.innerHtml += ‘my number: ‘ + i;
console.log(i);
}

For #6, adopting Bernard Haussner’s idea above:

(function(container, length) {
var result = [];
for(var i = 0, len = length; i < len; i++) {
result.push(’my number: ‘ + i);
console.log(i);
}
container.innerHtml += result.join();
})(document.getElementById(’container’), someArray.length);

Thanks… Great tips…

In the Better section of #13 shouldn’t

lastName = ‘Way’,

be

lastName: ‘Way’,

Great! I always use ==, next time, === will be my first choice

Don’t agree about eval and especially with Short-hand, short-hand should be used when you have only one command after the if statment.

Eval is not so bad like you said. Obviously you will not evaluate something that user type in a textfield but can be used in many situations without security issues, remember, JS is client-side so everything can be manipulated doesn’t matter if it is evaluated or not because we allways validate the things that should be maintaned in the server side.

Only care with performance when it is a problem, I will not do a for instead of each before this each starts to be slower than should be.

O thenks

Great article. I’ve been coding javascript for years and I learned some new things from the article as well as the comments.

One thing I really liked that no one mentioned however, was the Roadhouse quote in the about the author section.

Nice thanks for the tips, good tutorial!

Really Good.. thanks Jeffrey!!

JSLint your code, and accept NO errors. This will force you to write it more safely, and will cover a good number of these ‘best practices’

JSMin-ify it. Remove all new lines. Anyone who thinks you don’t need curly braces will quickly get unstuck.

Have a script that does both of these and deploys your code (even if just to a different folder) before you test it.

Comments are for lengthy procedural scripts, regex and hard-to-read algorithms. Sensibly factored programs need less comments. That said, if you’re in a team, JSDocs are good, especially if you all use IDEs that support them, and your code base is BIG.

Also if you’re writing code that someone else will end up maintaining, remember it’s often worth sacrificing “clever” code for maintainable code, even if there’s a small performance loss.

Use a library (jquery and jquery ui the clear leader) to manipulate the DOM. Code that doesn’t touch the DOM, write in straight Javascript.

Don’t pollute the global namespace.

If you don’t put semi-colons after functions like

var foo = function() {
};

then you should not use semicolons anywhere for consistency. It’s about time js became more python-like.

i think you miss one more thing that is cache your DOM object instead of calling many time
like

bad
function testFunction(){
document.getElementById(’testElement’).className=’testClass’;
document.getElementById(’testElement’).value=’test’;
document.getElementById(’testElement’).disabled=true;
}

better

function testFunction(){
var testElement=document.getElementById(’testElement’);
testElement.className=’testClass’;
testElement.value=’test’;
testElement.disabled=true;
}

btw very nice Article

Just Great.
Just Great.
Just Great.

Thank You for this nice one.

This borrows VERY heavily from Douglas Crockford’s book, blog, web site etc — I think about 20 of the 24 are Crockford’s. It’s fair to say without Douglas Crockford this list wouldn’t exist. Yet there is very little in the way of attribution. I doubt that’s malicious, but it’s not great form.

Btw I’m not a Crockford zealot. I don’t know the man, and I disagree with some of his practices (e.g. declaring all vars at the beginning of a function). But fair’s fair.

Wow! Fantastic Article!!! Thanks Jeffrey!

Wow, I’m so proud that I have been using most of these practices and I’ve also learned a few more, thanks!

Excellent compilation Jeffrey !! Thank you very much . . . .

Thanks.
Greatt post

Perfect post for a beginner like me thanks for the incite on good practice.

In My Opinion this is the fastest way to do it .
there is no problem to put the variables inside of the forloop so you could put it out side or inside this doesn’t change the speed .
if the pushing the result in array is faster than storing them in a variable .

if (!console) { var console = {log:function(){}}; }
var container = document.getElementById(’container’);
var result = [];
for(var i = 0, len = someArray.length; i < len; i++) {
result.push(’ my number’+i);
}
container.innerHtml = result.join();
console.log(container.innerHtml);

let me know if you guys have another opinion !

best practice is very useful for me. to increase my quality in the project.
Thx

very nice post and it helps alot for beginners

thats was a great article indeed.. thanks mate..

I want to say in a sentence that is !!!!Just amazing!!!!!

Nice tutorial. Thanks!

Good tips.

About $5, how would this affect using jQuery’s .ready and Mootools’ domready events, if scripts were loaded in the footer?

On #6, you should declare the someElements.length outside of the loop declaration because it has to fetch the same value every time it evaluates.

Douglas Crockford is the man!!! When I come be old, I want to be like him!

Douglas Crockford is the man!!! When I come be old, I want to be like him!

P.s.: The comment above has in wrong name.

Great Tutorials !
It has more helpful for reducing code.

Thanks !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

very helpful for beginners

Another Great book is JavaScript the Missing Manual, it includes some jquery and is an overall very easy read. The Author make real life connections, and adds a little humor.