9.14: Arguments Array in JavaScript - p5.js Tutorial

Hello and welcome to another p5.js
javascript video tutorial thingy mabob

thing that I'm making. In this tutorial I'm
going to cover something called the

arguments array which exists
mysteriously in JavaScript perhaps

without you even knowing that it is there

what you can use it for and this idea of
overloading a function or overloading a

constructor and how do you have optional
arguments to a function all this stuff.

Okay what am I talking about first of all,
so let's just say today is a nice sunny

warm beautiful day it rained last night a
rainbow came out and you just sat at

your computer and decided I want to
program my own function called sum, and

what sum is going to do is it's going
to take two arguments a and b; and

it's going to say return (a+b). So
it's just going to make a sum of

whatever things I pass to it, so I
could then say, here in setup

I could say, var c equals.. aah you know c
equal or whatever.. value equals the sum

of 5 and 15 and if I say console.log(val);

we should see then if I go here, I should
see 20 and I could say something like

sum(2, 7) and I'm going to get 9
or sum(-3, 7) and I'm

going to get 4. So this function works;
but what if I were to say this: sum(4)

Not a Number (NaN)

Well let's say I wanted to be able to
actually have it return just the

number four.

How could I have it do that? It's getting
not a number because what is the value

of the b in this case? If I were to say
console.log(b) and run this again

you're going to see the value of b is
undefined

another.. another way that I can
consider undefined, undefined if I were

to ask is undefined true or false,

undefined is actually false so something
that I could do for example is just say

something like if b

return a + b, otherwise return a. So in
this case I now have a function that can

perform differently based on the number
of arguments it gets, right? As long as it

gets a second argument return two of
those two numbers together if it doesn't

get the second argument right?

if b is false simply return a so in
this case now if I go back to the

browser and I say sum(4, 5)

I should get nine but if I say sum(4)
I'll just get four so we have now

written a function that can optionally
have a second argument very very basic

idea here

now let's take this a few steps further
what if I just said sum() with no arguments

now I've got undefined again so in this
case I could actually say if a.. if a and

b else if.. then.. wait.. I was going to say if b
that means there has to be an a right?

return a + b, else if a return a, else
return 0. Ooh I made this sort of like messy

and awkward and weird but you can start
to sort of see what the possibilities

are so now I'm kind of checking if I get
two arguments return some of both of

those, if I have.. if I have one argument
return just that one argument if I have

no argument

return the value zero. Let's just at least
make sure that works, right? So I could

say sum of four and five, I get nine;
sum of four, I get four; sum with nothing

I get 0. So great, so this is working but
what if I now want to say sum(4, 6, 8)?

I still only get 10, right?

Eight isn't involved, well guess what
anytime you call a function in

JavaScript the arguments to that
function 4, 6, 8

those things get placed into what..?
an array, an array called arguments. You could

just say the word arguments and suddenly
you have everything in an array. Let me

show you what I mean by that,

if I go back to the code and
I just say here

I say console.log(arguments) and I
say sum.. oops.. sum(4, 6, 8) you can see

what is the value of arguments?

It's an array 4 , 6 , 8 so you know what
I could actually do in the case of this

function I can write a function called
sum, I don't even have to name any of

the arguments here. I can say there is a
value at 0

I can then go through the
length of the array

i starts at zero; i goes all the way up
through the.. all the arguments; val

plus equals arguments index i
and then return val.

this is now a function that can take any
amount of things you've.. any number of

arguments, 0 arguments, 5 arguments, 10
arguments, 20 arguments and it can loop

through and add them all together

so now here I could say things like sum(5)
and I have a woops..

sorry. I think I didn't reload it, sum(5)

I have the number five; sum(5,6)

I have the number 11;
sum(5, 3, 2, 5, 1, 10, 11, -5, 3, 33)

68!! Somebody confirm for me that that
number is correct.

It's going to take any number of
arguments and loop through all of them

so you can think of all sorts of
interesting possibilities that this

might open up for you in how you write a
function.

I could also name those arguments too as
well so like for example

I don't know why I want to do this
but I could

name the first argument and I could also
say that, return val + a

so in this case this is a little bit
weird but if i say sum(1, 2) it's

going to add one and two and then add 1
to it again so I would get the number 4.

A little bit silly but you can see
that you can both use that arguments'

