All language subtitles for 10. [Dart] Arrow Functions

So previously we've talked about all sorts of different functions with inputs and outputs.
1

But right up here, we've got a function but the syntax looks a little bit unfamiliar.
2

What is this arrow anyways?
3

Previously we said that this line of code is equivalent to basically writing something like this.
4

We have a function that's code in main, and inside this function, we carry out a single instruction which
5

is to run our app. And the app that we want to run is our Xylophone app right here.
6

And once that run app is done, then we have our semicolon to cap off the line and this is exactly the
7

same as what we had before.
8

But what is that arrow and what does it do?
9

Well the arrow which we create using a equals sign and a right angle bracket, in Dart, is known as the
10

arrow syntax. And you might hear other people referring to it as a fat arrow to distinguish it from a
11

slim arrow, I guess.
12

But the arrow syntax is used when the function body,
13

so the part that's inside the curly braces right after the name of the function, with this part is only
14

a single line of code.
15

Heading back to a dartpad so I can show you how this works.
16

Let's say that we have our add function which returns an integer. And all that it does is it adds the
17

numbers 5 + 2. And then it returns 5 + 2 as the output which is going to be 7 and
18

inside our main function, all that we do is we created integer variable which is called result, and we
19

set it equal to the output of our add function.
20

Now clearly at this point, if we print our result, we'll just get 7 printed in the console right
21

here. 5 + 2 = 7.
22

That becomes the result over here.
23

And so result = 7, and when we print this line, this is what we get.
24

Now we can also represent this function, because it only has a single line of instructions,
25

we can also use our arrow syntax. So we can write int add and after the parentheses, we can add our arrow
26

and we can omit the word return, but simply give the expression or what it needs to do.
27

So this is exactly the same to the computer as this.
28

And if I comment this out and I click run again, you'll see that when it calls add it's going to use this
29

version and it does exactly the same thing.
30

So that arrow syntax is equivalent to having the curly braces around whatever comes after.
31

And it also is equivalent to having that return keyword in front of this line of syntax.
32

Now remember, the arrow syntax only works if you have a single line of instructions.
33

So for example, you can't for example have a print statement here as well. Print
34

'I got called'.
35

So now this function has two lines, and we can't combine that into the end of our arrow syntax. So we
36

can't for example put it here and try to run both lines.
37

If I go ahead and comment this out and click run, you can see that I get all sorts of errors.
38

So I'm only allowed a single line expression. But even if I'm using the arrow syntax, I can still have
39

inputs inside here.
40

So for example, if I didn't want to add 5 to 2 every single time, which is a bit of a useless function
41

if you think about it, let's try and add our n1 to our n2 and we return simply n1 + n2.
42

Now in the arrow syntax version, we would represent this in much the same way inside the parentheses
43

after the word add, we add our inputs in exactly the same way.
44

So I'm just going to copy and paste it in there. And then after the arrow, we place our single line of
45

instructions, which is basically just n1 + n2.
46

So this also works and this is exactly the same as this line of code.
47

So if we added our numbers let's say let's add 3 to 11, and we hit run.
48

You can see that our function, using the arrow syntax, returns the number 14 which gets printed in here.
49

So now if we head back to Android Studio, we can see that using the same principles, we can get rid of
50

are curly braces.
51

And even though in this case, this function doesn't actually return anything because it has a void data
52

type,
53

we can still use that arrow syntax to say that this is the body of this function.
54

This is the single line of instructions which need to be carried out when this function gets called,
55

which is simply to run the app
56

that is our Xylophone app.
57

So next time when you see this arrow syntax, you won't be confused as to what it does anymore.
58

And after this module, hopefully you now have a good grasp of how packages work in Flutter, how we can import
59

other people's code into our own projects and leverage the code that they've already written to give
60

our apps more functionality without having to write a lot more code.
61

We've also explored how functions work in all three flavors in Dart.
62

And we've built out a music app which is created using one of these functions that we learnt about. So
63

that's all from me and I'll see you on the next module.