Passing arguments from method to method in JavaScript

For example, you have one function greeting() that accepts two string arguments only. And you have another function callAnotherFunction() that accepts only one argument which is a function. In order to pass arguments from method to method, JavaScript provide ideal apply() and call() to deal with this scenario.



function greeting(name, str) {
alert(str + ", " + name);
}

function callAnotherFunction(method) {
method.apply(null, arguments); // arguments refer to ["John", "Good morning"]
alert(arguments.length); // arguments refer to method
}

callAnotherFunction(function() {greeting("John", "Good morning")});

The significant point in this example is arguments in callAnotherFunction(method). It means differently in the same function. In method.apply(null, arguments), it refers to the arguments that passed from method. And in alert(arguments.length), it refers to method itself, not its arguments.

These example might not make sense to some people but it very useful when you want to pass arguments from method to method.

Hope this help.





Good practice in array deletion in JavaScript

It is really piss me off when I spent a few hours trying to find the failure in my JavaScript code.

Eventually, I found out what the problem was. I did not delete my array correctly.


var arr = [1, 2, 3, 4];
for (var i=0; i<arr.length; i++)
arr.splice(i, 1);


This for loop never delete all the elements in your array. When i = 0, arr[0] (a) is deleted and when i = 1, arr[1] (c) is deleted and then exit the loop cause i eqauls arr.length equals 2.

To deal with this problem, you should assing arr.length to one variable so when you delete the array it does not effect you loop.


var arr = [1, 2, 3, 4];
for (i=0, len=arr.length; i<len; i++)
arr.splice(0,1);


Hope this help.

What happen in DOM?

I have discovered the unexpected behavior of DOM when I was writing some JavaScript code. The example will illustrate the problem

// Create one container and add to two children to it
var container1 = document.createElement("DIV"); container1.appendChild(document.createElement("DIV"));
container1.appendChild(document.createElement("DIV"));

//Now I want to the two children in container to document.body
//Apparently, the code in the comment below should work
//document.body.appendChild(container1.childNodes[0]);
//document.body.appendChild(container1.childNodes[1]);

//Unfortunately, it does not work. When we appended the first child in container1 to
//document.body the browser automatically deleted that child from container. So,
//after the insertion container1 has only one child not two. The code should be like
//the below code:

document.body.appendChild(container1.childNodes[0]);
document.body.appendChild(container1.childNodes[0]);


Hope this help.