A few years ago I was playing around with JavaScript trying 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
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:
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.
Curated JavaScript Essays
Get a series of curated essays on JavaScript. Lessons and insights from building software for production. No bullshit.
But things really start to heat up when we mix both ways of using function arguments in javascript:
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:
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 :)
Continue reading about A cool JavaScript property you never noticed
Semantically similar articles hand-picked by GPT-4
- A puzzle in JavaScript objects
- A surprising feature of JavaScript optional chaining
- Javascript debugging [slightly] beyond console.log
- How JavaScript linters cause bugs
- JavaScript's native map reduce and filter are wrong
Want to become a JavaScript expert?
Learning from tutorials is great! You follow some steps, learn a smol lesson, and feel like you got this. Then you go into an interview, get a question from the boss, or encounter a new situation and o-oh.
Shit, how does this work again? 😅
That's the problem with tutorials. They're not how the world works. Real software is a mess. A best-effort pile of duct tape and chewing gum. You need deep understanding, not recipes.
Leave your email and get the JavaScript Essays series - a series of curated essays and experiments on modern JavaScript. Lessons learned from practice building production software.
Curated JavaScript Essays
Get a series of curated essays on JavaScript. Lessons and insights from building software for production. No bullshit.
Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.
Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.
Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.
Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev
Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization
Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections
Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog
Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com
By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️