JavaScript: Best Practices for Beginners

JavaScript is a programming language that can be used everywhere to transform web pages from dull documents to something that’s fun and interactive. When it comes to learning, it’s important to identify the best practices to establish healthy habits. So, let’s review a few best practices of JavaScript.

Variable Naming
When writing code for a computer, the code creates a story. Stories are easier to understand when its written in a format that is easy to follow and a great first step is keeping variable names clear and concise by using descriptions other coders can understand. Essentially variables are containers for storing data values. Let’s say a shoebox is the variable since it’s a place to store things. Variables need to have unique names called identifiers. If a shoebox is the variable, the label for the shoebox would be the variable name. It’s the name that’s used when referring to the shoebox. And the shoes inside the box equal the contents of the variable. If the variable name is clear and concise such as Soccer Shoes, it makes it easy to identify what’s inside the box.

Avoiding Global Variables
Did you know global variables can be overwritten by other scripts? Can you imagine all the effort of coding a piece of functionality to find it overwritten by additional functionality written by another developer? All variables are global, which means they can be accessed, unless additional measures are taken such as making the variables private with closures. The use of closures and module patterns contain the variables which prevents them from being overwritten.

In this example, the local variable is ‘a’ which can only be used inside the function, which is where it’s defined, making it hidden from other functions and code.

function myFunction() {
    var a=4;
    return a * a;
}

However, here is an example of ‘a’ being the global variable because it’s declared outside a function.

varr a = 4;
    function myFunction () {
    return a * a;
}

Object Literal
An object literal notation is an array with key value pairs. A colon separates the keys and values followed by a comma after each key value pair apart from the last item, just like a regular array. It’s a way to contain everything however it can still be accessed by the object name.

Here’s an example of code using dot notation.

var myObject = new Object();
    myObject.myProperty = value;
    myObject.yourProperty = value;
    myObject.myMethod = function(){
    //code here
}
    myObject.yourMethod = function(){
    //more code
}

Here’s an example of code using object literal which results in cleaner and more concise code.

var myObject ={
    myProperty : value,
    yourProperty : value,
    myMethod : function(){
    //code here
},
    yourMethod : function(){
    //more code
    }
}   

Module Patterns
Module patterns are used to mimic the concept of classes in other programming languages. In JavaScript it allows private and public methods and variables to be stored inside a single object. This creates a public facing API for methods that need to be exposed to the world while also creating an encapsulation of code to keep variables private. It’s the most common design pattern in JavaScript and the use of objects prevents code bloating from repetition. Just like a chapter book, good modules are self-contained.

Revealing Module Pattern
This is like module patterns however it ensures all variables and methods are private until they’re exposed directly. It creates a code management systems that’s easy to define and with clear visibility to methods that point back to the module.

Strict Coding Style
Did you know JavaScript that’s poorly written can contain security flaws with severe consequences? Hackers like to use JavaScript exploitation tools making JavaScript an easy target and the vulnerabilities can be enterprise and client-side. Taking the time to learn proper code will pay off in the long run and remember valid code is secure code and secure code is valid code!

Have you ever been asked the question: How do you eat an Elephant? Learning JavaScript as a beginner can seem just as daunting. But the best approach, just like the answer to eating an elephant, is one bite at a time. Read a little, code a little, test a little, then research some more and repeat the process and before you know it you’ll be a master at all the key best practices for JavaScript!