Javascript Function Parameters

• « Previous
• Next »

A Javascript function doesn't care the number and type of its arguments.

A function with two arguments defined can accept two, one, three or none arguments, since function arguments in Javascript are represented as an array internally.

The arguments object acts like an array. The first argument is arguments[0], the second is arguments[1], and so on.

function arguments Example

To determine how many arguments were passed in, use the length property.

function howManyArgs() {
    console.log("Hello " + arguments[0] + ", " + arguments[1]);
    console.log(arguments.length);    
}
howManyArgs("string", 45);    //2
howManyArgs();                //0
howManyArgs(12);              //1

The code above generates the following result.

Note for function arguments

Any named argument that is not passed into the function is assigned the value undefined.

All arguments in Javascript are passed by value. It is not possible to pass arguments by reference.

function signature

Arguments in Javascript function does not create a function signature.

It's possible to simulate overloading by checking the type and number of arguments.

function doAdd() {/* w w  w .j  ava 2 s  .c  om*/
    if(arguments.length == 1) {
        console.log(arguments[0] + 10);
    } else if (arguments.length == 2) {
        console.log(arguments[0] + arguments[1]);
    }
}

doAdd(10);        //20
doAdd(30, 20);    //50

You can define functions which can accept any number of arguments and behave appropriately.

The code above generates the following result.

No Overloading

It's not overloading, but we can use it as a way to do overloading in Javascript.

Javascript functions cannot be overloaded in the traditional way.

If two functions have the same name, the last function wins.

function addSomeNumber(num){/*from  w w  w.java 2  s.c o m*/
    return num + 1;
}

function addSomeNumber(num) {
    return num + 2;
}

var result = addSomeNumber(1);
console.log(result);

The code above generates the following result.

function named arguments

The function arguments object can work together with named arguments:

function doAdd(num1, num2) {
    if(arguments.length == 1) {
        console.log(num1 + 10);
    } else if (arguments.length == 2) {
        console.log(arguments[0] + num2);
    }
}
doAdd(1);
doAdd(1,2);

Example for function named arguments

arguments' values stay in sync with named parameters.

function doAdd(num1, num2) {
    arguments[1] = 10;
    console.log(arguments[0] + num2);
}
doAdd(1);
doAdd(1,2);

The code above generates the following result.

Note for function named arguments

This effect goes only one way. Changing the named argument does not change the corresponding value in arguments.

If only one argument is passed in, setting to arguments[1] will not be reflected by the named argument.

The length of the arguments object is based on the number of arguments passed in, not the number of named arguments in function declaration.

Javascript Function Argument Passing

All function arguments in Javascript are passed by value.

The value from outside is copied into an argument.

Pass primitive value

If the value is primitive, then it acts just like a primitive variable copy. Changes to the local variable are not reflected outside of the function.

function addTen(num) {/*  w w w.  ja  v  a 2  s . c o m*/
    num += 10;
    return num;
}

var count = 20;
var result = addTen(count);
console.log(count);    //20 - no change
console.log(result);   //30

The code above generates the following result.

Pass reference value

If the value is a reference to an object, it acts like a reference variable copy. Changes to the local variable are reflected outside of the function.

function setName(obj) {//from w w  w.ja  v a2  s  .  c  om
   obj.name = "XML";
}

var person = new Object();
person.name = "CSS";
console.log(person.name);
setName(person);
console.log(person.name);    //"XML"

Inside the function, obj and person point to the same object. obj is accessing the object by reference. When the name property is changed inside the function, this change is reflected outside the function.

The code above generates the following result.

Note

The reference variable inside function can be reassigned to a new value, as a result it no longer points the same object as the variable outside.

function setName(obj) {/*ww  w . ja va2 s  . c o  m*/
   obj.name = "XML";
   obj = new Object();
   obj.name = "CSS";
}

var person = new Object();
person.name = "CSS";
console.log(person.name);
setName(person);
console.log(person.name);    //"XML"

We can think of function arguments in Javascript as local variables.

The code above generates the following result.

Execution Context

The execution context of a variable or function defines the scope of the function and variables.

The global execution context is the outermost one.

In web browsers, the global context is the window object, all global variables and functions are created as properties and methods on the window object.

Each function has its own execution context.

Example

The following code defines a variable name outside the function. We can change its value in a function and the value persist out of the function scope.

var name = "blue"; 
function changeName(){ /*from w ww.j  a va2s .  c  o m*/
    if (name === "blue"){ 
        name = "red"; 
    } else { 
        name = "blue"; 
    } 
} 
changeName(); 
console.log(name);//red

The code above generates the following result.

Example 2

The following code has three level of execution context:

var name = "JavaScript"; 
function changeName(){ /* ww  w .j  av a 2 s. c  o m*/
   var anotherName = "HTML";
   function swapNames(){ 
      var tempName = anotherName; 
      console.log("tempName:"+tempName);
      anotherName = name; 
      name = tempName;
      //name, anotherName, and tempName 
      //are all accessible here 
   }
   //name and anotherName are accessible here, 
   //but not tempName 
   swapNames(); 
} 
//only name is accessible here 
changeName(); 
console.log(name);//HTML        

The code above generates the following result.

Example 3

JavaScript has no block-level scopes.

if (true) { //from  w w w .j  av  a2 s .  c om
   var color = "blue"; 
} 
console.log(color); //"blue" 

for (var i = 0; i < 10; i++){ 
   console.log(i); 
} 
console.log(i); //10 

The code above generates the following result.

var

When a variable is declared using var, it is added to the current context.

function add() { 
  var color = 'blue'; 
} 
console.log(color);//error

Without var keyword variable is globe scoped.

function add() { 
  color = 'blue'; 
} 
console.log(color);//blue

• Next »
• « Previous