array and you can also name

optionally name those arguments coming
in so there's a lot of possibilities of

things you can do here.

Now let me make this even.. just to make
this even more a little bit stranger

what if i want my function let's say I
were to create an array.

So I have an array that has the values
[5, 3, 6] in it. So I know I could say

(5, 3, 6) with sum and i'm going to get 19

did I take.. did I leave that weird
extra plus a thing in there?

I want to take that out and run this
again and I'm gonna make that array

I'm going to do this 14, right? So what
what if I.. what if I also wanted to be

able to say sum(array)? In this case look
what it did something crazy happened

because it actually tried to add 0 with
the array but then it tried to make the

array a string and it concatenated
together

JavaScript just tried to figure
something out but this isn't what I want

I want that if you pass this function
an array as its argument that you're

going to add the elements of that array

so how would I do that? Well what I want
to do is I want to check

I could put this back in, a, I could say
if a is an instance of array and I think

capital or like this so this is a kind
of keyword in JavaScript, instanceof

that can determine what kind of argument
you passed in

so you could say like oh well if the
function receives a string as its argument

it should act this way but if it
receives a number as its argument

it should act this way

so if a is an instance of array, and I'm
actually going to call this

arr, then what I want to do is do exactly
this algorithm but instead of using the

arguments array

I just want to use that actual array so
now I'm going to say

array.length and add all that up,
right?

so if you get an array loop through that
array and return the sum of everything

in that array, if you don't get an array
then loop through the.. because it's..

there's just a sequence of numbers then
use the arguments array so now I have

like all sorts of possibilities here for
how this function could perform

so now I can say let me have sum.., it
still works if I give it five three and six

now if I make an array [5, 3, 6] and I
say sum of that array

I should also get that same number and
if I were to say array dot 4 equals

negative one and look at that array..

Whoops I have an undefined, array[3]
equals 2 and look at that array again

and let me clear that, clear it,
look at that.. look at the array and now if I

say sum(array) I should still get..
I should get 15 which is right

fourteen plus two is sixteen minus one is 15
so now I have this function which can

both receive an array.. now

unfortunately I can't do this, right?

I would have to write it.. as an exercise
for yourself if you want a tricky exercise

how could you now write this function so
that it can have mixed arrays and

regular numbers and still add all those
things together

Ok... yes

so in the chat some people are saying I
could use the apply function up and

other types of things to like put the
array into the arguments array and

that's a great suggestion maybe I'll
cover that in a separate video, but right now

I just want to look at different ways
that you can have flexible arguments for

a function and this often comes up in
the case of making objects like a

particle object. So let's take this a
little bit further and let's just say

that this is going to be a program and
I'm just going to take this and

comment it out for right now and I'm
gonna say let's say I have a.. I'm writing

a program with some sort of particle
object and the whole part of this

particle object is that it has a
position which is a vector and I'm gonna

make that vector width/2, height/2

and then I'm going to have a function
called show which..

what does that function do? It draws a circle on
the screen at that vector's x and y and

maybe fill that 255 and I'm going to
stay here.. I'm going to say var p is a

new particle and then p.show

now, you can see I run this program and I
get that circle appearing in the center

of the window

now let's think about all the possible
ways I might want to make a particle

for example I might want to make.. and
let's do it.. let's do this differently

now, let's.. let's say there's an array
called particles and what I'm gonna do

is I'm gonna say particles index 0 is a
new particle and then I'm going to loop

through and I'm just going to call show
and all the particles in that array so

this is essentially the same program but
the reason why I want to show this to

you, right?

is that I want to be able to say things
like this, well particles index one

what if I could make a particle this way?
what if I could say this?

and what if I could say particles index
2 equals a new particle with that

particular vector?

what if I were to say this, particles
index 3 equals equals a new particle

whoops let's make this (150,100)..
(100,150). Now I'm not so sure I really want

all of these but you could imagine an
object

you might be able to, in your code you
might want to make particles and

sometimes you make a particle with no
object no arguments and always puts it

in a default location or you could
specify the location as two values an x

and y or you could just pass in a vector
it would put the particle at that vector

or maybe for some reason you are getting
data from a text file you're reading

in strings

and what if you give it two numbers
separated by a comma how would you deal

with it then?

This is the kind of scenario that can
come up in many things that you might

