understanding basics of arguments in javascript

Question

hey guys i am very new to java scripts but have read a few beginner books on js and i was going through the MDN doc's to understand how arguments works in js and came across the following script :

    function list(type) {
      var result = "<" + type + "l><li>";
      var args = Array.prototype.slice.call(arguments, 1);
      result += args.join("</li><li>");
      result += "</li></" + type + "l>"; // end list

      return result;
    }

    var listHTML = list("u", "One", "Two", "Three");

console.log(listHTML);  // "<ul><li>One</li><li>Two</li><li>Three</li></ul>"

have a close look at what gets printed out .

now this works quite counter intuitive to how i expected it to work .

so lets break it down , suppose i call the function list like below :

list("u", "One", "Two", "Three");

now what happens in the list function is

  var result = "<" + type + "l><li>"; // here type is still --  "u", "One", "Two", "Three" , than why does only u get inserted ?? 
  var args = Array.prototype.slice.call(arguments, 1); // in understand this line 
  result += args.join("</li><li>");
  result += "</li></" + type + "l>"; // end list

  return result;

for this programme to work as i figured out , it is critical that on the 1st line only "u" get inserted and not all the arguments (see my comment) , but how is this being done in this snippet , i know it a simple snippet of code , but i am really sitting here , scratching my head looking at this code.

can somebody explain ?

EDIT my expected output is :

<uOneTwoThreel><li>One</li><li>Two</li><li>Three</li></uOneTwoThreel>

Thanks .

Alex-z

Answer 1

In Javascript the pseudo-array arguments contains everything that has been passed to the function, while the named arguments listed in the function argument list get filled with the passed value ignoring extra arguments and setting undefined if not enough argument have been passed.

For example calling function f(x, y){...} with f(1,2,3,4) will have

• x = 1
• y = 2
• arguments = [1, 2, 3, 4]

and instead calling function g(x, y){...} with g(1) will have

• x = 1
• y = undefined
• arguments = [1]

Note that arguments is not an array, and therefore you cannot use all array methods (like join ). This is the reason for which the slice trick is used to convert all arguments skipping the first one in an array.

Answer 2

the problem here is type is a argument which will hold the value of 1 first parameter to the method call, in your case u . Since you don't have as many arguments as the passed parameters rest of the params will not have a formal reference.

function list() {
    //this will create an array params which will have all the values of the arguments object
    var params = Array.prototype.slice.call(arguments, 0);

    //we joins all the passes params to create the type
    var type = params.join('');
    var result = "<" + type + "l><li>";

    //we ignores the first parameter here
    var args = params.slice(1);
    result += args.join("</li><li>");
    result += "</li></" + type + "l>";

    return result;
}

var listHTML = list("u", "One", "Two", "Three");

console.log(listHTML);

Demo: Fiddle