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>

type is not "u", "One", "Two", "Three" - it's only "u". if you have function fn(arg1, arg2) { // body } and you call it as fn("foo", "bar", "baz"), arg1 will be "foo", arg2 will be "baz", and the third parameter will not have a variable created for it, but will feature in arguments — Sacho
– Sacho, Commented Apr 23, 2015 at 10:32

6502 · Accepted Answer · 2015-04-23 10:33:36Z

5

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.

answered Apr 23, 2015 at 10:33

6502

115k17 gold badges177 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2015-04-23 10:44:04Z

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

Collectives™ on Stack Overflow

understanding basics of arguments in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related