This presentation is an HTML5 website

Press key to advance.

Zoom in/out: Ctrl or Command + +/-

Having issues seeing the presentation? Read the disclaimer

Good
JavaScript
Habits

by Elijah Manor ( @elijahmanor )

Who Am I?

Elijah Manor

Microsoft MVP ASP.NET elijah.manor@gmail.com
ASPInsiders http://elijahmanor.com
.appendTo() http://twitter.com/elijahmanor

Enterprise jQuery

Not Understanding
False-y Values

1. Not Understanding False-y Values

Bad Habit

Not Testing & Setting Default Values Correctly

2a. Not Testing Values Correctly

Bad Habit

2a. Not Testing Values Correctly

Best Practice

2b. Not Setting Default Values Correctly

Bad Habit

2b. Not Setting Default Values Correctly

Best Practice

Testing & Setting Default Values Correctly

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.

Using the Wrong Comparison Operators

3. Using Wrong Comparison Operators

Bad Habit

3. Using Wrong Comparison Operators

Best Practice

Using the Right Comparison Operators

Best Practice Summary

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

Not Declaring Arrays & Objects Correctly

4. Not Declaring Arrays & Objects Correctly

Bad Habit

4. Not Declaring Arrays & Objects Correctly

Good Practice

4. Not Declaring Arrays & Objects Correctly

Better Practice

Declaring Arrays & Objects Correctly

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.

Not Using The for…in Statement Correctly

5a. Using the for…in Statement on Arrays

Bad Habit

5a. Using the for…in Statement on Arrays

Best Practice Using for Statement on Arrays

5a. Using the for…in Statement on Arrays

Bad Habit Prototypes Bleed Through

5b. Using for…in Incorrectly with Objects

Bad Habit Prototypes Still Bleed Through

5b. Using for…in Incorrectly with Objects

Best Practice

5b. Using for…in Incorrectly with Objects

Best Practice

Not Using The for…in Statement Correctly

Best Practice Summary

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

Misunderstanding
Scope in JavaScript

6. Misunderstanding Scope in JavaScript

Bad Habit

6. Misunderstanding Scope in JavaScript

Best Practice

Understanding Scope in JavaScript

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.

Not Knowing Variable
And
Function Hoisting

7a. Variable Hoisting

Bad Habit

7a. Variable Hoisting

How JavaScript Interprets It

7a. Variable Hoisting

Where Things Can Get Confusing: Part 1

7a. Variable Hoisting

Where Things Can Get Confusing: Part 2

7a. Variable Hoisting

Where Things Can Get Confusing: Part 2

7b. Function Hoisting

How You Might Write It

7b. Function Hoisting

How JavaScript Interprets It

Knowing Variable And Function Hoisting

Best Practice Summary

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

Not Using Closures Correctly Or At All

8. Not Using Closures Correctly Or At All

Looping Without A Closure

8. What is a Closure?

A Simple Example with a Visual

8. Not Using Closures Correctly Or At All

Looping With A Closure: Part 1

8. Not Using Closures Correctly Or At All

Looping With A Closure: Part 2

Using Closures When Necessary

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.
Note

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

Having Variables
& Functions
in Global Scope

9. Having Vars & Funcs in Global Scope

Bad Habit

9. Having Vars & Funcs in Global Scope

Object Literal (All Public)

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

9. Having Vars & Funcs in Global Scope

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

SEAF: 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

9. Having Vars & Funs in Global Scope

Revealing Module Pattern (Public & Private)

Revealing Module (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

9. Having Vars & Funs in Global Scope

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

SEAF: 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

Minimizing Vars & Funs in Global Scope

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.

Tools to Help You

Best Practice JSLint or JSHint

Additional Resources

Best Practice Learn

Books

Articles

Video

Questions?

Elijah Manor

Microsoft MVP ASP.NET elijah.manor@gmail.com
ASPInsiders http://elijahmanor.com
.appendTo() http://twitter.com/elijahmanor