Reviewing Functions | JavaScript 🔥 | Lecture 034
Summary
TLDRThis comprehensive video lecture delves into the intricacies of functions in programming. It covers the three types of functions: function declarations, function expressions, and arrow functions, highlighting their distinct characteristics and use cases. The lecturer meticulously breaks down the structure of a typical function, explaining the components such as function names, parameters, function bodies, and return statements. Additionally, the video explores the concepts of function invocation, argument passing, and how functions process and output data. Through clear examples and explanations, the lecturer aims to solidify the viewers' understanding of functions, laying a strong foundation for their coding journey.
Takeaways
- 🔑 The script reviews the three types of functions in JavaScript: function declarations, function expressions, and arrow functions. It explains their differences and when to use each.
- 🧩 Functions have a structure consisting of a name, parameters (placeholders for input data), a body (where the code logic resides), and often a return statement to output a value.
- 🚀 Calling a function is done by using parentheses after the function name, and passing arguments (actual values) to the parameters.
- 🔄 The return statement immediately terminates the function execution and returns the specified value.
- 🔍 console.log() is a function itself, used for printing messages to the developer console, distinct from returning values from a function.
- ✨ Functions can receive input data, transform it, and output data, though these steps are optional.
- 🔁 Functions are useful for reusing code logic across different parts of a program.
- 🎯 The script emphasizes understanding the data flow and variable scoping within functions.
- 🌐 Parameter names can be reused across different functions without conflict, as they are treated as separate local variables within their respective functions.
- 🔖 The script prepares the learner for an upcoming coding challenge involving writing their first function.
Q & A
What are the three types of functions discussed in the script?
-The three types of functions discussed are: 1) Function declarations, 2) Function expressions, and 3) Arrow functions (which are a special form of function expressions).
What is the main difference between function declarations and function expressions?
-Function declarations can be used before they are declared in the code, while function expressions are essentially function values stored in a variable and cannot be used before they are defined.
What are the advantages of using arrow functions?
-Arrow functions are great for writing quick one-line functions, as they don't require the explicit use of the 'return' keyword or curly braces. They also don't have their own 'this' keyword.
What are the three main operations that functions can perform?
-Functions can receive input data (parameters), transform or process that data (function body), and output data (return statement).
What is the purpose of the 'return' statement in a function?
-The 'return' statement is used to output a value from the function, and it also immediately terminates the function's execution.
How do you call or invoke a function?
-A function is called or invoked by writing its name followed by parentheses, e.g., 'functionName()'.
What is the difference between parameters and arguments in a function?
-Parameters are placeholders for input values in a function declaration, while arguments are the actual values passed into the function when it is called.
What is the purpose of the 'console.log()' function in JavaScript?
-The 'console.log()' function is used to print messages or values to the developer console in the browser. It is a separate function call within another function and is not related to the 'return' statement.
Can you explain the data flow when calling a function from another function?
-When a function is called from within another function, the arguments are first passed to the inner function, which then performs its operations and returns a value. This returned value can then be used or processed further in the outer function.
What is the purpose of the 'if-else' statement used in the script?
-The 'if-else' statement is used to handle different scenarios based on a condition. In the script, it is used to return a specific value (e.g., -1) if the 'retirement' value is less than or equal to zero, indicating that the person has already retired.
Outlines
🔍 Review of Functions and Function Expressions
This paragraph reviews the key concepts related to functions, including regular function expressions, arrow functions, and how they receive input data, transform it, and output results. It demonstrates converting an arrow function to a regular function expression, introduces the `calcAge` function, and explores how parameters are local variables within functions. It also explains how the `return` statement immediately exits a function and demonstrates its usage.
🧭 Handling Return Values and Terminating Functions
This paragraph focuses on handling return values from functions based on conditions. It introduces an `if-else` statement to conditionally return different values from the `yearsUntilRetirement` function based on whether the calculated retirement value is positive or negative. It also illustrates how the `return` statement immediately terminates the function execution, preventing any subsequent code from running. The paragraph demonstrates moving `console.log` statements before the `return` statements to ensure they execute.
🔄 Comprehensive Review of Function Concepts
This paragraph provides a comprehensive review of the key concepts related to functions learned so far. It discusses the three types of functions: function declarations, function expressions, and arrow functions, highlighting their differences and similarities. It also explains the structure of a typical function, including its name, parameters, function body, and return statement. The paragraph clarifies the distinction between `console.log` and `return`, emphasizing that `console.log` is a function call used for debugging purposes, while `return` outputs a value from the function.
🎯 Conclusion and Preview of the Coding Challenge
This concluding paragraph summarizes the key points covered about functions and encourages the learner to ensure they fully understand the concepts. It also previews the upcoming coding challenge, which will involve writing a function for the first time, and expresses excitement for the learner to tackle the challenge.
Mindmap
Keywords
💡Function
💡Parameters
💡Return statement
💡Function call
💡Arguments
💡Function body
💡Scope
💡Reusability
💡Modularity
💡Code organization
Highlights
Functions are essential in programming and can receive input data, transform data, and output data.
There are three types of functions: function declarations, function expressions, and arrow functions.
Function declarations can be used before they are declared in the code.
Function expressions are function values stored in a variable.
Arrow functions are special function expressions, great for quick one-line functions without the explicit return keyword or curly braces.
All types of functions can receive input data, transform data, and output data, regardless of how they are written.
Functions typically have a name, parameters (placeholders for input values), a function body (code to process the input), and a return statement (to output a value).
Calling a function involves using parentheses after the function name, and providing arguments (actual values) for the parameters.
The return statement terminates the function's execution and outputs a value.
The console.log() function is used to print messages to the developer console for debugging purposes, and is separate from returning a value.
Understanding the structure and behavior of functions is crucial for effective programming.
The transcript provides a thorough review of functions, covering their types, structure, calling, and the role of return statements.
The transcript prepares the reader for an upcoming coding challenge involving writing their own function for the first time.
The explanation of functions is clear, concise, and designed to solidify the reader's understanding before moving on to more advanced topics.
The transcript demonstrates the importance of reviewing fundamental concepts and ensuring a strong grasp before progressing in programming.
Transcripts
To finish this part about functions,
let's review everything important that we learned so far.
In order to make sure that you really understand functions
before we move on to other topics.
And let's start by bringing back and rewriting the function
that we wrote before,
which is the years until retirement function.
So I think that was,
yeah it was here in the lecture about arrow functions.
So let's copy this one and paste it here.
And the first thing that we're gonna do
is to actually convert it
to a more normal function expression.
So how do we do that?
Well, in this case,
we simply get rid of the arrow here
and then write the function keyword here.
And so now this is just a regular function expression
like we learned before.
Next up we could export this functionality here
into another function.
So like a calcAge function that we've been using before.
So let's do that
because then we can do what we did in the last lecture,
which was to call one function inside of the other function.
So let's write another function expression here,
calcAge equals
a function and then the birth year again.
And what we return from this one is simply 2037
minus the birth year.
So we already did that before. Right.
Now you might find it confusing
that we have two different functions here
with the same parameter names.
So this one has birth year and this one has too,
but that's not a problem at all.
So this birth year in this function is not at all related
to this birth year in this function.
They are two completely different parameters.
So basically two different variables.
We could even have a variable outside
of any of the functions,
which could also be called birth year.
Okay.
And we could do that now,
but I don't want to confuse you even further. Okay.
But what matters here is that this parameter is really
like a local variable to each function.
Anyway,
let's now go ahead and delete this here and instead,
calculate the age based on the function that we just wrote.
And actually we just delete this part here.
And so now the age will come from the function calcAge.
And what we pass in here is the birth year.
So again, it's confusing now with these
same parameter names here,
but let's quickly call this function
just so I can quickly show you the data flow.
So years until retirement with birth year 1991
and first name of Jonas.
So 1991 will be the birth year here in this function.
Then as a first step,
this years until retirement function called calcAge
and it calls calcAge with the argument of 1991.
So this one here,
and so then birth year in this function also becomes 1991.
And so then here, the operation will be 2037 minus 1991.
And if you find it less confusing,
we could change this year to something else.
Let's just say year and it would work the exact same way.
Okay. So again,
these variable names in these two different functions,
they do not have anything to do with one another.
All right.
But let's actually put it back here
because it's a, it's good to keep this in mind.
Then down here,
let's actually go back to returning a number
and not the string, which for now I will just comment out.
So here we call this function and once more,
I'm not gonna store it into a variable.
So we will just log the result of this, to the console.
So this should be just like before, 19.
Okay.
But now I want to show you something
which is to call this function again,
let's say now with a Mike
and let's say Mike was born in 1970.
And so,
his years until retirement will be two.
So a negative number, which means that he already retired.
So let's quickly account for that.
So what we will do is to basically return this number,
if it is above zero,
and if it is below zero,
we are gonna return something else like a minus one
or something or some special number.
So instead of returning simply the retirement,
let's take a decision here based on the retirement value.
And so that's something that we learned in the last lecture.
So let's use an if else statement and say,
if the retirement is
greater than zero.
So if there are more than zero years left until retirement
then return this retirement value.
Okay.
So remember that in the, if block,
we can put any code that we want.
And so that includes the return statement.
And else, well, let's just return always minus one.
So, minus one is kind of a standard number in programming.
We could also like return,
like this.
So a number that shows us clearly that this has no meaning.
Let's just keep it at number one, minus number one.
Okay.
And I'm returning actually numbers here
and not a string as we had before,
because that's usually what we do,
especially when we actually receive a number as an input.
So here in this function, we get birth year
here as an input, and it's a number
and therefore it's a good practice to
then also return a number.
Okay, let's try this again.
Now, we'll even change it to something more drastic.
So 1950 and let's see what we get now.
Now,
so it's minus one now.
Great.
Now, one thing that I didn't mention yet is
that this return keyword here
will actually immediately exit the function.
So it will first return the value that we tell it to return.
So in this case, the retirement value,
and then after that, the function is done.
So it exits immediately.
And we also say that the function has returned.
So let me actually demonstrate that to you.
And what I will do is to take this string here.
Now we can get rid of the rest
and I will put that after the return.
So we will log to the console,
this string here that we just had.
And then here let's log simply
the first name has already retired,
and then we can put another emoji here,
like this party emoji that I like.
And,
yeah.
What do you think will happen when we run this code now
and keep in mind that we have the return
before the console dot log, in both cases.
So in the, if block here and also in the else block.
So what do you think is gonna happen with these
console dot logs?
Well, let's see.
And indeed they are simply ignored,
so they will not get executed.
Because as I said before,
the return statement immediately exits
or immediately returns the function.
And so therefore there is no chance
that this code here is even reached.
So if we want this one here to execute,
we need to put it before the return
and in vs code, I can simply hit option or alt up.
Okay. And that will then move the line up.
So we can,
we also have that here somewhere in this menu.
So that's move line up and move line down.
So just so you see which one is the shortcut.
So I use that one all the time.
I also use add cursor below all the time,
and I also use add next occurrence.
So that would be command or control D.
So what this means is that we have, if we have
this for example, here select it
then we can already see all the other ones.
But if we hit command D then it will actually select that.
So you see. Now we have these four selected.
And so we now could replace all of them at the same time,
for example, like this. Okay.
But anyway, let's go back to what we were doing here.
So I just moved the console dot log before the return here.
And so now there should be a chance that the console dot log
is actually executed before the value is returned.
And so let's do the same here.
So again, I'm hitting option or alt up.
Add to these two lines to changed position,
and now, yeah, now it works.
So we get the string and here we get,
Mike has already retired.
Okay.
So this was to show you some more things about functions
that we had already learned,
and also show you something new,
which is the fact that the return statement here
immediately exits the function.
So we reviewed already some things here,
but now it's time to really review everything
that we learned so far about functions
in these first couple of lectures.
And here we have the three type of functions
that we talked about.
So we have first, the function declaration,
and one particularity about function declarations
is that they can be used before
they are declared in the code.
Second, we have the function expressions,
and they are essentially function values
that are stored in a variable.
And finally, we have arrow functions
that are in fact also function expressions,
but special ones.
And these are great for quick one line functions
where we don't need to explicitly use the return keyword
and no curly braces either.
I also said that this one has no this keyword,
but more about that in one of the future lectures.
Now what's important to note here is that
these are three different ways of writing functions,
but they all work in a similar way.
So all of them can receive input data, they transform data,
and then they can output data.
It's all optional,
but usually that's the things that functions do.
And no matter which type of function we use,
we can always do these three things.
And now let's zoom in a little bit further
and take a close look at the structure of a
common function let's say.
And this one here is a function statement,
but it works the exact same way
for all other types of functions again.
So first, usually a function needs a function name.
So calcAge in this example,
then a function also has parameters.
And these parameters are essentially placeholders,
that receive input values.
So, as I said before,
these are a little bit like local variables of a function.
So variables that are defined
only inside of this very function.
Now, as you also already know,
we use functions to reuse pieces of code,
and these pieces of code are inside the function body.
So this is where the functions input data
is usually processed and then returned.
And speaking of the return, by the end of the function,
we usually have a return statement,
which we use to output a value from the function.
And also, as I mentioned a little bit earlier,
the return statement also immediately terminates
the function's execution.
We also say that the function returns, okay.
And now about calling the function,
we do that using parenthesis.
So we write the name of the function
like we did here with calcAge
and then with a parenthesis we call the function.
Because without the parenthesis,
the function is really just a value.
But then with the parenthesis,
we actually called a function.
And we can also say that we run the function
or invoked a function or execute a function.
And all of these terms kind of mean the same thing.
Now, in this case,
since the function actually has parameters,
we then call the function with arguments and these arguments
are the actual values of the function parameters.
So we use these to input the actual data into the function.
And we can also imagine this as replacing the placeholders
that are the parameters.
Then once the calcAge function has finally done its job,
then all this expression will basically be replaced
with the returned value.
So in this case, the age that was replaced here.
And that age value is what we then store
into this age variable.
So we use this variable to basically save the returned value
that was outputed from the function.
Okay.
Now just one other thing that I want to make clear is
that this console dot log that we have in the function.
So in that first line there,
has nothing to do with returning a value.
This simply prints a message to the developer console,
but it has nothing to do with returning.
Actually the console dot log is actually just
another function call inside the calcAge function
because console dot log is itself a function.
And so the argument that we pass into
the console dot log function
is what will get printed to the developer console.
Okay. So just wanted to make sure
that you really get this distinction
between console dot log and return.
The reason why we always use console dot log
is because we want to see the results of our experiments
in the developer console, in the browser.
Anyway,
I think this pretty much sums up all there is to know,
at least for now about functions.
So make sure that you get all of this down
and then you can move on right to the next video
where the first coding challenge
of this section waits for you.
And as you can probably guess,
it's gonna be about writing your own function
for the very first time.
So I hope to see you there soon.
Weitere ähnliche Videos ansehen
Optoelectronic devices: Introduction
Functions & Methods | Java Complete Placement Course | Lecture 7
FIRST CLASS FUNCTIONS 🔥ft. Anonymous Functions | Namaste JavaScript Ep. 13
Composition of Function by Ma'am Ella Barrun
C_64 Strings in C- part 3 | printf and puts function in C
Fungsi Invers - Matematika SMA Kelas XI Kurikulum Merdeka
5.0 / 5 (0 votes)