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 them values and you may get results that you didn't expect.
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 Short-Hand
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();
One might think that the code above would be equivalent to:
if(someVariableExists) {
x = false;
anotherFunctionCall();
}
Unfortunately, he'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 JS Lint
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.
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 on 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 like we had to with regular string literal created with single or double quotes. This reduces 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 variable person_name 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[i]);
}
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 without actually being harmful. It is a bit verbose and unusual though. 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 = {};
"Objects literals enable us to write code that supports lots of features yet still make it a relatively straightforward for the implementers of our code. No need to invoke constructors directly or maintain the correct order of arguments passed to functions, etc." — 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'll also 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 parenthesis, and then append an additional set, which essentially calls the function.
(function doSomething() {
return {
name: 'jeff',
lastName: 'way'
};
})();
20. Raw JavaScript Can Always Be 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 have already learned about the spread operator in JavaScript early 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 sequence and true or false depending on whether there are any more values left or not. 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 and 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[i]);
}
/*
Andrew
Adam
James
Jack
*/
for(person of people) {
console.log(person);
}
/*
Andrew
Adam
James
Jack
*/
With a for...of loop, we did not 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 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; twenty-five 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.
HTML519 Best HTML5 Audio Players
HTML519 Best HTML5 Game Templates of 2021 With Source Code
HTML519 Best HTML5 and JavaScript Game Engines and Templates
jQuery24 Best jQuery Image Sliders
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.
No comments:
Post a Comment