Javascript Function Parameter argument or global variable

Question

var x=10;
function foo(){
    x=120;
    alert(arguments[0]); //outputs 10
}
foo(x);

How can I know whether the x I'm using within function is an argument or global variable?In the code

If I had supplied this instead

function foo(x){
    x=120;
    console.log(arguments[0]);//logs 120
}
foo(x);

What is the difference between these two code, what is happening behind the scene and how come arguments array changed?

Answer 1

var x=10; // this is variable of window namespace
  function foo(x){ 
// It will make variable of this functions. Every function make its own namespace. 
// So now you have x in local namespace, so you can't touch x from global 
// namespace, becouse you gave them same names. With for example function foo(a), 
// global x would be still accessible. 

          x=120; 
// Here, you change value of x. Program will ask the deepest namespace if there
// is any x variable. If not, it will continue upper and upper. Right now,
// we have local x variable, so it will change value of local variable, which
// will extinct at the end of our function. The most upper namespace is global
// namespace. One more deeper is window namespace. 

          alert(arguments[0]);
// arguments is Array, which every function has as its property. Via arguments,
// you can touch every argument, that is passed to function. Later, I will
// show you an example
        }
  foo(12);
// finaly here, you call function foo and you set local x = 12. But then,
// you rewrite local x, so it is 120. After all, you alert first argument,
// which is local x, which is 120. 

Now with modifications:

var x=10;
    function foo(a){ // now we have different name for local variable
        x=120; // so our x is x from window namespace
        alert(arguments[0]); // now output is a, which will be 12
        alert(x); // and x is 120
    }
foo(12);
alert(x); // x will be still 120... 

Different story with arguments

var x=10;
    function foo(){ // we didnt declare any local variable
        x=120; // so our x is x from window namespace again
        alert(arguments[0]); 
        // output is 12, becouse we can touch arguments via 
        // arguments array, even if we didnt declare any local variables
    }
foo(12);

Basicly arguments functions property allows us to do black magic. It makes code less understandable, but it is very powerful. Rarely, it is good idea to use them. Use them wisely...

Arguments and local variables points at the same place in memory. So change one will instantly change the other one.

Answer 2

How can i know whether the xim using within function is an argument or global variable?

By inspecting the parameter list of your function. If it mentions a parameter x like this:

function foo(x) {

then you know that x is a parameter. It is an alias (another name) for arguments[0] , because it is the first argument. The arguments object is not a real array. It has properties whose names are numbers, and it has a length property, so it seems to resemble an array, but it lacks the other features of an array.

You can think of arguments as the definitive storage for the values passed in the function call. The parameter names are a convenient way to get at the values stored in arguments .

If your function begins:

function foo() {

then it has no parameters. Anything you refer to inside the function must be a value defined another way. It could be a local variable declared inside the function:

function foo() {
    var x = 10;

Or it could refer to a name declared outside your function:

var x;

function foo() {
    x = 10;

In JavaScript without "strict mode", it was possible to say:

function foo() {
    x = 10;

without ever declaring var x anywhere. The result would be that x would be created as a global variable (or property of the global object, eg in the browser it would create window.x ) This was a big source of bugs because you could misspell a variable name and not notice you were assigning a value to a non-existent variable.