1
00:00:00,600 --> 00:00:01,860
Hello and welcome.

2
00:00:01,890 --> 00:00:08,580
In this video I will be introducing you to JavaScript functions.

3
00:00:08,580 --> 00:00:19,290
Functions are a way of packaging functionality that you wish to reuse.

4
00:00:19,290 --> 00:00:33,000
So a function basically can refer to a block or a piece of code that is designed to perform a particular

5
00:00:33,450 --> 00:00:35,580
task.

6
00:00:35,580 --> 00:00:44,710
A javascript function is executed when some theme invokes it but invoke a mean cause it.

7
00:00:44,730 --> 00:00:52,600
So in order to activate a function after it has been created you need to invoke it or call it.

8
00:00:52,610 --> 00:00:57,050
And usually you do that by its name.

9
00:00:57,090 --> 00:01:07,920
JavaScript has many built in functions that you can use a very popular one is the alert which enables

10
00:01:07,920 --> 00:01:11,920
you to create pop up box messages.

11
00:01:12,030 --> 00:01:20,520
Javascript also enables you to create your own functions and the way you create your functions in JavaScript

12
00:01:20,760 --> 00:01:33,330
piece by using the function keyword functions often takes arguments arguments are bits of data that

13
00:01:33,330 --> 00:01:38,100
the functions need in order to perform or do their jobs.

14
00:01:38,640 --> 00:01:48,180
And these arguments are placed inside parentheses which are separated by commas if there are more than

15
00:01:48,180 --> 00:01:50,210
one argument.

16
00:01:50,670 --> 00:01:59,550
So inside my console I have created a function and the way you created function you basically have to

17
00:01:59,550 --> 00:02:05,220
type in the keyword function followed by the name you want to call the function when you are creating

18
00:02:05,220 --> 00:02:06,290
function.

19
00:02:06,330 --> 00:02:16,110
It's very nice to name your functions as closely as possible to the task that the function is meant

20
00:02:16,110 --> 00:02:17,490
to perform.

21
00:02:17,490 --> 00:02:25,200
See my function of code it add num which indicates that this function is going to be used to add numbers

22
00:02:25,200 --> 00:02:26,130
together.

23
00:02:26,130 --> 00:02:32,130
So when you create a function you furthermore have to type in the word function followed by a space

24
00:02:32,640 --> 00:02:38,880
then the name of the function and then you have to have parentheses sometimes the parentheses can be

25
00:02:38,880 --> 00:02:43,530
empty but you must have that in order to create a function.

26
00:02:43,800 --> 00:02:48,750
And then if you've got any arguments you pass the argument inside the parentheses.

27
00:02:48,750 --> 00:02:56,040
If there's more than one argument you separate them by a comma you can see here number one is an argument.

28
00:02:56,130 --> 00:02:58,800
Number two is referred to as an argument.

29
00:02:59,010 --> 00:03:05,490
And once you specify the arguments if there are any inside the parentheses and then you have this curly

30
00:03:05,490 --> 00:03:12,930
braces you've called the opening curly braces here and the closing curly braces and inside in between

31
00:03:12,930 --> 00:03:23,400
the curly braces is the block of code that has to be executed when the function is invoked or called.

32
00:03:23,400 --> 00:03:29,480
Notice here I've also got a return statement here.

33
00:03:29,550 --> 00:03:38,030
Basically the return statement tells the browser to return the result variable out of the function.

34
00:03:38,490 --> 00:03:41,310
So it is available to use.

35
00:03:41,400 --> 00:03:41,830
All right.

36
00:03:41,850 --> 00:03:51,530
This is necessary because variables defined inside functions are only available inside those function.

37
00:03:51,540 --> 00:03:54,080
This is called Variable Scope.

38
00:03:54,240 --> 00:04:01,800
So when you create the variables variables can be available throughout the application or throughout

39
00:04:02,220 --> 00:04:10,500
the scope which is known as global so if you create a variable and you declared outside the function

40
00:04:10,890 --> 00:04:13,150
that makes that variable global.

41
00:04:13,150 --> 00:04:20,070
That means you can use it anywhere within the block of code but if you define a variable inside a function

