JavaScript Best Practices

Ahmed Murtaza

ahmedgmurtaza

@ahmedgmurtaza

codepen.io/ahmedgmurtaza

codesandbox.io/u/Ahmedgmurtaza

slides.com/ahmedmurtaza

What this workshop is

• Will look into basic but Must-to-do coding practices in javascript
• will cover Hoisting
• Will go through chrome dev tools + eslint

1 - Use === Instead of ==

BUT

CORRECT

WRONG

2 - Don't use short-hand, use {}, () when necessory

Bad

Good

( always use brackets)

3 - Place Scripts at the Bottom of Your Page

• Load HTML document before sub document resources
• Specially when using DOM manipulation 

4 - Declare Variables Outside loops

Bad

Good

5 - Reduce Globals

"By reducing your global footprint to a single name, you significantly reduce the chance of bad interactions with other applications, widgets, or libraries."
- Douglas Crockford

Better

6 - /* Comment your code */

• Easy to grasp the code context after months
• Extremely useful for team projects
• Less documentation required

7 - Long List of Variables? Omit the var/const/let Keyword and Use Commas Instead

Better

9 - Self-executing functions

1. Helps to reduce conflicts from other scripts and libraries 

11 - Use ESLint

• Bug free code
• Consistent code quality
• Configure your own style guidelines

Extensions are available

References

• https://app.pluralsight.com/library/courses/javascript-best-practices/table-of-contents
• 
  
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference