1
00:00:00,540 --> 00:00:06,620
Hi there and welcome, this lesson is going to be about JavaScript immediately invoked function expressions

2
00:00:06,620 --> 00:00:14,370
so short for I, I f e and I'm going to be showing you in this lesson what they are and how they work.

3
00:00:14,700 --> 00:00:19,290
So I, Effy, are immediately invoked function expressions.

4
00:00:19,470 --> 00:00:23,820
So this is a JavaScript function that runs as soon as that is defined.

5
00:00:23,970 --> 00:00:27,660
And there are a lot of uses for these types of functions.

6
00:00:27,880 --> 00:00:34,890
It's a design pattern which is also known as self executing anonymous function, and it contains two

7
00:00:34,890 --> 00:00:36,090
major parts.

8
00:00:36,390 --> 00:00:37,560
There's some examples.

9
00:00:37,620 --> 00:00:41,220
Notice that it's also an anonymous function, so there's no name for it.

10
00:00:41,430 --> 00:00:48,450
And with the rounded brackets at the end of the function call, that allows it to immediately invoke

11
00:00:48,450 --> 00:00:49,420
the function.

12
00:00:49,440 --> 00:00:54,900
So there's also another example here where we're setting a variable when it comes to the scope of the

13
00:00:54,900 --> 00:01:00,960
variables so it can contain all of the variables within the scope of the function as it's being invoked.

14
00:01:00,960 --> 00:01:03,930
For example, where we've got first name equals Lowrance.

15
00:01:04,110 --> 00:01:07,620
It can't be seen outside of that function.

16
00:01:08,070 --> 00:01:11,160
There's also when we're declaring a function.

17
00:01:11,190 --> 00:01:12,630
So here we've got result.

18
00:01:12,810 --> 00:01:17,010
We can also immediately invoke that function, returning the first name.

19
00:01:17,160 --> 00:01:20,880
So in this case, the first thing that's going to be returned back is Lowrance.

20
00:01:21,220 --> 00:01:26,130
And you can also posehn Lawrence as a parameter into the function.

21
00:01:26,130 --> 00:01:27,780
When the function is being invoked.

22
00:01:27,870 --> 00:01:33,330
It's going to take that value of Lowrance as first name and it's going to output into the console the

23
00:01:33,330 --> 00:01:34,350
first name value.

24
00:01:34,530 --> 00:01:36,510
You can try this out within your editor.

25
00:01:36,510 --> 00:01:43,200
So there is a challenge for this lesson as well, and that's to output your name in the console using

26
00:01:43,200 --> 00:01:46,080
an immediately invoked function expression.

27
00:01:46,260 --> 00:01:50,220
And there's an example of the code that you can use in order to accomplish this.

28
00:01:50,490 --> 00:01:56,550
So go ahead and pause the video and I'll walk you through the solution to this challenge, as well as

29
00:01:56,550 --> 00:01:58,930
the other expressions that we just looked at.

30
00:01:59,040 --> 00:02:00,770
So what's the function itself?

31
00:02:00,780 --> 00:02:02,570
So they are anonymous functions.

32
00:02:02,820 --> 00:02:07,230
The structure works the same way where we've got a function and then we've got the block.

33
00:02:07,230 --> 00:02:10,080
A code is between the curly brackets.

34
00:02:10,290 --> 00:02:11,970
So the code block is in here.

35
00:02:12,090 --> 00:02:15,680
And then this is what we want to happen within this function.

36
00:02:15,690 --> 00:02:17,190
We can have the welcome output.

37
00:02:17,190 --> 00:02:22,110
And the way that we need to write the functions is we need to wrap it with the rounded brackets.

38
00:02:22,110 --> 00:02:27,260
And this alone, if you notice, that won't do anything yet because we're not invoking the function.

39
00:02:27,510 --> 00:02:33,000
So the last and final part of that function is to invoke it with the rounded brackets.

40
00:02:33,270 --> 00:02:38,550
So just as when you're creating a function and then you invoke the function with the round of brackets,

41
00:02:38,640 --> 00:02:39,720
it works the same way.

42
00:02:39,840 --> 00:02:45,600
And now you can see that that message gets output into the console so we can first name so passing in

43
00:02:45,600 --> 00:02:49,230
a variable and then adding in your name into the parameters.

44
00:02:49,410 --> 00:02:55,820
And then we can use the value that's been passed into the parameters and output that into the console.

45
00:02:56,010 --> 00:03:00,540
So when we refresh it, we get that variable being passed and notice as well.

46
00:03:00,540 --> 00:03:07,050
It works the same way again, as if we were to invoke the function and pass in an argument within this

47
00:03:07,050 --> 00:03:07,770
type of format.

48
00:03:07,770 --> 00:03:10,500
So it works the same way you can pass in multiple arguments.

49
00:03:10,680 --> 00:03:16,320
So all you have to do is comma, separate them and the structure is exactly the same as it was initially.

50
00:03:16,350 --> 00:03:21,060
So we also have the ability to create a function expression.

51
00:03:21,060 --> 00:03:22,680
I'm going to name it result.

52
00:03:22,680 --> 00:03:28,650
And using the immediately invoked function, we're going to return back a value here.

53
00:03:28,800 --> 00:03:33,480
And then this is what we're actually going to see being returned back as a value of result.

54
00:03:33,810 --> 00:03:40,630
So whatever, we're returning back and if we do Hello World and then we console logout the value of

55
00:03:40,640 --> 00:03:44,610
result, you're going to see that because this function is immediately invoking.

56
00:03:44,610 --> 00:03:49,710
And there was one thing that we did miss out here, and that's the rounded brackets to invoke the function.

57
00:03:49,830 --> 00:03:51,210
So we get Hello World.

58
00:03:51,420 --> 00:03:57,450
So this is the same thing as if we did result and we did the invoking of the function down here, we

59
00:03:57,450 --> 00:03:58,740
would get the same result.

60
00:03:58,890 --> 00:04:03,750
And if we missed the rounded brackets, we actually get the function code being returned back.

61
00:04:03,960 --> 00:04:06,060
So you can see that as well within the console.

62
00:04:06,210 --> 00:04:10,920
So if we're not invoking the function, it's not actually running through the code, it's just returning

63
00:04:10,920 --> 00:04:14,520
back all of the code that's associated with that function.

64
00:04:14,670 --> 00:04:18,100
And we do need those rounded brackets in order to invoke the function.

65
00:04:18,210 --> 00:04:24,060
Coming up next is going to be something new with Essex, where we're going to look at aero functions

66
00:04:24,060 --> 00:04:26,730
and this is going to be a short format for writing functions.

67
00:04:26,940 --> 00:04:27,870
So that's still to come.
