In this lecture, we're going to explore the two last creation operators there, the of and from operators,
which allow us to loop through values synchronously.
The question is why do we need two operators for performing the same task?
Let's explore the differences between these operators.
We will start with the of.
Operator.
The above operator will loop through the values passed into it at the top of the file.
We will replace the from event operator with the of operator the variable or we need to be updated to.
The of operator has an unlimited number of arguments we can supply this operator with various values,
for this example.
Let's pass and the numbers one through five.
Inside the console, the numbers are logged in the order they were passed in the above operator is completely
synchronous.
We can improve this by logging a message after subscribing to the observable, let's log a message.
In the console, the message is long after the values have been logged.
Keep in mind, the values are not emitted until a subscription occurs.
The above operator will not immediately push the values we supply into its arguments.
Once the values have been pushed, the above operator will complete the observable.
This behaviour is essential to understand.
Previously, every creation operator we've talked about would not complete the observable on our behalf.
There are creation operators, which will complete the observable.
The of operator is an example of an operator that performs the complete phase.
Let's update our observer to verify the completion of the observable.
Replace the console.
Log in the subscriber function with an object.
First, let's define the next function it along the value passed into it.
Next, we will add the complete function, which does not receive a value.
We will log a message to notify us of the observables completion.
After every value has been emitted, the message from our complete function appears in the console,
the of operator will always complete the observable after iterating through each value we add to the
function.
There is one problem with this operator.
What if we pass in an array?
Let's pass in an array of numbers instead of passing them in as individual arguments?
The above operator does not loop through the array.
The operator will log their way in a single log.
We're looking for an operator to flatten our array.
Flattening is a topic you will come across when discussing arrays or objects.
The meaning of flatten is to transform a deeply nested array into a simpler array.
Here's an example of how an array can be flattened.
On the left, we have a multi-dimensional array.
We may want to loop through every value, including the nested values, before looping through the array.
We can flatten the array on the right.
The array is completely flattened.
It does not have a single child array.
There's a different operator we need to use if we want to loop through an array called from the from
operator can work with complex types.
We can pass in arrays, objects, promises and intervals.
It's very intelligent because it can work with various types of values.
It can flatten an array by pushing each item in the array.
Let's give it a try.
First, we will update the import statement to include the from operator.
Next, let's update the variable to use the from operator.
Unlike before.
Each item in the array is pushed, the array is not being pushed all at once.
The from operator can even flatten the screen.
I'm going to pass in my name.
From the console, the from operator will output each letter in my name, the from operator is pretty
powerful.
On top of handling arrays, we can pass in promises.
In the resource section of this lecture, I provide a link to a site called JSON Placeholder.
It's a tool that offers a free fake rest API, we can take advantage of this tool for performing requests.
If we scroll down, we'll find some examples.
Let's copy the fetch function from the example.
Next, let's paste it into the from operator function.
The council will output the response from the fetch function.
Technically, the fetch function returns a promise.
However, the from operator will flatten or wrap their response for us.
Interestingly, the from operator has completed the observable after the request has been made.
It was able to wait for the promise to resolve.
As you can see, the from operator is very powerful.
It's time to move on from creation operators.
In the next few lectures, we are going to start exploring pipe able operators.