want to program.

So let's see if we can get all these
particles to appear on the screen

so one thing that I might do here first
of all is give it some

let's give it two arguments an x and y
so one thing we can do is say this and

actually I'm gonna.. I'm going to change
it from having a position vector

just to give it.. just right now I'm going
to change it to just having an x and y. So one

thing I could actually do that you'll
see is am gonna say this.x equals x or

100, this.y equals y or 100. This would
cover me for these first two cases, right?

I'm basically saying I want to take the
value that comes in or some default

value if it's false

and in this case it would be false because it
would be undefined and no value would come in

so let's uh let's actually say I want to
make the particle at 150, 50 and we

could see.. we should be able.. we should
see two particles now, right?

so this is

and let me give all the.. ok it
doesn't really matter the point is you

can see now when the particle gets two
arguments coming in it..

it uses those two arguments like
150,50; when it doesn't get those

coming in to use 100,100

so this is 100,100 and this is wh..
50,150 thats that second particle

ok so those two cases are covered

now what about this third case what if
I'm passing in a vector? So one thing I

can do is I can say okay well actually
right here I could say if this. x is an

instance of a p5.vector object then
this.x equals x.x and this.y

equals x.y

now this is a little bit weird because
I'm sort of stuck in this place of I

named that first argument x so now x is
kind of this vector I still have to call

it x, so I might actually want to just
use more generic names like a and b

in this case so I can say if.. and I'm not
saying if this.x, I'm saying if a is an

instance of p5.Vector do this otherwise
go back to this other idea

so now I'm checking, I've had two three
possibilities, one is I've gotten a

vector or another possibility I got
nothing

or I got two separate values and we can
run this again you can see now I have

three of them, all three of those work
and I have one last possibility which is

this string so I can also say else if a
is an instance of string I guess?

I forgot there's a sort of funny thing with
strings that I forgot about because this

if a the instance of string is not
actually checking it a is just text but

if it's an actual like fully formed
string object in JavaScript and let me

just show you this, a little bit of it
aside but it's kind of worth it since it

might come up

let's say I create a var s equals test

now if I say s instanceof String

you're going to actually see that that
gives me false but if I were to say s

is a new string with the text 'test' in it,
right? it's actually like a whole string

object now and this will actually return
true but in most cases I'm just going to

be in the land of saying s equals test

whoops something like this so another
function that I can use in JavaScript is

typeof() and I could say typeof(s) and
I'll actually get the word string back

and so I think in this case I could say
else if typeof(a) equals string

oops.. then now let's see if that works
I'm gonna run this and you can see that

came through

so since that came through what I need
to do now is say I can use like

a.split by a comma and then I can say
this.x equals Number

nums index 0 and this.y equals Number

nums index one. So split() takes something
takes the string.. so let me do this

actually

so let's say s is 100.. the numbers in a
string 100,150 and what I want to do

is I want to say nums equals s.split
by a comma ahh.. s.split by a comma

so now nums is just an array with two
strings in it and so I could say nums

index zero but that's actually not the number
one hundred it's the string 100 but..

and there's lots of ways I could probably
convert it but one way is I could just

do this

convert it to a number num..whoops not
numbers number and you can see now I

have the value 100 so I'm just doing
that in the code here I'm saying Ah if I

happen to get a string split it up by the ,
then convert those two numbers and we

should see then another particle at ahh..

100,150. So if I now run this again we
can see now I have four particles so we've

now written a constructor function
that optionally it takes two arguments,

you could give it no arguments

you could give it two numbers, you could
give it a vector, you could give it a

string and it's going to figure out how
to fill in the x and y based on what it

gets so this is one just kind of small
instance of that but there's lots of

other scenarios where this could come up
where you want to write a function to

arbitrarily handle a certain number of
arguments of different types. In the

incidentally if you were doing this in
Processing or in Java you would just write

multiple copies of the function each
with different arguments and then handle

the.. those arguments in that but in
JavaScript since the arguments don't

have a type, a type is not part of this
signature of that function of that

method you have to handle them with an
if statement by having sort of optional

flexible arguments

ok hopefully you found this helpful and
you learned something about what the

arguments array and JavaScript does and
how to write a function or a constructor

function that has flexible different
kinds of arguments and different numbers

of arguments.
Thanks for watching, goodbye.