1
00:00:00,360 --> 00:00:08,160
In this lecture, we're going to explore the two last creation operators there, the of and from operators,

2
00:00:08,370 --> 00:00:11,490
which allow us to loop through values synchronously.

3
00:00:11,910 --> 00:00:17,010
The question is why do we need two operators for performing the same task?

4
00:00:17,260 --> 00:00:20,670
Let's explore the differences between these operators.

5
00:00:21,180 --> 00:00:22,840
We will start with the of.

6
00:00:22,860 --> 00:00:23,670
Operator.

7
00:00:24,060 --> 00:00:29,860
The above operator will loop through the values passed into it at the top of the file.

8
00:00:29,880 --> 00:00:37,770
We will replace the from event operator with the of operator the variable or we need to be updated to.

9
00:00:40,480 --> 00:00:48,100
The of operator has an unlimited number of arguments we can supply this operator with various values,

10
00:00:48,400 --> 00:00:49,510
for this example.

11
00:00:49,660 --> 00:00:52,660
Let's pass and the numbers one through five.

12
00:00:55,230 --> 00:01:02,760
Inside the console, the numbers are logged in the order they were passed in the above operator is completely

13
00:01:02,760 --> 00:01:03,630
synchronous.

14
00:01:03,840 --> 00:01:10,410
We can improve this by logging a message after subscribing to the observable, let's log a message.

15
00:01:12,930 --> 00:01:17,430
In the console, the message is long after the values have been logged.

16
00:01:17,730 --> 00:01:22,380
Keep in mind, the values are not emitted until a subscription occurs.

17
00:01:22,740 --> 00:01:28,590
The above operator will not immediately push the values we supply into its arguments.

18
00:01:29,130 --> 00:01:34,440
Once the values have been pushed, the above operator will complete the observable.

19
00:01:34,830 --> 00:01:37,620
This behaviour is essential to understand.

20
00:01:37,950 --> 00:01:44,970
Previously, every creation operator we've talked about would not complete the observable on our behalf.

21
00:01:45,420 --> 00:01:49,230
There are creation operators, which will complete the observable.

22
00:01:49,680 --> 00:01:55,380
The of operator is an example of an operator that performs the complete phase.

23
00:01:56,070 --> 00:02:01,020
Let's update our observer to verify the completion of the observable.

24
00:02:01,450 --> 00:02:02,940
Replace the console.

25
00:02:03,270 --> 00:02:06,360
Log in the subscriber function with an object.

26
00:02:08,740 --> 00:02:14,050
First, let's define the next function it along the value passed into it.

27
00:02:16,730 --> 00:02:21,800
Next, we will add the complete function, which does not receive a value.

28
00:02:22,010 --> 00:02:26,210
We will log a message to notify us of the observables completion.

29
00:02:28,860 --> 00:02:35,130
After every value has been emitted, the message from our complete function appears in the console,

30
00:02:35,610 --> 00:02:42,330
the of operator will always complete the observable after iterating through each value we add to the

31
00:02:42,330 --> 00:02:42,900
function.

32
00:02:43,350 --> 00:02:45,630
There is one problem with this operator.

33
00:02:45,990 --> 00:02:47,820
What if we pass in an array?

34
00:02:48,150 --> 00:02:54,360
Let's pass in an array of numbers instead of passing them in as individual arguments?

35
00:02:56,990 --> 00:03:00,080
The above operator does not loop through the array.

36
00:03:00,470 --> 00:03:03,800
The operator will log their way in a single log.

37
00:03:04,010 --> 00:03:07,040
We're looking for an operator to flatten our array.

38
00:03:09,780 --> 00:03:14,550
Flattening is a topic you will come across when discussing arrays or objects.

39
00:03:15,030 --> 00:03:20,370
The meaning of flatten is to transform a deeply nested array into a simpler array.

40
00:03:20,880 --> 00:03:23,820
Here's an example of how an array can be flattened.

41
00:03:24,030 --> 00:03:27,210
On the left, we have a multi-dimensional array.

42
00:03:27,600 --> 00:03:34,080
We may want to loop through every value, including the nested values, before looping through the array.

43
00:03:34,200 --> 00:03:36,810
We can flatten the array on the right.

44
00:03:36,960 --> 00:03:38,850
The array is completely flattened.

45
00:03:39,090 --> 00:03:41,760
It does not have a single child array.

46
00:03:44,510 --> 00:03:50,690
There's a different operator we need to use if we want to loop through an array called from the from

47
00:03:50,700 --> 00:03:53,330
operator can work with complex types.

48
00:03:53,600 --> 00:03:58,400
We can pass in arrays, objects, promises and intervals.

49
00:03:58,700 --> 00:04:03,120
It's very intelligent because it can work with various types of values.

50
00:04:03,470 --> 00:04:07,310
It can flatten an array by pushing each item in the array.

51
00:04:07,970 --> 00:04:09,230
Let's give it a try.

52
00:04:09,440 --> 00:04:14,390
First, we will update the import statement to include the from operator.

53
00:04:16,850 --> 00:04:21,230
Next, let's update the variable to use the from operator.

54
00:04:23,820 --> 00:04:24,910
Unlike before.

55
00:04:25,080 --> 00:04:30,420
Each item in the array is pushed, the array is not being pushed all at once.

56
00:04:30,810 --> 00:04:33,800
The from operator can even flatten the screen.

57
00:04:34,230 --> 00:04:36,060
I'm going to pass in my name.

58
00:04:38,510 --> 00:04:44,870
From the console, the from operator will output each letter in my name, the from operator is pretty

59
00:04:44,870 --> 00:04:45,560
powerful.

60
00:04:45,980 --> 00:04:49,460
On top of handling arrays, we can pass in promises.

61
00:04:49,700 --> 00:04:55,490
In the resource section of this lecture, I provide a link to a site called JSON Placeholder.

62
00:04:57,970 --> 00:05:04,690
It's a tool that offers a free fake rest API, we can take advantage of this tool for performing requests.

63
00:05:05,380 --> 00:05:08,110
If we scroll down, we'll find some examples.

64
00:05:08,350 --> 00:05:11,140
Let's copy the fetch function from the example.

65
00:05:13,540 --> 00:05:17,230
Next, let's paste it into the from operator function.

66
00:05:19,730 --> 00:05:23,060
The council will output the response from the fetch function.

67
00:05:23,300 --> 00:05:26,360
Technically, the fetch function returns a promise.

68
00:05:26,540 --> 00:05:31,160
However, the from operator will flatten or wrap their response for us.

69
00:05:31,430 --> 00:05:37,640
Interestingly, the from operator has completed the observable after the request has been made.

70
00:05:37,970 --> 00:05:40,670
It was able to wait for the promise to resolve.

71
00:05:41,150 --> 00:05:44,750
As you can see, the from operator is very powerful.

72
00:05:44,990 --> 00:05:47,870
It's time to move on from creation operators.

73
00:05:48,110 --> 00:05:53,030
In the next few lectures, we are going to start exploring pipe able operators.