10 Mini-Tips and Tricks in JavaScript for Beginners

As I have previously stated in prior posts, JavaScript is the one of the most utilized programming languages, because a large majority of the browsers are compatible with it and make use of it. JavaScript has become very accepted, very quickly, because it is so straightforward and has a wide-range of capabilities. Many programmers used to think that JavaScript was a toy language, but the emergence of AJAX into the market manifested something completely to the contrary, because it showed JavaScript diverse capabilities and functions. Since this discovery, programmers can create web applications that give the impression of a desk top application, which is helpful because data can be changed more quickly. Here are some mini-tips and tricks to help beginners better use JavaScript.

JavaScript is very wide and has so many styles, so it can get very tricky. Moreover, it has so many ways of programming, but I picked 10 tips that I think are a good starting place for beginners to understand JavaScript. If you see these scripts somewhere, here are some tips to help you through them. This is not even the tip of the iceberg with JavaScript capabilities, but it is a start! Please feel free to leave your comments, questions, extra tips, or concerns, but remember this is a post for beginners!! I love to hear from fellow developers! Enjoy!

Add an Element at the End of an Array

This tip allows you to add an element at the end of an array using the length property, because the length property is going to be one number higher than the position of the last element in the array. This way acts the same as “push” method. For example:

var myArray = [];
myArray[myArray.length] = 'New Element';

Resize the Length of an Array

The length property is a not read only, because you can set values to it. Moreover, you can use it to increase or decrease the size of the array. For example:

var myArray = [1,2,3];
myArray.length // 3
myArray.length = 2; //Deletes the last element
myArray.length = 20 // add 18 elements to the array; the elements have the undefined value.

Convert any Data Type to Boolean Using “!!”

This technique allows you to convert any data type, like string, number, or integer, to a Boolean using the “!!”. For example:

var myString = '23255';
typeof myString; //String
 
myString = !!myString;
typeof myString  //Boolean

Convert from Number to String

This tip permits you to convert from number to string by adding an empty string at the end of the number. Example:

var mynumber = 234;
typeof mynumber; //Number
 
mynumber += '';
typeof mynumber; //String

Know How Many Parameters are Expected by a Function

This is a great tip that allows you to know exactly how many variables are expected by a function. For example:

function add_nums(num1, num2){
    return num1 + num2;
}
add_nums.length // 2 is the amount of parameters expected by the function add_nums

Know How Many Parameters are Received by the Function Using “arguments” Object

This technique lets you know how many parameters are received by the function using “arguments” object. For example:

function add_nums(){
    return arguments.length;
}
 
add_nums(23,11,32,56,89,89,89,44,6); //this return the number 9

This is very useful at the time you need to check the number of parameter in validations or even to create a function with undetermined parameters.

function sum_three_nums( ){
 if(arguments.length!=3) throw new Error('received ' + arguments.length + ' parameters and should work with 3');
 
}
 
sum_three_nums(23,43); //Return the error message
 
function sum_num(){
	var total = 0;
	for(var i=0;i<arguments .length;i++){
		total+=arguments[i];
	}
	return total;
}
 
sum_num(2,34,45,56,56);

Organize and Improve Functions with Objects as Parameters

A very common use of objects in modern web development is to use them as parameters of a function. It is always difficult to remember the order of the parameters of a function; however, using an object is very useful because then we do not have to be concerned about the order of the parameters. Moreover, it is more organized in order to understand what we are doing. This method allows for you to organize and improve the functions with objects as parameters. For example:

function insertData(name,lastName,phone,address){
	code here;
}

Could be remade like this:

function insertData(parameters){
	var name = parameters.name;
	var lastName = parameters.lastName;
	var phone = parameters.phone;
	var address = parameters.address;
}

It also is very useful at the time to have defaults values. Example:

function insertData(parameters){
	var name = parameters.name;
	var lastName = parameters.lastName;
	var phone = parameters.phone;
	var address = parameters.address;
	var status = parameters.status || 'single' //If status is not defined as a property in the object the variable status take single as value
}

To use the function now is pretty simple; we could send the data in two ways:

//Example 1
insertData({name:’Mike’, lastName:’Rogers’, phone:’555-555-5555’,address:’the address’, status:’married’});
 
 
//Example 2
var myData = {       name:’Mike’, 
                         lastName:’Rogers’, 
                               phone:’555-555-5555’,
                             address:’the address’, 
                                status:’married’
                       };
 
insertData(myData);

Functions are Data

Functions are data just like strings or numbers and we can pass them as functions parameters to create very amazing and commanding web applications. This method is very useful and is utilized by most all major frameworks. For example:

function byId(element, event, f){
	Document.getElementById(element).['on'+event] = f; //f is the function that we pass as parameter
}
 
byId('myBtn','click',function(){alert('Hello World')});
 
Another example of functions as data:
 
//Example 1
function msg(m){
	Alert(m);
}
 
//Example 2
var msg = function(m){ alert(m);}

Those functions are very similar. The big difference is how to use them for example: the first function you can use before it is declared; however, the second one should be declared in order to work:

//Example 1
msg('Hello world'); //This will work
 
function msg(m){
	alert(m);
}
 
//Example 2
msg('Hello world'); //Does not work because JavaScript cannot find the function msg because is used before is been declared.
 
var msg = function(m){ alert(m)}

Extend Native Objects

Even though some JavaScript gurus do not recommend this technique, it has been used by some frameworks. It allows you to create some helper methods, to the JavaScript API.

//We create the method prototype for our arrays
//It only sums numeric elements
 
Array.prototype.sum = function(){
    var len = this.length;
    total = 0;
    for(var i=0;i<len ;i++){
        if(typeof this[i]!= 'number') continue;
         total += this[i];
    }
    return total;
}
 
var myArray = [1,2,3,'hola'];
myArray.sum();
 
 
 
 
Array.prototype.max = function(){
    return Math.max.apply('',this);
}

Boolean

Be aware of checking these comparisons, because it will save you time from debugging the script.

'' == '0'          // false
0 == ''            // true
0 == '0'           // true
false == 'false'   // false
false == '0'       // true
false == undefined // false
false == null      // false
null == undefined  // true
true == 1          // true
'' == null         // false
false == ''        // true