|
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; //Delete 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 Variables 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 exactly the same. The only 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
|