14: How to Create JavaScript Functions | JavaScript User Defined Functions | JavaScript Tutorial

Sharing buttons:

how's the groom I wanna come back to our

next episode on how to create the otha

script now in this lesson you're going

to learn about something called

functions inside the other scripts and

functions is something because

constantly when we create any sort of

JavaScript code and it's something used

in order to easier structure our code or

reuse code later on inside our scripts

so when it comes to these functions we

have two different reasons for using

them the first one is that we want to

create a result immediately inside our

code or we want to create an answer for

other functions to use inside our

JavaScript so when it comes to these

functions we had three different types

we have something called the name

function which is what we're gonna

mainly use here at the beginning of this

course we have something called an

anonymous function and then we have

something called a immediately invoked

functional expression which is quite a

fancy way of saying the name of a

function but there's some key

differences between these three

functions which we're going to go over

in this episode here so when it comes to

these functions I'm gonna go to take

them one by one as you can see in front

of me I do have a basic index page

inside my website here now I just want

to point out that in this lesson here I

will be using an external file instead

of what we usually do by writing the

JavaScript code directly inside the

index page by writing it in between the

script tags so this is going to be the

first episode where we do actually use

an external file by simply linking to it

inside our index page so whenever I

write JavaScript inside this main latias

it's going to do the exact same thing as

writing it inside the index page just so

you're aware of it so the first example

I want to create for you is something

called a named function now a named

function we create by writing the

function declaration then we create some

kind of name for it just like we do with

variables we can think of anything so

I'll just call it test example do you

notice that when we use multiple words

is a common habit inside programming

that the words coming after the first

word are going to start with a

capitalized letter so in this case the e

for the second word is going to be

capitalized so after the name we write


they've been write curly brackets and

then we open and close the curly

brackets then whatever goes in between


walk a code which is what I was inside

the curly brackets is going to be the

code that is going to execute once I

call on this function here the code that

we can write in between the curly

brackets can be anything from

mathematical equations to just

generating a random string or something

so in this case I'm just gonna go ahead

and create a variable which is going to

be called greeting I'm gonna set it

equal to hi my name is Daniel I can

actually spell my own name there we go

then afterwards what I want to do is I

want to actually get some kind of result

from it now we can if you want to go in

here and say console log console dot log

and then simply constant log out

greeting which is the variable appear we

will then say inside the console hi my

name is Daniel so what we basically

created here is a block of code that

doesn't actually run inside the website

until we actually call in the function

inside of JavaScript so what we can do

to call it is we can go down to the next

line here and say we want to run the

actual function called tests example

Prentiss C's semicolon and then if I

were to look inside the console you can

now see it says hi my name is Daniel

because I'm now running the function now

an important thing to mention about this

name functions is that we can actually

create them anyplace in Santa Clara

wants and then we can use them any place

inside our JavaScript code so you don't

need to place at a specific place for to

work inside that the jobs give when we

want to call on it down here where it

says for example test example so the

function could be either at the top or I

could place it below test example and

it's still going to work inside the

browser so the order doesn't really

matter when we create these named

functions here now when it comes to

functions we usually do it in a slightly

different way because instead of

directly outputting anything from inside

a function we can also go ahead and

return a value using the function so

instead of console locking it instead we

can actually go ahead and return some

kind of result so instead I'm returning

greeting and as you can see

right now it doesn't actually say

anything inside the browser here but

instead what we do is that when we call

the function down here we still have the

result which is hi my name is Daniel but

we stored it

we haven't actually outputted it yet if

I want to output the result from inside

the function the way we usually do it is

by going down what did actually call in

the function and console lock it from

down here instead so I'm actually going

to console lock the entire function and

as you can see inside the browser here

inside the console we get hi my name is

dan now the last thing I want to show

regarding name functions is that we can

actually pass in parameters from outside

the function and into the function so we

can use it inside the function code so

in this example a can actually see we

wrote hi my name is Daniel but what if I

want to submit an actual name into the

function instead of just having this

default Daniel name inside the function

now the way we can do that is using

something called an arguments object

which is just a fancy way of saying that

we can pass data into the parentheses

and send it to the function up here so

inside the function what I'm going to do

is I'm going to create a placeholder

now the placeholder can be any sort of

name so I'm just gonna go in called a

and if I want to add more than just one

I can say comment and just say B if I

wanted to or space B doesn't really

matter with the spaces but in this case

I'm just gonna go and add one piece of

data and send it to it so now we have a

placeholder in here and what I can do is

I can say well when I say hi my name is

Daniel I'm just gonna go and delete

Daniel and add a string operator which

means that we combine a variable to a

string to add one string essentially so

what I can do is I can say I want to add

a at the end of it so down here where do

actually console.log it and calling the

function in here I can go ahead and add

a piece of data into the parentheses in

order to send it into the placeholder we

called a so what I can do is I can say

double quotes and then I can say right

now you guys can see down in the console

it says hi my name is undefined because

you haven't defined a yet so what I can

do is I can say Nick if I wanted to and

now it's going to say hi my name is Nick

inside the browser here

so this is one way we can do it now just

to clear something up then you might get

confused about later if I were to go on

top of here and create a variable called

name set it equal to Daniel just to

create the other name again and then use

