Reviewing Functions | JavaScript 🔥 | Lecture 034

Summary

This 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

00:00

🔍 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.

05:02

🧭 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.

10:02

🔄 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.

15:02

🎯 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.

Keywords

💡Function

A function is a reusable block of code that performs a specific task. In the video, functions are presented as a way to organize and reuse code, taking input data, transforming it, and optionally returning an output. Functions are essential for writing modular and maintainable code in programming. The video discusses different types of functions, such as function declarations, function expressions, and arrow functions.

💡Parameters

Parameters are placeholders or variables that receive input values when a function is called. They act as local variables within the function's scope, allowing the function to work with external data. In the video, the instructor explains that parameters are like local variables of a function, defined only inside that specific function. For example, the `calcAge` function has a `birthYear` parameter that receives the birth year value passed as an argument when calling the function.

💡Return statement

The return statement is used to output a value from a function. It specifies the data that the function should produce after executing its code. The video emphasizes that the return statement not only outputs the desired value but also immediately terminates the function's execution. This means that any code after the return statement in the function will not be executed. Understanding the return statement is crucial for controlling the flow of a program and managing the output of functions.

💡Function call

A function call, also known as invoking or executing a function, is the act of running a function's code. This is done by writing the function's name followed by parentheses, optionally with arguments passed inside the parentheses. The video demonstrates function calls using examples like `calcAge(1991)` and explains that the parentheses are necessary to execute the function's code, as opposed to just referring to the function value itself.

💡Arguments

Arguments are the actual values passed to a function when it is called. They correspond to the parameters defined in the function's signature. In the video, the instructor explains that arguments replace the placeholders or parameters within the function, providing the necessary data for the function to work with. For example, when calling `calcAge(1991)`, the argument `1991` is passed and replaces the `birthYear` parameter within the `calcAge` function.

💡Function body

The function body is the block of code enclosed within curly braces `{}` that defines the actions and logic of a function. It contains the statements and operations that the function performs when called. The video refers to the function body as the place where the function's input data is processed and transformed before potentially returning an output value. Understanding the function body is essential for writing functional and reusable code.

💡Scope

Scope refers to the accessibility and visibility of variables and functions within a program. The video touches on scope when discussing parameters, which are variables with a local scope confined to the function they are defined in. Understanding scope is crucial for managing variable naming conflicts and ensuring proper data encapsulation and modularity in code. The instructor emphasizes that parameters with the same name in different functions are treated as separate variables due to their distinct scopes.

💡Reusability

Reusability is one of the core concepts of functions and is mentioned multiple times in the video. It refers to the ability to write a piece of code once and use it repeatedly in different parts of a program or across multiple programs. Functions promote reusability by encapsulating logic and behavior into modular units that can be called and executed as needed, reducing code duplication and improving maintainability.

💡Modularity

Modularity is the principle of breaking down a complex system into smaller, independent, and reusable components or modules. Functions are a key element of modular programming, as they allow code to be organized into separate, self-contained units that can be developed, tested, and maintained independently. The video emphasizes the importance of writing modular code and using functions to achieve this, making programs easier to understand, debug, and extend.

💡Code organization

Code organization refers to the structured and logical arrangement of code elements, such as functions, variables, and control structures, within a program. Good code organization is essential for readability, maintainability, and collaboration. Throughout the video, the instructor emphasizes the importance of organizing code into functions, separating concerns, and using clear naming conventions to improve code quality and comprehension.

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.