Bad Habit

Bad Habit

Best Practice

Bad Habit

Best Practice

Best Practice Summary

• Based on the false-y rules we learned earlier, if we want to check if a variable is undefined, not null, and has a value then all we need to do is check the object itself.

Bad Habit

Best Practice

Best Practice Summary

• When you are comparing two values in JavaScript you should use the Identify Comparison Operators (=== & !==).

Bad Habit

Good Practice

Better Practice

Best Practice Summary

• Declare all of your variables using their literal notation instead of using the new operation.
• You shouldn’t use the new keyword for Boolean, Number, String, or Function. All they do is add additional bloat and slow things down.
• Use the new keyword is if you are creating a new object and you want it to use a constructor that you defined.

Bad Habit

Best Practice Using for Statement on Arrays

Bad Habit Prototypes Bleed Through

Bad Habit Prototypes Still Bleed Through

Best Practice

Best Practice

Best Practice Summary

• Use the for statement for arrays
• Use the for…in statement when iterating over objects and check the hasOwnProperty method

Bad Habit

Best Practice

Best Practice Summary

• It is considered best practice to declare all of your variables at the top of your function. By declaring your variables at the top of your function, you are sending a message to yourself and anyone else that those variables are available to anything inside of the function.
• It turns out there is an even more compelling reason to declare your variables at the top of your function.

Bad Habit

How JavaScript Interprets It

Where Things Can Get Confusing: Part 1

Where Things Can Get Confusing: Part 2

Where Things Can Get Confusing: Part 2

How You Might Write It

How JavaScript Interprets It

Best Practice Summary

• Declare all of your variables at the top of your function

Looping Without A Closure

A Simple Example with a Visual

Looping With A Closure: Part 1

Looping With A Closure: Part 2

Best Practice Summary

• A closure can be very helpful when trying to persist certain variable states.
• Using the concept of closures to simulate private methods and properties as you might expect from C#. We will cover this in a later point.

For more examples of when to use closures appropriately in your code there is a great post by Juriy Zaytsev on Script Junkie entitled Use Cases for JavaScript Closures

Bad Habit

Object Literal (All Public)

Pros & Cons

Pros

• Cleans up the global namespace by adding a namespace to your properties and methods
• You can add functionality to the object literal at a later point
• All the properties and methods are public

Cons

• Uses the Object Literal syntax to define your properties and methods that some may find cumbersome
• There isn’t the ability to have private properties or methods

Self-Executing Anonymous Function: Part 1 (All Private)

Pros & Cons

Pros

• Hides all your implementation from external code
• The function runs once and only once
• The code inside doesn’t use the Object Literal notation

Cons

• All information is hidden, which may not be what you want
• Slightly more complicated technique, but not really

Revealing Module Pattern (Public & Private)

Pros & Cons

Pros

• Allows for public and private properties and methods
• The Technique is Easy to understand
• The code inside doesn’t use the Object Literal notation

Cons

• Doesn’t allow for a way to add private properties to be used in new public methods

Self-Executing Anonymous Function: Part 2 (Public & Private)

Pros & Cons

Pros

• Gives ability to have public & private properties & methods
• The code inside doesn’t use the Object Literal notation
• Keeps undefined’s value as undefined in case someone overrode
• You can use $ in your code without worrying about library clashing
• Allows your library to grow across files using the “window.namespace = window.namespace || {}” technique
• A common pattern that you will see in libraries, widgets, and plugins

Cons

• Slightly more complicated pattern, but not overly difficult

Best Practice Summary

• In JavaScript it is very important to declare all of your variables and it is considered a best practice to limit the number of objects in the global namespace.
• Depending on the situation you are developing you may need one or more of the concepts listed above to organize your code and keep it from colliding with other libraries.
• There is no pattern that is a Silver Bullet, but rather you should assess where you are at and examine the pros and cons of each pattern to address your situation.

Best Practice Learn

Books

• JavaScript: The Good Parts by Douglas Crockford
• JavaScript Patterns by Stoyan Stefanov

Articles

• Prototypes and Inheritance in JavaScript by Scott Allen
• Use Cases for JavaScript Closures by Juriy Zaytsev
• JavaScript for C# Programmers series by Julian Bucknall

Video

• Crockford on JavaScript video series on Yahoo!