Thanks for having me here.

Um, so my name is William.

I'm Brazilian.

Andi.

I'm Mozilla Tech Speaker on.

I work for eBay.

Um, I like to play video games.

Uh, I'm bigot Mostar Hunter for fun.

So you will not talk about Mr Hunter seeing racy games or football.

Please reach me out off this talk.

Um, before I start my presentation, just a small disclaimer.

Um, all the proposal one on show here are under construction.

Ah, The main tincture in here is to give you a sneak peek about the future of JavaScript and try to help you to understand the use case and the pros and cons and off all of these teachers and show.

Um, they're amazing.

Amazing work that the sitter ninth community's doing to improve the language we love.

Um, some of some of this future mayor might not be present on javascript.

If you like on off this proposal.

If I have some concern off, you wanna express your, um, your support with some of these proposals, please use this link below an open issue or put the star and getting getting engaged.

So the agenda for today we're talking about a parent matching pipeline operator buying their A C T and give some opinions.

So whenever you see a rat border and the light is just my opinion, if you disagree, just dinner or talk to me afterwards.

That said so, uh, to give her back with background motivation off the first picture, I won't talk about a bit more about a conditional in jail escapes.

Nowadays, we have only three ways to do conditions.

Drivers in JavaScript We need to weigh, have f l statement, sweet statement and try and turn on the expression, uh, just to set up a common ground to everyone.

Um, an expression is something that evaluates down to a value and in statements.

It's just something that does something.

So NFL statement requires a condition which evaluates to true fear.

False e value.

Um, if the conditions true, it execute the adjustment block, and if it's not, it tries to execute decibel Elsa book if you have one, but it can get complicated.

Let's check it out for the section.

Amusing.

This of simple function that just tries to, um, return emoji that tries to reflect the team.

The current temperature, Um, as you can see here dysfunction.

It's just ah, if statement that if it's true, just returned the emoji, But Elsa's statement its again.

Another if statement.

So this is a way to concoct innate and chain one.

If statement off the daughter, um, it can get you can get really freaky because I'm not even talk about, uh, nest.

The first statement.

Right, Um, for this kind of special special checks, when they have a lot off small ah, a lot of options and the smoke all to react to, I think sweet statesman's a handy too.

So let's check how sweet statement works.

Um, so if statements Ah, it's good.

Whenever you have, you need to, um, react toe cup off choice or you have a lot off, um, a lot of chunk off Goto executes.

But when you have a multiple choices and the Justice Mao was more set of comments, I think sweet statement could be a good choice.

The sweet statement works as the falling given, um, next expression inside the princes and switch.

Um, it tries to match with each one off.

This case is statement, and when he matched with the 1st 1 Egypt That's the start important point of these, uh, um, block statement.

And then that's why we have the break statement.

Just tow.

Um, finalize the block.

So come back to our new trees.

Example.

Um, this is all would write something.

Um, using sweet statement.

There are two things I want to highlight here.

First.

I'm not used.

Ah, using a break statement, because just by using a return, I have, ah, my function stopping and at that at that line.

So that's why I don't need to use break.

And the second thing is, people may not get it, but the case statement accessorize expressions well, so we can put instead of just a constant that this is the most used, uh, used use case there.

You just put a constant and you put this expression that switch.

So then I stopped, like a used X on the constant and switch, and they used the expression there.

So the tornado potato become popular recently because, uh, for the functional developer fen Andi, who tried to write the code with as much expressions possible, it basically works.

Is the falling given a condition?

If this if this condition is true, it runs the 1st 1st book after the question mark.

If it's not, it's false.

It runs what we have after Colin and since turning expression eternity is the expression we can write that function using our function and that tries to make everything more Quincy's.

But then you have a cold like this and I don't know.

You feel like you're under like, but there are a lot of people that, like this kind of coat, I'm not heated yet.

I'm just showing you.

And as you can see, we have three ways to the conditions nowadays in Javascript.

But what's the matter of the 4th 1?

Could you imagine what would happen if you mix if statement with sweet statement and the power off destruction?

Ah, just structuring, veteran, very matching to understand how pregnant match works.

Um, I need to use a toy example to be able to explore.

Um, the parent matches statement.

So, um, let's suppose I have a list of shapes and I need to look in.

Detect all the circles Red scare square and big blow triggers.

How could they do this nowadays with if statement, um, just to give, um ah, small context.

Um, this is the simple entry, and this is one of potential a solution for the problem.

It's tricky because it can grow as the requirements grows.

Right.

You can keep put if in there as more the more you have for their requirements.

And this this is all we can do.

Ah, there's using, uh, pattern matching.

Because of the time here, I would just explain the car concepts.

And if you were interested in it, you can either check the documentation on the get her every poster or talk to me afterwards.

Um, this is the case statement which defines the start of the pattern matching, um block.

It receives only one value as input.

And these values called case expression.

Then we have the the winkles, which is divine.

Some parts.

I will just showed you up.

Then today again, you can have more in the speck in Ah, repose story.

Okay, um, in this first winkles, we are We have a splitting to like the first part before the error is the match pattern.

And the second part is the wing closed body.

So the match burner better re execute the body whenever the shape of the pattern match the shape.

