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.
Subtitles by the Amara.org community