The 10 Days of JavaScript: Day 2 (Features)

by birtanpublished on July 3, 2020

[Music]

hello everyone welcome back to the ten

days of JavaScript here we are and day

number two and in this lesson we're

going to learn about functions so we

will answer the question what is a

function however before we get to that

let's first talk about where we are

going to type our code in this lesson so

in our previous lesson we learned how to

open up the web browsers console right

so remember you can right click on a web

page choose inspect and that opens up

your developer tools and then you just

look for the tab or button that's named

console okay and remember in the

previous lesson we learned how to type

down here

two plus two press enter we see for now

the console is great for experimenting

and typing out these single lines of

code and then pressing enter but in the

real world you're going to want to write

multiple lines of code at once meaning

when you push enter you don't want the

computer to execute or run your code

right away so almost like a word

processing document with multiple

sentences and paragraphs we want to be

able to write out multiple lines of

JavaScript code and then have the

computer run everything that we just

typed now the easiest way to get started

practicing this is actually not the

console but instead a website named code

pen and right now I want you to follow

along with me so you can either Google

for code pen or you can just visit the

address which is code pen dot IO so

right now this very minute I want you to

pause this lesson if you need to while

you go open code pen in a new tab so you

can follow along in my opinion code pen

is the easiest way to get started

actually writing code it's free to use

and if you do not want to you don't even

have to create or sign up for an account

you can literally just come to this

website and click the Create button that

should be somewhere towards the top

right and then from this menu that

appears choose the new pen option so

create new pen okay so what's going on

now

what is this screen well each pen that

we create is like an empty canvas or a

playground or play pen or an experiment

where we can code so we see that there

are three columns the first is HTML and

then CSS and then j/s or JavaScript now

this is a course that is focused on

JavaScript so we are not going to worry

too much about these first two columns

but the big picture idea is that these

are the three languages that web pages

are created with and how code pen works

is that as you type in a column let me

shrink this you can actually see as you

type in a column so in the HTML column

if I say hello there as soon as I stop

typing for a second a preview is shown

to me down here of what my code creates

perfect except this is not a course on

HTML we want to learn about JavaScript

so just to make it really easy to focus

on javascript for right now why don't we

hide the HTML and CSS columns so to do

that all I did was drag on the border

right this vertical line right between

CSS and JavaScript hover over that and

then click and drag to the left so that

way the JavaScript column takes up most

of our screen right because that's the

language that we want to practice cool

now you do not need to do that it just

gives you more room as we're going to be

typing in this column so we now have a

perfect environment to start practicing

because in this JavaScript column we can

now type out multiple lines and

keep pressing enter and each time we

type a bit of new code the computer is

going to execute everything that we

wrote all at once together just like an

actual real-world computer program okay

now having said all of that let's get

back to the actual goal of this

particular lesson right and that is the

topic of functions so what in the world

is a function well I like to think of

functions as action words so if we were

comparing JavaScript to a language like

English or Spanish a function would be a

verb so for example if our pet dog was a

computer that spoke JavaScript we could

say run or jump or sit so you simply

type out the name of the action or the

name of the function and then you

include a pair of parenthesis however

let's be realistic our web browser is

not a dog so it can't run jump or sit

but it can do web browser ish things so

for example let's delete these three

lines of code and we can create an

annoying pop-up by calling the browser's

alert function so alert and then

parenthesis and we can see this pop-up

appears so this is how you can alert the

visitor of the site with a message right

so if you really want to get their

attention you can include a custom

message right about here so let's go

ahead and click the button to dismiss

the alert pop-up and within the

parentheses for this alert we can

include quotes and then say hey and here

we can see in the new pop-up there is

our custom message cool let's go ahead

and close or dismiss this pop-up so the

idea is that within the parentheses you

can pass along a bit of data to the

function and it's up to the function as

to how it uses that data so back to the

dog example right if our dog spoke

JavaScript we could say jump and maybe

first we want to tell the dog to jump

I but then we could also tell the dog to

jump again and maybe this time jump low

so to review you can call a function

simply by including the word and then

parentheses and then inside the

parentheses we can pass along a bit of

data the technical name for a piece of

data that we pass along is an argument

so all together we are calling or

executing the browsers alert function

and we are passing it an argument of hey

okay so the browser has these different

