Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. 23 JavaScript Best Practices for Beginners
  • dislike -5 19

    23 JavaScript Best Practices for Beginners

    1. January 2014
    2. Daily
    3. read 0

    As a follow-up to "30 HTML and CSS Best Practices", this week, we'll review JavaScript!

    1. Use === Instead of ==

    JavaScript uses two different kinds of equality operators: === and !== are the strict equality operators, while ==  and != are the non-strict operators. It is considered best practice to always use strict equality when comparing.

    "If two operands are of the same type and value, then === produces true and !== produces false." - JavaScript: The Good Parts

    However, when working with == and !=, you'll run into issues when working with different types. When the values you're comparing have different types, the non-strict operators will try to coerce their values, and you may get unexpected results.

    2. eval() Is Bad

    For those unfamiliar, the eval() function gives us access to JavaScript's compiler. Essentially, we can execute a string's result by passing it as a parameter of eval().

    Not only will this decrease your script's performance substantially, but it also poses a huge security risk because it grants far too much power to the passed-in text. Avoid it!

    3. Don't Use Shorthand

    Technically, you can get away with omitting most curly braces and semi-colons. Most browsers will correctly interpret the following:

    if(someVariableExists)
   x = false

    However, consider this:

    if(someVariableExists)
   x = false
   anotherFunctionCall();

    You might think that the code above would be equivalent to:

    if(someVariableExists) {
   x = false;
   anotherFunctionCall();
}

    Unfortunately, you'd be wrong. In reality, it means:

    if(someVariableExists) {
   x = false;
}
anotherFunctionCall();

    As you'll notice, the indentation mimics the functionality of the curly brace. Needless to say, this is a terrible practice that should be avoided at all costs. The only time that curly braces should be omitted is with one-liners, and even this is a highly debated topic.

    if(2 + 2 === 4) return 'nicely done';

    Always Consider the Future

    What if, at a later date, you need to add more commands to this if statement? In order to do so, you would need to rewrite this block of code. Bottom line—tread with caution when omitting.

    4. Use JSLint

    JSLint is a debugger written by Douglas Crockford. Simply paste in your script, and it'll quickly scan for any noticeable issues and errors in your code.

    "JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems." - JSLint Documentation

    Before signing off on a script, run it through JSLint just to be sure that you haven't made any mindless mistakes.

    5. Place Scripts at the Bottom of Your Page

    This tip has already been recommended in the previous article in this series. As it's highly appropriate, though, I'll paste in the information.

    Place JS at bottomPlace JS at bottomPlace JS at bottom

    Remember—the primary goal is to make the page load as quickly as possible for the user. When loading a script, the browser can't continue until the entire file has been loaded. Thus, the user will have to wait longer before noticing any progress.

    If you have JS files whose only purpose is to add functionality—for example, after a button is clicked—go ahead and place those files at the bottom, just before the closing body tag. This is absolutely a best practice.

    Better

    <p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

    6. Declare Variables Outside of the For Statement

    When executing lengthy for statements, don't make the engine work any harder than it must. For example:

    Bad

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

    Notice how we must determine the length of the array for each iteration, and how we traverse the DOM to find the "container" element each time—highly inefficient!

    Better

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

    7. The Fastest Way to Build a String

    Don't always reach for your handy-dandy for statement when you need to loop through an array or object. Be creative and find the quickest solution for the job at hand.

    var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

    I won’t bore you with benchmarks; you’ll just have to believe me (or test for yourself). This is by far the fastest method!

    Using native methods like join(), regardless of what’s going on behind the abstraction layer, is usually much faster than any non-native alternative. — James Padolsey, james.padolsey.com

    8. Use Template Literals

    Strings that we create with double or single quotes have a lot of limitations. You might want to replace some of your strings with template literals to make working with them a lot easier. Template literals are created using the backtick character (`), and they offer many advantages. You can put expressions inside them or create multi-line strings.

    let person = 'Monty';
let fruits = 'apples';
let activity = 'playing games';
let day = 'Monday';

var sentence = person + ' will be eating ' + fruits + ' and ' + activity + ' on ' + day + '.';
console.log(sentence);
// Output: Monty will be eating apples and playing games on Monday.

var sentence = `${person} will be eating ${fruits} and ${activity} on ${day}.`;
console.log(sentence);
// Output: Monty will be eating apples and playing games on Monday.

    As you can see, we did not have to constantly move in and out of our template literal, as we had to with a regular string literal created with single or double quotes. This reduces the chances of any typing-related errors and helps us write cleaner code.

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

    var name = 'Jeffrey';
var lastName = 'Way';

function doSomething() {...}

console.log(name); // Jeffrey -- or window.name

    Better

    var DudeNameSpace = {
   name : 'Jeffrey',
   lastName : 'Way',
   doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey

    Notice how we've "reduced our footprint" to just the ridiculously named DudeNameSpace object.

    10. Consider Using let and const 

    The let keyword allows us to create local variables that are scoped within their own block. The const keyword allows us to create local block-scoped variables whose value cannot be reassigned. You should consider using the keywords let and const in appropriate situations when declaring your variables. Keep in mind that the keyword const only prevents reassignment. It does not make the variable immutable.

    var person_name = "Adam";
let name_length = person_name.length;
const fav_website = "code.tutsplus.com";

if(person_name.length < 5) {
    var person_name = "Andrew";
    let name_length = person_name.length;

    // Throws an error if commented out!
    // fav_website = "webdesign.tutsplus.com";

    console.log(`${person_name} has ${name_length} characters.`);
    // Output: Andrew has 6 characters.
}

console.log(`${person_name} has ${name_length} characters.`);
// Output: Andrew has 4 characters.

    In the above example, the value of the person_name variable was updated outside the if block as well, after we modified it inside the block. On the other hand, name_length was block-scoped, so it retained its original value outside the block.

    11. Comment Your Code

    It might seem unnecessary at first, but trust me, you want to comment your code as well as possible. What happens when you return to the project months later, only to find that you can't easily remember what your line of thinking was? Or what if one of your colleagues needs to revise your code? Always, always comment important sections of your code.

    // Cycle through array and echo out each name.
for(var i = 0, len = array.length; i < len; i++) {
   console.log(array);
}

    12. Embrace Progressive Enhancement

    Always compensate for when JavaScript is disabled. It might be tempting to think, "The majority of my viewers have JavaScript enabled, so I won't worry about it." However, this would be a huge mistake.

    Have you taken a moment to view your beautiful slider with JavaScript turned off? (Download the Web Developer Toolbar for an easy way to do so.) It might break your site completely. As a rule of thumb, design your site assuming that JavaScript will be disabled. Then, once you've done so, begin to progressively enhance your layout!

    13. Don't Pass a String to setInterval or setTimeOut

    Consider the following code:

    setInterval(
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000
);

    Not only is this code inefficient, but it also functions in the same way as the "eval" function would. Never pass a string to setInterval and setTimeOut. Instead, pass a function name.

    setInterval(someFunction, 3000); 

    14. Use {} Instead of new Object()

    There are multiple ways to create objects in JavaScript. Perhaps the more traditional method is to use the new constructor, like so:

    var o = new Object();
o.name = 'Jeffrey';
o.lastName = 'Way';
o.someFunction = function() {
   console.log(this.name);
}

    However, this method receives the "bad practice" stamp. It's not actually harmful, but it is a bit verbose and unusual. Instead, I recommend that you use the object literal method.

    Better

    var o = {
   name: 'Jeffrey',
   lastName = 'Way',
   someFunction : function() {
      console.log(this.name);
   }
};

    Note that if you simply want to create an empty object, {} will do the trick.

    var o = {};

    "Object literals enable us to write code that supports lots of features yet still provide a relatively straightforward process for the implementers of our code. No need to invoke constructors directly or maintain the correct order of arguments passed to functions." — dyn-web.com

    15. Use [] Instead of new Array()

    The same applies for creating a new array.

    Okay

    var a = new Array();
a[0] = "Joe";
a[1] = 'Plumber';

    Better

    var a = ['Joe','Plumber'];

    "A common error in JavaScript programs is to use an object when an array is required or an array when an object is required. The rule is simple: when the property names are small sequential integers, you should use an array. Otherwise, use an object." — Douglas Crockford

    16. Use the Spread Operator

    Have you ever been in a situation where you wanted to pass all the items of an array as individual elements to some other function or you wanted to insert all the values from one array into another? The spread operator (...) allows us to do exactly that. Here is an example:

    let people = ["adam", "monty", "andrew"]
let more_people = ["james", "jack", ...people, "sajal"]

console.log(more_people)
// Output: Array(6) [ "james", "jack", "adam", "monty", "andrew", "sajal" ]

    17. Be Careful With for ... in Statements

    When looping through items in an object, you might find that you retrieve method functions or other inherited properties as well. In order to work around this, always wrap your code in an if statement which filters with hasOwnProperty.

    for(key in object) {
   if(object.hasOwnProperty(key) {
      ...then do something...
   }
}

    This tip is from JavaScript: The Good Parts, by Douglas Crockford.

    18. Read, Read, Read...

    While I'm a huge fan of web development blogs (like this one!), there really isn't a substitute for a book when grabbing some lunch, or just before you go to bed. Always keep a web development book on your bedside table. Here are some of my JavaScript favorites.

    Read them... multiple times. I still do!

    19. Self-Executing Functions

    Rather than calling a function, it's quite simple to make a function run automatically when a page loads or a parent function is called. Simply wrap your function in parentheses, and then append an additional set, which essentially calls the function.

    (function doSomething() {
   return {
      name: 'jeff',
      lastName: 'way'
   };
})();

    20. Raw JavaScript Is Always Quicker Than Using a Library

    JavaScript libraries, such as jQuery and lodash, can save you an enormous amount of time when coding—especially with AJAX operations. Having said that, always keep in mind that a library can never be as fast as raw JavaScript (assuming you code correctly).

    jQuery's each() method is great for looping, but using a native for statement will always be an ounce quicker.

    21. Quickly Assign Variable Values With Destructuring

    We've already learned about the spread operator in JavaScript earlier in the article. Destructuring is somewhat similar in the sense that it also unpacks values stored inside arrays. The difference is that we can assign these unpacked values to unique variables.

    The syntax is similar to creating an array using the [] shorthand. However, this time the brackets go on the left side of the assignment operator. Here is an example:

    let [person, fruit, , day] = ['Monty', 'apple', 'reading', 'tomorrow'];

var sentence = `${person} will eat an ${fruit} ${day}.`;

console.log(sentence);
// Output: Monty will eat an apple tomorrow.

    Did you notice how we just skipped the assignment of the third array element to any variable by not passing a variable name? This allows us to avoid variable assignments for values we don't need.

    22. Iterators and for ... of Loops

    Iterators in JavaScript are objects which implement the next() method to return an object that stores the next value in a sequence and true or false depending on whether or not there are any more values left. This means that you can create your own iterator objects if you implement the iterator protocol.

    JavaScript also has some built-in iterators like String, Array, Map, etc. You can iterate over them using for ... of loops. This is more concise and less error-prone compared to regular for loops.

    let people = ["Andrew", "Adam", "James", "Jack"];
let people_count = people.length;

for(let i = 0; i < people_count; i++) {
    console.log(people);
}
/*
Andrew
Adam
James
Jack
*/

for(person of people) {
    console.log(person);
}
/*
Andrew
Adam
James
Jack
*/

    With a for...of loop, we don't have to keep track of the total length of the array or the current index. This can reduce code complexity when creating nested loops.

    23. async and await

    You can use the async keyword to create asynchronous functions, which always return a promise either explicitly or implicitly. Asynchronous functions that you create can take advantage of the await keyword by stopping execution until the resolution of returned promises. The code outside your async function will keep executing normally.

    async function delayed_hello() {

    console.log("Hello Adam!");

    let promise = new Promise((resolve) => {
        setTimeout(() => resolve("Hello Andrew!"), 2000)
    });

    let result = await promise;

    console.log(result);
}

console.log("Hello Monty!");

delayed_hello();

console.log("Hello Sajal!");

/*
Hello Monty!
Hello Adam!
Hello Sajal!
Hello Andrew!
*/

    In the above example, "Hello Andrew" is logged after two seconds, while all other hellos are logged immediately. The call to the delayed_hello() function logs "Hello Adam" immediately but waits for the promise to resolve in order to log "Hello Andrew".

    That's All, Folks

    So there you have it: 23 essential tips for beginning JavaScripters. Thanks for reading. 

    And be sure to check out the thousands of JavaScript items available on Envato Market. There's sure to be something there to help you with your JavaScript development.

    This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials, and to learn about new JavaScript libraries.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    Add a comment...
    4elements
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News