Original subtitles

In this lecture, I want to quickly talk about

how exactly it works to pass arguments into functions.

And this goes back to the video that we had

about primitives versus objects,

which, remember, we also call

primitive types and reference types.

So this is kind of a review of that lecture,

but applied to functions, because it's super important

that we really understand how primitives and objects

work in the context of functions.

And so let's draw up a quick and simple example here.

So let's set a flight number here,

234,

and an object,

which is basically a passenger,

which in this case is me.

So name, Jonas

Schmedtmann,

and then some random passport number.

So let's say just this, and by the way,

I could have all of this code here as boilerplate already,

so in the starter files, but I strongly believe

that it's better to write the code here in a video,

because then you are forced to write the code yourself,

and second, it makes the examples

a lot easier to understand.

Anyway, I now want to create a check in function.

So, basically when the passenger has already

bought the flight and is then ready to check in

to take the flight,

and then let's say, there we need a flight number,

and then also a passenger object,

which contains data about the passenger itself.

So basically we would call this function like this.

So with the flight that we already have up here,

and the Jonas object, in this case.

Alright, so this is our flight, LH234.

And this is our passenger,

but now let's say that the number of the flight was changed.

And so that can happen in the checkIn function.

And so let's now change that flight number parameter here,

and this is usually not a good practice to do,

so you should not change the parameters of a function,

but this is just to make a point.

So let's say for some reason,

the number now changed to LH999,

and I will also change the name of the passenger,

and that's because in aviation,

usually they always add a Mr or a Mrs,

in front of the name, okay.

So let's do that, Mr,

and then just the name of the passenger.

So these are some changes that the check in function does.

And then before we check in,

it will just check if the passport number is correct.

So let's say if passenger dot passport

is equal to this one,

and let's suppose that this function

gets this data from some database,

which contains the booked flights, right,

then in this case, if the passport is correct,

then let's alert, check in,

and else,

alert,

wrong passport.

Okay, and this part here will make

a little bit more sense by the end of the lecture.

Okay?

And now what I want to do is to log both the flight

and the Jonas object to the console

after calling this checkIn function.

So, flight,

and Jonas.

Okay.

And now, as I save this, what do you think

is gonna happen to these two variables here?

Can you try to anticipate it,

based on the code that we have here?

So, anyway, let's see now, and here we get checked in,

which for now isn't really important,

but then what we get is the flight number,

which is still LH234,

so exactly as we defined it here,

even though it seems like it was redefined here,

so it really wasn't.

And then we also get the Jonas object,

but now the name is indeed changed to Mr Jonas Schmedtmann.

And so that's this change here,

that happened inside of the function, right?

So maybe you actually saw this result coming,

because we actually have seen this happening

sometimes before, but let's, anyway, analyze it.

So this flight here is a primitive type, right?

It's just a string.

And as we passed that value into the function down here,

then the flight number here is basically a copy

of that original value, right?

So flight number contains a copy,

and not simply the original value of the flight variable.

So this would be exactly the same as writing

flight number equals

flight.

And this would then also simply copy

this value to flightNum, right?

And so again,

flightNum here is a completely different variable.

And therefore, as we changed it here,

it did not get reflected in the outside flight variable.

Okay, and so it's still LH234,

so exactly for the same reason as we saw before,

in the primitives versus reference types lecture.

But now what about the Jonas object that we passed,

into the checkIn function and in that function,

it is called passenger, right?

And then we changed that passenger object here.

And as we saw then,

the Jonas object was also affected by that change.

So why did that happen?

And you might already know the answer.

So when we pass a reference type to a function,

what is copied is really just a reference

to the object in the memory heap.

So that would be exactly like doing this.

So passenger

equals

Jonas.

We can actually do this and here the same,

just to get as a reference, same as doing,

okay, and so, as you already know,

when we try to copy an object like this,

we are really only copying the reference

to that object in the memory heap,

but they both point to the same object in memory.

And so that's exactly what is also happening here,

with the Jonas object, as we pass it

into the checkIn function where it's called passenger.

So here, as we are manipulating the passenger object,

it is exactly the same as manipulating the Jonas object.

Once again, because they both are

the same object in the memory heap.

Alright, so in summary, passing a primitive type

to a function is really just the same

as creating a copy like this, outside of the function.

So the value is simply copied.

On the other hand, when we pass an object to a function,

it is really just like copying an object like this.

And so whatever we change in a copy

will also happen in the original.

Now, of course, we need to be careful

with this behavior and always keep it in mind.

That's because the fact that objects

behave this way when passed to functions

can have unforeseeable consequences in large code bases.

And that's especially true when you're working

with multiple developers.

So let's write another quick function here

to show you what can happen,

so that you can be prepared for the real life, basically.

So let's just create a function called

newPassport.

It will accept any person,

and basically it will simply change

that person's passport number.

And so let's simply create a random number here,

random, and let's multiply it by some huge number,

and then this will create a number

between one and

this huge thing.

So it doesn't really matter here.

We will also know trunc, as we have used before,

just so that we get a new big number,

which will be the new passport now, right.

And so now let's call that function actually,

with the Jonas object,

now, right.

So let's say that I booked the flight

with my original passport number here.

And so that's the passport number

that the checkIn function will then compare my passport to,

that's why it's hard coded right here.

But now, again, I change my passport before I check in.

And so let's see what happens then.

So here again, we need to pass in

the flight and the passenger object.

So, let's see.

So it still says checked in here,

but that's coming from this checkIn function call, okay.

So then down here, the passport is changed,

and then there's another checkIn call.

So let's see the result of that.

And so now, indeed, it says wrong passport, alright.

And so what's happening now is that we have

two functions manipulating the same object.

And so that is creating a problem,

right?

So here the exact same thing is happening,

in the new passport function.

I'm passing in an object,

and so that object here is then called person.

And as the function manipulates that person object,

of course, it also gets reflected in Jonas.

And then as we pass that Jonas object

into the checkIn function, then, of course,

that passport is no longer the same as the original one.

So, yeah, I think this is a nice example

of seeing how the interaction of different functions

with the same object can create some issues here.

And of course, this is just a super simple example,

but I'm sure you get the point, right?

What matters is that you're aware of this issue,

and then you can be careful with it.

Let's just take out these lines of code.

Also these, these don't really matter.

Let's just make sure, and indeed, yeah,

we get the wrong passport now,

because of the new passport function down there.

Okay.

Now, just to finish, in programming,

there are two terms that are used all the time

when dealing with functions,

which is passing by value, and passing by reference,

and many experienced programmers that are new to JavaScript

have some confusion between these terms

and how it works in JavaScript.

And so I wanna quickly address that here as well.

So JavaScript does not have passing by reference,

only passing by value,

even though it looks like it's passing by reference.

So there are languages like C++,

where you can pass a reference to any value,

instead of the value itself.

This works even with primitives,

so you could pass a reference to the value of five,

and then the original value,

outside of the function, would be changed.

And this is called pass by reference.

But once again, JavaScript does not have pass by reference.

So if you already know some programming,

but are new to JavaScript, be sure to understand this.

And I know it's confusing, because as we just learned,

for objects, we do in fact pass in a reference.

So the memory address of the object.

However, that reference itself is still a value.

It's simply a value that contains a memory address.

So basically we pass a reference to the function,

but we do not pass by reference,

and this is an important distinction.

And once again,

I'm only telling you this because there seems to be

a lot of confusion going on about this topic

among some JavaScript beginners, and especially

when they come from other languages, such as C++.