action words or functions like alert

that we can call but we are not limited

to only those functions because just

like you can teach a dog a new trick we

can also teach our JavaScript

environment new tricks by creating our

own brand-new functions so for example

let's get rid of this line and if I type

out greet and then parenthesis the web

browser does not know what this means

the browser does not have a function

named greet so when I say greet and then

parenthesis this would be like telling a

dog to bake a cake it's not gonna know

what you mean and it's just gonna look

at you funny however as a programmer we

can create our own brand new function

named greet and we simply explain what

that action or function should do and

then it will be added to the browser's

vocabulary and we can use or call it

just like we would alert or any of the

built-in functions so the question

becomes how do we create a function

right we've learned how to call or

execute or run a function right this is

how you su a command you simply type the

name of the function and then

parenthesis but how do you actually

create the recipe or the instructions or

the logic for the function well let me

show you so let's start fresh and we

begin by typing the word function and

then a space and then we get to make up

whatever name we want for our new

function the name does not matter you

could call it pizza

or unicorn but in this case I'm going to

name it grete then we include a pair of

parentheses and then after the

parentheses we include a pair of curly

brackets if you're not familiar with

these characters

you can create them by holding the shift

key and then pressing the key directly

to the right of the P key okay and now

you don't have to do this but in between

the two curly brackets I like to push

Enter or return and drop down to a new

line like this just for visual clarity

okay but in between the curly brackets

where my cursor is blinking right now

this is what is referred to as the body

of the function and this is where we are

free to do just about anything so this

is where we explain what the function

should actually do so just as a quick

test let's set things up so that when

you call or run the greet function an

alert pop-up should appear that says

hello my name is and then whatever your

name is

so inside the curly brackets let's call

the alert function and say hello my name

is and then you could put your name

instead of my name all right and now you

might be wondering why an alert popup

message is not appearing right away and

it's because all we've done here is

described the function or define the

function right so this is the recipe for

our new greet action and now if we want

it to actually happen if we want to tell

the browser to actually perform the

greet function maybe down here we could

just say greet and then parentheses

right that's how you call a function and

there we can see the pop-up appears

hello my name is Brad and if we called

the function again we could call it

again greet second time it should appear

twice so here it is once I click OK

there it is the second time perfect so

we just taught the browser a new trick a

new action or we should say a new

function now before we move on let's

improve our function because it would be

nice if it was flexible let me explain

what I mean by that so follow along with

let's delete these two function calls

for greet and remember when I used the

example that a dog can jump but you

could also tell it to jump high or to

jump low and we learned that the data

you pass within the parentheses is

referred to as an argument right and

it's up to the function to perhaps use

that data in some way well wouldn't it

be cool if our greet function was

flexible and when you called it you

could pass in a name instead of

hard-coding the name right here so for

example wouldn't it be neat if we could

say greet and pass it a value of John

and then it would say hello my name is

John and then you could call it again

and say greet with a value of Jane right

and then it would say hello my name is

Jane so let me show you how we can set

that up I'm going to go ahead and delete

these two function calls so code pen

doesn't drive me insane and keep showing

those pop-ups after every keystroke okay

so back to the task at hand how can we

make this function flexible well it

starts with these parentheses right

after the name of our function within

these parentheses let's type the letter

X I'm just making that up because it's

easy to type but you could also say the

name or pizza or unicorn or anything so

by including this here we have created a

parameter named X and we can use this

parameter within the body of the

function let me show you what that means

so down here where we would actually run

or call the function I'm going to place

a slash slash right in front of it to

comment it out I'm only doing this so

code pen doesn't try to show the pop-up

after every couple of keystrokes but the

idea is within the parentheses for our

function when we call it if we include

quotes and a name so greet John this

data that we're passing along John we

want to be able to access that within

our function within the body of our

function so by including X here as a

parameter X is going to equal the value

of whatever gets passed in so in this

case it would be John so now within the

body of

function we can use that so type this

out with me let's get rid of your name

here so just have hello my name is space

and then the quote and then let's say

plus X and then let's also add on quotes

and a closing period to close out the

sentence so now down here if we've

removed the two forward slashes the

browser or code pen will know it's

actually run or executed again and here

we see hello my name is John and again

we don't need to use X as the parameter