the variable name inside the parentheses

down here do notice that it does still

work if I go inside the console still

says hi my name is Daniel because

variable name is equal to Daniel and we

use variable name inside the function

down here which is just to show you that

the a appears a placeholder it doesn't

have to match with whatever's inside the

parentheses down here so you can still

use different named variables inside

when you call on it down it doesn't have

to match up with what it was up here now

the next function I want to talk about

is something called an anonymous

function which is slightly different

than a name function now an anonymous

function is something we usually trigger

by either tying it to a variable or

something called an event now events is

not something we've talked about yet but

it is something I'm going to teach you

later in this course since it's pretty

essential to know about events if you

want to do anything with JavaScript

whenever the user interacts with a

website so events is pretty essential

but we're not gonna talk about it yet

now what I want to create one of these

anonymous functions I can do it by like

I said tying it to a variable so what I

can do is I can create a variable that I

can give some kind of name I'm just

going to use the same name as the

previous function in the previous

example so I'm gonna say test example

then I'm gonna set it equal to a

function and because this function is

anonymous we don't give it a name so

instead we just say parentheses curly

brackets and then we can just create the

same code inside the curly brackets if I

wanted to so I'm just gonna go ahead and

paste it in now if I want to call in

this function here like it said we can

do it using events what we can do it

using by just calling on the variable so

what I can do is below here I can go and

refer to the variable so I'm gonna say

test example then I'm going to just

close it off here now it's not going to

work just quite yet because when we have

a function tied to a variable which is


the way that we activate the function

inside the variable is by creating a

pair parentheses right behind the

variable name so this is similar to what

we did up here in fact which is simply

called on the function name and then the

parentheses so you know you might be

asking well what is the difference here

now we'll get to that in just a second

so what I'm going to do is right now we

didn't actually pass in a a parameter so

I'm just gonna delete that and right

Daniel in step so we don't get there are

misses in here now we have an actually

console.log that yet so we need to do

that as well because what we did is we

actually returned a result inside

greeting so I can actually console dot

log parentheses there we go and save it

and the same way to what before if I

wanted to pass in any sort of parameters

I just do it by including it inside the

parentheses here and then inside the

function and then inside that took place

down here so we could say a you can say

variable a is equal to Daniel there we

go and now I like to get the result

inside the function here so this is how

we can create an anonymous function now

the difference between an anonymous

function and a named function is

something called hoisting now when we

create a function like we did up here

that is named when we create the

function it gets stored at the top-level

inside our JavaScript code

which means that we can use the function

whenever we want to inside the code

whereas a anonymous function is hoisted

in a slightly different way now we

haven't talked about this yet and we

will in actually not that many episodes

we're going to talk about something

called scopes and something about

hoisting when we create a variable the

code doesn't actually see the code in

the exact same way as we wrote it inside

the function again I don't want to get

off the sidetrack a I'm sort of scared

that this is going to confuse too many

of you so we're not gonna talk about

horsing just quite yet we will in a few

episodes from now then we'll get some

very simple examples to illustrate what

exactly hosting is but the basic idea

here is that when we create a anonymous

function because it's

equal to a variable the variable gets

stored at the top level in the same way

as the function does but we don't

actually have the value from the

function yet until we actually get to it

down in the script so that's the basic

difference between anonymous and named

functions again if I just confused you

just forget about everything I said

we'll get to it wants to do is to get to

talk about hoisting and later we'll

actually talk more about anonymous

function so next example now we also

have something called a immediately

invoked functional expression and this

is basically a function that again like

the anonymous one doesn't have a name

but it's going to run as soon as the

code gets loaded inside the browser so

if I were to create a function here just

by creating function parentheses curly

brackets then I can create some kind of

code here like what we did up here but

instead I would like to just console

lock this inside the actual console so

I'm gonna say Daniel and I'm just gonna

go ahead and console.log it instead of

returning it like we did down here in

the code so I'm just gonna console dot

log greeting now as you can see we get a

on constant X error if I want this

blogger code to run immediately inside

the browser we do need to do a couple of

things to make it into a immediately

invoked functional expression so what we

need to do is first of all need to wrap

this entire function inside a pair of

parenthesis and then afterwards what we

need to do in the same way as when we

would call out a function by this

example here I'm just gonna bring it

down so we can see it what I want to

call the test example function we then

say test example and then add the

parentheses at the end here so in the

same way if I want to call this function

immediately need to add a pair

parentheses right after the function if

that makes sense so going to add it

right before the closing parenthesis

that was wrapped around the entire

function so in this example here make

sure you put the parentheses in the

right place we have opening parenthesis

the function with the curly brackets

then a opening and closing parenthesis

and then

the closing parentheses that belongs to

the first opening one okay so when we do

this as you can see it's going to run

the code immediately as the document

gets loaded inside the browser and as

you can see inside the console we do

have hi my name is Daniel so these are

functions and what we're going to focus

on at these tender beginning are just

name functions which is the first exam

with it which is pretty simple to to use

and once we have done a couple of

examples in a couple of exercise files

probably in the next episode we'll get

to actually experiment a little bit with

these functions and see how we can use

them inside of JavaScript code in order

to do something with the data that we

have inside our website so I hope you

guys enjoy it I'll see you next time