Some basic tips for JavaScript Beginners | Tips and Tricks
There are some basic tips that are used in JavaScript. They will surely help you in your daily JavaScript practices.
#1 Place Scripts at the Bottom of Your Page
For a better page loading as quickly as possible. It is good to place the
script files at the bottom of your page before closing the body tag.
Like
@copyright
<script type="text/javascript" src="example_file1.js"></script>
<script type="text/javascript" src="example_file1.js"></script>
It’s also good if you create a separate file for your custom JavaScript code instead putting that code in header or in the bottom section of the page.
Like
<script>
function abc()
{
// your code
}
function anotherfunction()
{
// your code
}
</script>
Better:
Create a separate file for this code such as “custom.js” and include it in the page.
#2 Use === Instead of ==
JavaScript utilizes two different types of equality operators: === | !== and == | != . For best practice it is always good to use the former set when comparing.
If you compare two operands of the same type and value, then “===” produces true and “!==” produces false.
However, when working with “==” and “!=” it will just compare the values only and not the type and will run you into issues when working with different types.
#3 Comment Your Code
It might seem unnecessary and waste of time at first, but, It’s good to comment your code- as best as possible. Sometimes, you have to
make a few changes in your code and it could be after a month or later, then there is only one way to remember what your line of code was a month before and that’s with the help of comments. And, It not only helps you in remembering the code but also your colleagues who need to revise your code. So, it is suggested to comment the important part of your code regularly.
For Example:
// Script for DatePicker
jQuery('#datePicker')
.datepicker({
format: 'mm/dd/yyyy'
})
#4 Use [] Instead of New Array()
The same principle is applicable for creating a new array.
The code below is Okay
var a = new Array();
a[0] = “Red”;
b[1] = “Blue”;
But the Better Way is
var a = [‘Red’,”Blue”];
"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
#5 Long List of Variables? Omit the "Var" Keyword and Use Commas Instead
If you have a long list of variables
Like
var variable1 = “some string”;
var variable2 = “another string”;
var variable3 = “one more string”;
then use the comma after every new variable instead defining it again like:
var variable1 = “some string”,
variable2 = “another string”,
variable3 = “one more string”;
It will cleanup your code.
#6 Always, Always Use Semicolons
Technically, most browsers will allow you to get away with omitting semicolons.
Like:
var newvariable = “some string”
function anyfunction()
{
return “something”
}
this is a very bad practice that can potentially drag you to a much bigger, and harder effort for finding issues.
So, the Better Way is
var newvariable = “some string”;
function anyfunction()
{
return “something”;
}
#7 Declare Variables Outside of the For Statement
When executing lengthy "for" statements, don't make the engine work any harder than it should. For example:
Bad Way
for(var i = 0; i < someArray.length; i++)
{
var container = document.getElementById('container');
container.innerHtml += '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 Way is to use
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++)
{
container.innerHtml += 'Number: ' + i;
console.log(i);
}
#8 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 this code inefficient, but it also function in the same way as the "eval" functions.
Never pass a string to SetInterval and SetTimeOut. Instead, pass a function name.
Best Way is
setInterval(somefunction, 3000);
#9 "For in" Statements
When looping through items in an object, you might find that you'll also retrieve method functions as well. In order to work around this, always wrap your code in an if statement which filters the information.
for(key in object)
{
if(object.hasOwnProperty(key)
{
...then do something...
}
}
#10 Remove "Language"
Years ago, it was not uncommon to find the "language" attribute within script tags.
<script type="text/javascript" language="javascript">
...
</script>
However, this attribute has long since deprecated; so it is better to leave it.
There are the some common basic tips used in JavaScript. There are a lot more things to learn so far. I will be sharing them with you very soon and it help you in your daily practices as well.
So,
keep reading the tips and tricks for creating a good code.