so up in our function definition within

these parentheses we could say the name

and then within the body of our function

we would just say instead of X the name

and it works just the same okay so it's

a review down here we are calling our

greet function we are passing it in

arguments of John and then within our

function definition we've included a

matching parameter named the name that's

going to temporarily store that value

and then we can use it however we want

so down here we could call the greet

function again and say greet and pass it

a value of jane so when our code runs we

see the first one for John click OK

there's the one for Jane perfect now

before we move on I want to show you

that you can pass along multiple

arguments when you call a function let

me show you what I mean but first let's

comment out these two lines with slash

slash just so code pen doesn't drive us

insane with the alerts each time we

modify the function okay and let's

assume that we want to change our greet

function to now include the person's

favorite color so hello my name is blank

and then let's say plus pair of quotes

space and my favorite color is space and

then let's plus fav color and then add

in the quotes for the closing period

okay and then how would we use this well

down in the function calls when we say

greet and give it a value of John after

the quotes we can just say comma and

pass along a second argument so let's

say John's favorite color is blue and

then with Jane after her quotes comma

and let's say her favorite color is

green now if we're including two

arguments when we call the function we

want to be sure that we include two

parameters up in the function definition

so the first thing that gets passed in

is done name and then up here we could

say comma fav color right because that's

the name that I chose right here so as

soon as I remove these forward slashes

to uncomment out our code we see hello

my name is John my favorite color is

blue and hello my name is Jane and my

favorite color is green

perfect now practice makes perfect so

before we bring this lesson to a close I

want to write one more function with you

so first I'm going to comment out these

two lines so code pen doesn't keep

showing me those pop-ups okay and right

below that down here let's create a

function named triple me or you could do

double me or quadruple me but let's set

up a function so that when you pass it a

number maybe it triples that number so

imagine we could say triple me and then

as the argument just give it a number of

five and we would expect this function

to return a value of 15 so let's walk

through this so first we create the

function definition or the recipe for

the function so let's say function space

and then the name you can make one up

I'm calling it triple me and then

parenthesis and then after the

parenthesis curly brackets

okay now within the parentheses right

after triple me let's include X as a

parameter and now we can use that within

the body of the function now I do want

to let you know that within the body of

our function we do not need to call a

browser function like alert instead

actually a function in its purest form

simply return

a value so let's say return and then

what do we want to return well the

function is named triple me so why don't

we just say three and then asterisk for

multiplication and then whatever number

is getting passed in through the

argument and parameter right in this

case I chose X okay and then let's test

this function out so down here let's

create a variable that stores a number

so let's say let my favorite number

equal and then let's use our function

let's say triple me right we're calling

or executing the function and let's pass

it a value of 12 okay and then finally

we want to test things to make sure that

it's actually working so finally let's

just alert out the value of my favorite

number just so we can see it with our

own two eyes so finally we can say alert

my favorite number perfect and there we

see 36 right if you triple 12 you get 36

I know I moved a lot faster for this

second example of triple meet but I just

wanted to give you something to

experiment with and if you need to

re-watch this part a couple of times

that's okay if everything in this lesson

was not crystal clear and you're still a

bit confused that's okay

all you really need to have remembered

from this lesson is that there are

functions you can create a function by

saying function jump this creates the

recipe or the definition for that

function and then you are free to run or

call that function wherever you want

however many times you want and then of

course we learned that you can pass it

data inside the parentheses if this

concept is even a little bit familiar to

you if it's making even just a little

bit of sense then you're doing great

you're right on track and you're ready

to move on to the next lesson so we just

cover functions up next objects so what

in the world is an object let's keep our

momentum rolling let's answer that

question and I will see you in the next

lesson

the ten days of javascript is the first

chapter from my upcoming premium course

full stack javascript from scratch I'm

making these first 10 or 11 videos

freely available on YouTube and so for

the next 10 days I'm going to upload one

new video each day so stay tuned or if

you're watching this in the future all

the lessons are up so feel free to binge

watch the full premium course is not

available just yet but if you subscribe

to this channel you'll be notified as

soon as it's out or you're watching this

video in the future it's already

available enjoy

[Music]

Related Videos

Be the first to comment “The 10 Days of JavaScript: Day 2 (Features)”

Your email address will not be published.

There are no comments yet.