Perfect expression in this case, every single object that has the type of circle.

Um And then, to achieve the second you use case, I can just create another pattern which is type square color red.

And and this is step.

You see, if statement in the middle is this cold match word, it means that even though the match match with the object, if the if statement which is called magic work returns false, it will not executed the block and less cases.

Whenever we have a stand alone, very able, it matched everything.

So it's kind of the full statement for for sweets case.

But the big difference, Uh, checking our, um, checking, uh, or nature Example.

Er this is how we should work with Baron matching.

It's nice.

And And if somehow we saw this talk before, things would be the part of will start to complain why part of matches is a statement.

But then the sitter nine committee just changed this so very matching all languages is an expression.

And being a statement in javascript will be tricky because we will know we will.

It will be difficult toe decide whether to use barren matching or just a bunch of F l statement.

But then, if now that carry matches, Justin's an expression.

It's become so powerful to ah as, um um um, substitute for Fortuna expression.

And now they're trying to assess if we need to use if you need to have the wedding beginning off the wing claws or we just need to use the latte, conserve our so to give example, this is the way there discussing that the syntax may look like.

Do you like it?

You don't like it.

You have a better year again.

Go to the Ripper's three incoming there.

Okay, before introduced the next proposal.

Let's check whole function.

Composition.

What dysfunction Composition?

Holly works in JavaScript nowadays.

Um, so function compositions are mad American mathematical concept that allows you to combine multiple functions toe, create a new function, so to help you to get the picture.

Let's cook a bento.

Ah, I came in with this example because it's easy to easier to reason about food, and I like to use emoji.

So, uh, this is just a function that creates a bento falling secretion, secretions, years off steps and where the next steps needs toe received the results from the previous steps.

So in this case, to achieve these, I need to have these intermediate intermediary Very Abel's just to hold the data to pass to the next function.

But I don't I don't want to use this intermediate values just for these, right?

But I can go.

I can go and right this kind of codes, which is not so easy to reason about, because the more we compose, the bigger is That is the invitation we have.

And the way we read the code is different the way the data flow because the data flow for the from the innermost function to the altar most function and you read this data usually talked on that left and right.

Right.

But I can use, um, load ash flow for achieving a similar effect and make this more readable or use um, room the pipe for this, or even create my custom vanilla job escaped function.

So it wouldn't be nice to have all of this couple.

It somehow incorporated javascript without having to rely on this external Emory or create, um, custom homemade functions.

So let's bring the second JavaScript couples over the store pipeline operator.

So, um, pipeline operators this sink like sugar for creating, um streamlines chain off function in the readable and then function manner it's backwards compatible and provides alternative for X and building prototypes.

So, um, our initial example was written like this Snippets, But using pipeline operator, uh, this will look more like this.

And then this will be the sugar to this.

It's nice, right?

But what if one off my chain and functions needs one next sort of a party meter?

Let's suppose that the ad fish function needs toe receive a second part Amir, which is the type of fish I want to add them to.

My secret men agree.

Um, how should we add this to the popular in chain?

So for achieve this became rap dysfunction with a narrow function.

So then we received their only their results for the previous step and then add this to the next step and notes that in the minimal propose, the arrow function has to be wrapped with parents is that there was We will have, ah syntax error.

But the bento is not only about Negri.

We need to put some stuff in it, right?

I know how to don't agree.

It's kind of just like smash some rice and put the proficient top of it.

But it's simple, but I just realized that I don't know how to assemble Bento, and they need to somehow delegate this to another function.

Um, just go out there.

I don't know how to assemble the Bento, so I will delegate to this toe naysaying function that we're creating the same day bent off for me.

But how can they do this?

Using popular an operator in ST right, I could use a weights toe, await dysfunction.

But that is a problem in it.

And note the line for is ambiguous and explain why.

No, um, if the implementation our ad mento, it's just a straight for a sink function.

I wanna have this line, the sugar toe, the line six, like this one.

But if I have uncommon implementation, which behaves like a factory that returns me ah, function that I need to call passing the negative to create the bento.

I would like to have this, um, line be the sugar to this line.

Six.

Uh, the problem is in the minimal proposal.

There is no guarantee that I can That that awaits step.

Could be the sugar 92 line five or six or three or five.

As you can see, the minimal proposed has some caveats.

That means we need to.

Others in orderto have this.

Ah, proposal.

Progress in the two seater nine proposal pipeline.

Currently, we have two competing proposals that tries to solve it is in different ways.

So I wouldn't wanna explain first the smart pipeline proposal.

So as you can see here, this is how we could somebody's uses.

Mark is Mark Pipeline and you can see that we have two styles there.

Whenever you have, like a just a straight for functional call.

You you use the Barry Barry style and we'll never need Thio do like passing X are part of meters or use our weights or the use.

It is in a different way.

You can use a top star.

There are some rules.

Um, whenever you need to use parenthesis and square brackets, you have to use top castile.

Otherwise, you have a sink of syntax, error and the sharpies you saw in the previous step the this sharp tokens is just a placeholder for the result of the previous step.

And it's not finally sharp.

It's subject to change.

Discuss if the shark talk is the best way.