Welcome to my blog post, yet again...🥲
You're probably here because you're confused about this arguments object shit.
I don't blame you, this shit was confusing for me too😅 I spent like days trying to understand it.
BUT don't freak out!! My confusion is exactly why I'm writing a blog post. Easy version. For dummies like me to understand.
So don't worry, I got you 😆
🔠 Vocabulary
🚨 If you're familiar with function terms, you don't need to read this 🚨
Terms you should know:
- arguments (not the object) are values that are passed when you call your function.
For example, look at the code below:
function example(a, b) {
console.log(a);
console.log(b);
}
example(2, 3) //the numbers 2 and 3 are (values) arguments
- parameters is sometimes confused with arguments, but they're slightly different. While arguments are the values you pass when you call your function, parameters are variables you declare with the function.
Take a look at the code below:
function func(a, b, c, d) { //parameters are a, b, c, d
return a + b + c + d;
}
As you see above, the parameters of the function func are a, b, c, d. Parameters can be anything, they're just variables within the scope of that function. This means that they're only seen within that function, so if you try to use that parameter outside of that function, it won't work.
strict mode in JavaScript is, you guessed it, strict. It doesn't have as much freedom, as it prevents you from doing certain things. Strict mode behaves differently from normal code, so browsers that don't support strict-code will behave differently from browsers that do support it.
non-strict mode in JavaScript allows us to be a little sloppy.
🤔 Wtf is arguments object?
The arguments object is an array-like object that is used inside of functions. Array-like basically means that it's similar to arrays. For example, arguments has the .length property, but you can't use other built-in methods that you would use in an array, for example, .pop().
With the arguments object, you can access the values of the arguments you passed when you called the function, from inside the function. You do this by using arguments and the index number of the values passed.
WTF ???? 😰
Okay, I know it sounds very confusing, especially because of the similar names, but take a look at the code below:
arguments[0] //returns first argument
arguments[1] //returns second argument
arguments[2]//returns third argument
The code above is basically showing how you can access each argument passed in the function with its index number. This code was just an easy example, but in real life you'd use arguments inside a function, like this:
function thisSucks(a, b, c) {
console.log(arguments[0]); //console prints 6
console.log(arguments[1]); //console prints 9
console.log(arguments[2]); //console prints 69
}
thisSucks(6, 9, 69);
On the code above, we're using the arguments object to access the values we passed while calling thisSucks function. We accessed those values 6, 9, and 69 with their indexes.
👀 When to use?
Usually, I use the arguments object with functions that pass more arguments than they declared at function declaration. In other words, I use arguments with rest parameters or default parameters.
This is out of the scope of this blog post, but here's an example:
function manyParameters(...par) {
console.log(arguments[0]); //prints 7
console.log(arguments[1]); //prints 8
console.log(arguments[2]); //prints 9
}
manyParameters(7, 8, 9, 10);
Ok, first of all, if ...par seems a little weird, don't be scared. That's just a rest parameter. It allows us to pass an indefinite number of arguments. I may do a blog post on this soon...🤔
Now that that's out of the way...let's move on 😁
The code block above is accessing the values passed to the function call with just their index number.
So, in my experience, the arguments object is useful when you don't precisely know how many arguments you'll be passing. It'll be easier to access the values, change them, reassign them, etc.
📏 arguments and length property
As we previously mentioned, the arguments object is not an array, but it's an array-like object. As a result, it has the length property, which contains the number of arguments passed to that function.
For example, that a look at the code below:
function fruits(...par) {
console.log(arguments.length);
}
fruits('🍈', '🍎', '🥭'); //prints 3
fruits('🍓', '🫐, '🍌', '🍒', '🍑'); //prints 5
The code above shows how to use the arguments object with the length property. The length property is used to count how many arguments the function was called with. arguments.length returns the number of arguments.
Assigning values with arguments
arguments is a local variable inside functions, so you can reassign it or set it to new values just like any other variable.
Below is an example of assigning new values to arguments:
function numbers(a, b, c) {
arguments[0] = 50; //assign to 50
arguments[1] = 100; //assign to 100
arguments[2] = 150; //assign to 150
console.log(arguments[0]); //prints 50
console.log(arguments[1]); //prints 100
console.log(arguments[2]); //prints 150
}
numbers(2, 4, 6);
OK, that's enough 😩
Unfortunately, there's a tiny little detail that you should know about this, though. I know you probably feel like your mind's exploding, but bear with me 😅
When assigning or reassigning new values with arguments, there are a couple differences depending on the code mode, and whether or not you used simple parameters or more complex ones, such as rest or default parameters.
So, let's see how these modes can change how the arguments object works.
🤓 Strict mode
Strict mode is simple; it doesn't change the arguments object behavior at all, regardless of using simple parameters or complex parameters. In other words, assigning new values to the arguments object won't affect the variable, and assigning new values to the variable won't change the arguments value no matter what.
For example, take a look at the code below:
function num(a = 2) {
arguments[0] = 1; //won't update variable 'a'
console.log(a);
}
num(69); //prints 69, not 1
As you see on the code above, we changed the value of arguments inside the function, but it didn't update the value of a. a prints whatever value we passed when we called the function, in this case, 69.
😎 Non-strict mode
On the other hand, non-strict mode is a little bit more complicated. When using simple parameters, non-strict mode updates the values. This means that assigning a new value with the arguments object will update the current value of the variable. And, updating the variable itself will change the arguments object as well.
For example take a look at the code below:
function num(a) {
arguments[0] = 1; //will also update 'a'
console.log(a);
}
num(2); //returns 1
In this block of code, assigning arguments with a new value 1 also updated the variable a. As a result, it'll be printing 1 not 2.
Now, take a look at this other block of code below:
function num2(a) {
a = 3; //will also update arguments[0]
console.log(arguments[0]);
}
num2(5);
In here, essentially the same thing is happening. We assigned the variable a a value of 3, which will update arguments[0].
However, when using complex parameters, such as rest and default parameters, non-strict functions will behave exactly like strict mode functions. New values that are assigned to arguments won't update the variables, and new values that are assigned to variables won't update arguments.
The arguments object in non-strict mode functions with complex parameters will always return the values passed to the function when the function is called.
We reviewed this on the strict mode section, but take a look at the code below:
function num(a = 7) {
arguments[0] = 8; //won't update variable 'a'
console.log(a);
}
num(3); //prints 3, not 8
That's it!
YAY!! You made it through this long ass blog post.
Thank you making it this far, and I hope you learned a lot from it!
arguments is definitely a tough one to understand, since there's so many similar words. So, if you need clarification, feel free to DM me!!