17 Comments

JavaScript: Don’t Reassign Your Function Arguments

UPDATE: The point of this post is to raise awareness that reassigning the value of an argument variable mutates the arguments object. The code example is contrived and exists solely to help illustrate that behavior.

Did you know that a JavaScript function’s named parameter variables are synonyms for the corresponding elements in that function’s Arguments object?

I ran into this while experimenting with a function that was written to take either two or three arguments, providing a default for the first argument if only two are passed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var makePerson = function(favoriteColor, name, age) {
  if (arguments.length < 3) {
    favoriteColor = "green";
    name = arguments[0];
    age = arguments[1];
  }

  return {
    name: name,
    age: age,
    favoriteColor: favoriteColor
  };
};

var person = makePerson("Joe", 18);
console.log(JSON.stringify(person));
// => {"name":"green","age":"green","favoriteColor":"green"}

Strangely, all of the values in the result object are set to "green". I was expecting to see


  // => {"name":"Joe","age":18,"favoriteColor":"green"}

But when I set favoriteColor to "green" I was also changing arguments[0] to be "green". The situation only got worse when I set name = arguments[0] effectively changing arguments[1] to be "green" as well.

I had not realized that named arguments are synonyms for the elements of the Arguments object. I found a good explanation on Rx4AJAX:

The numbered properties of the Arguments Object are synonymous with the local variables that hold the named function parameters. They both reference the same address in the stack. If the function body has code that changes the value of a parameter either via a name reference or the arguments[] array reference, both referenced values will reflect the same value.

Regardless of the language, it is generally not a good idea to reassign the parameter variables inside a function. In JavaScript it turns out to be a really bad idea.

Additional information:

  • Check out this jsFiddle to experiment with the code snippet above.
  • A comment on this StackOverflow question describes this “magical behavior” of JavaScript.
  • JavaScript Garden describes this behavior in its section on the arguments object.