Yesterday I was playing around with javascript trtying to find the cleanest way to implement callbacks in functions. Primarily I wanted a readable way to make certain the last argument passed is a callback, withut having to rely on knowing how many arguments there are and so on.

Instead I stumbled upon a pretty cool feature of how javascript handles function arguments. But let’s look at some code.

This is the usual way people use functions, it’s nicely standard and works pretty much the same way in most languages

1
2
3
4
5
function example(arg1, arg2, arg3) {
    return arg1+arg2 == arg3;
}
 
example(1, 2, 3);

Nothing too spectacular here, but javascript has another way to access function arguments – the magical arguments object; granted, a lot of languages have something like this, but it’s always a less than obvious feature people often forget about:

1
2
3
4
5
6
function example() {
    console.log(arguments);
    // prints { '0': 1, '1': 2, '2': 3 }
}
 
example(1, 2, 3);

Ok, nothing too major, perhaps the biggest surprise is that arguments is an object, not a list or an array and strangely enough that the keys are strings despite being just numbers. Also pretty cool is that you don’t have to specify any arguments at all, it just magically works. In python for example you at least have to say *args or something like that.

But things really start to heat up when we mix both ways of using function arguments in javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function example(arg) {
    console.log(arguments);
    // prints { '0': 1, '1': 2, '2': 3 }
 
    arg = 5;
    console.log(arguments);
    // prints { '0': 5, '1': 2, '2': 3 }
 
    var arg = 'new';
    console.log(arguments);
    // prints { '0': 'new', '1': 2, '2': 3 }
 
    var notArg = arg;
    notArg = 'old';
    console.log(arguments);
    // prints { '0': 'new', '1': 2, '2': 3 }
 
    arguments[1] = arg;
    console.log(arguments);
    // prints { '0': 'new', '1': 'new', '2': 3 }
 
    arg = 5;
    console.log(arguments);
    // prints { '0': 5, '1': 'new', '2': 3 }
}
 
example(1, 2, 3);

The slightly strange thing here is that arguments the function takes explicitly are only references to the positions in the arguments object rather than variables of their own. Trying to make them a new variable doesn’t work unless you give them a different name.

However despite these being just pointers, you can’t make them cross-reference each other because when you assign them to the arguments object a copy is performed and further changes are not reflected in both arguments properties.

But is it a deep or a shallow copy? Let’s try:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function isitdeep(arg1, arg2) {
    console.log(arguments);
    // prints { '0': { a: { b: 'c' }, d: { e: 'f' } },
    //          '1': { g: 'h' } }
 
    arg1.a.b = 'f';
    console.log(arguments);
    // prints { '0': { a: { b: 'f' }, d: { e: 'f' } },
    //          '1': { g: 'h' } }
 
    arg2 = arg1;
    console.log(arguments);
    // prints { '0': { a: { b: 'f' }, d: { e: 'f' } },
    //          '1': { a: { b: 'f' }, d: { e: 'f' } } }
 
    arg1.a.b = 'c';
    console.log(arguments);
    // prints { '0': { a: { b: 'c' }, d: { e: 'f' } },
    //          '1': { a: { b: 'c' }, d: { e: 'f' } } }
 
    arg1 = 'hello world';
    console.log(arguments);
    // prints { '0': 'hello world',
    //          '1': { a: { b: 'c' }, d: { e: 'f' } } }
}
 
isitdeep({a: {b: 'c'}, d: {e: 'f'}},
	 {g: 'h'});

Interesting, turns out it’s a shallow copy and you can still poke arguments in strange ways … but maybe/probably that’s just how javascript performs in general, the = operator being a shallow copy mechanism.

Anyhow, I’m sure this knowledge will come in handy some day, I’m just nicely tickled by having found it. Actually … it’s kind of horrible, this sort of obscure language features should never be used in production code 🙂

Enhanced by Zemanta

Learned something new? Want to improve your skills?

Join over 10,000 engineers just like you already improving their skills!

Here's how it works 👇

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet 📖right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

PS: You should also follow me on twitter 👉 here.
It's where I go to shoot the shit about programming.