42
00:04:20,070 --> 00:04:27,840
like that on here I've defined a variable code result and offset that variable result to equals to whatever

43
00:04:27,840 --> 00:04:35,360
value is passed as number one and add added to value past as number 2.

44
00:04:35,430 --> 00:04:44,130
So this variable is no core to this function so it can only be accessed inside this function.

45
00:04:44,130 --> 00:04:53,580
So when a variable exists inside the function once the function has been executed the variable basically

46
00:04:53,610 --> 00:05:00,860
is destroyed or you know it's it becomes on you you can't use it again wants to function has been called

47
00:05:00,860 --> 00:05:02,940
thus it is served its purpose.

48
00:05:03,050 --> 00:05:11,120
However if you want the variable to be available you have to use the written statement that way it would

49
00:05:11,120 --> 00:05:20,570
tell the browser to return the result of the variable out of the function so that it is available to

50
00:05:20,570 --> 00:05:21,950
use.

51
00:05:21,950 --> 00:05:27,440
You only do this for variables deci defined inside the function.

52
00:05:27,620 --> 00:05:34,940
The unknown has a local variable scope so variables defined outside the function on global.

53
00:05:34,940 --> 00:05:40,590
So you can access them from anywhere within the US within the javascript code.

54
00:05:40,820 --> 00:05:50,110
Whereas variables defined inside a function like I have done here are referred to as a local scope variable.

55
00:05:50,450 --> 00:05:58,950
So here I have defined this variable court ad add num now to make or to invoke this function.

56
00:05:58,970 --> 00:06:09,230
Now that I've created it all I need to do is call the function button his name which is and NUM and

57
00:06:09,230 --> 00:06:17,090
then I have to you must add the parentheses and then I'm going to pass it to values because I've got

58
00:06:17,090 --> 00:06:18,560
two arguments there.

59
00:06:18,620 --> 00:06:28,380
So if I say 10 comma 20 and I close parentheses and I press enter.

60
00:06:28,940 --> 00:06:34,790
Now add 10 and 20 together and give me 30.

61
00:06:34,820 --> 00:06:35,180
All right.

62
00:06:35,180 --> 00:06:41,740
So any time I want to use this function all I need to do is call the function by his name and then passing

63
00:06:42,470 --> 00:06:43,510
two arguments.

64
00:06:43,520 --> 00:06:50,980
You can see it sees me having to rewrite the function again I've already written it defined it.

65
00:06:51,140 --> 00:06:57,680
All I need to do is just call it passing whatever arguments I need for the function.

66
00:06:57,690 --> 00:07:02,420
So for example you can create the same page maybe for multiplication or anything.

67
00:07:02,480 --> 00:07:12,020
This is just a basic illustration to show you the importance of functions so you can create functions

68
00:07:12,020 --> 00:07:15,040
for different kinds of task or to do different things.

69
00:07:15,050 --> 00:07:20,570
But once you've created a function you don't have to write all the code again or you need to do is just

70
00:07:20,570 --> 00:07:25,260
call the function by its name and passing whatever arguments you need to do.

71
00:07:25,280 --> 00:07:32,300
Like I've passed in here and then you know the function executes if I want to add passing more argument

72
00:07:32,320 --> 00:07:44,480
and I just call the function by e name and policy it's a 6 and 6.

73
00:07:44,890 --> 00:07:52,160
Now at 6 and 6 together it will return to 12 because I've already done written all the the functions

74
00:07:52,160 --> 00:07:52,860
here.

75
00:07:53,090 --> 00:07:59,720
So all I need to do is call it base name and passing the arguments so that's basically how you create

76
00:07:59,870 --> 00:08:05,380
and use a function functions a very powerful concept in JavaScript.

77
00:08:05,990 --> 00:08:10,220
I'm only in a barely scratched the surface here.

78
00:08:10,250 --> 00:08:14,970
This is just an introduction to javascript function.

79
00:08:14,960 --> 00:08:18,970
There's a lot more to it so that's it for this video.

80
00:08:18,980 --> 00:08:21,170
Thank you for watching and bye for now.