How to use arrow functions! (Tutorial)

Arcade Help
,
1

For the few of us here that use JavaScript, I’d like to tell you about a neat little thing you can do that’s INSANELY useful: the arrow function (aka lambda function)!

An arrow function acts exactly as a function; you can give it parameters and you can run whatever code you want with those parameters, but it ALSO acts like a variable! It’s basically a one-time-use function that you can define as a variable, and every time that variable is called, that code runs. You can create one by typing () => {}. An example of how to make one is:

let numberOperation = (a: number, b: number) => {return a + b}

Now, if you were to call game.splash(numberOperation(1, 2), it would show 3! What’s great about an arrow function is that you can change it completely at any time. If you no longer wanted it to add the numbers, and wanted it to subtract it instead, you can simply do:

numberOperation = (a: number, b: number) => {return a - b}

and it’ll completely change to that. This will let you easily make modular features that change frequently.

That’s still not the best part of this feature, the best part is that you can put it into an array! Yes, an array can be made out of arrow functions, and if you call the array at a specific index, the function at that index will run! This is incredibly useful for things like a custom main menu, move sets, varying actions, and more! To make one, you simply do what I did before, but in an array like so:

let listOfFunctions = [
     (a, b) => {return a + b},
     (a, b) => {return a - b},
     (a, b) => {return a * b},
     (a, b) => {return a / b}
]

Now, if you call listOfFunctions[2], a and b will be multiplied, as that’s the function that’s at that index. You can do a lot more with this than just numbers, obviously. Everything from sprites, tilemaps, and custom classes can be put into an arrow function, and any parameter that works in a regular function works in this, too! The possibilities are endless! This doesn’t even cover the fact that you can use an arrow function as a parameter in ANOTHER function, and that’s its own can of worms…

8 Likes
2

yeah nesting function is a fire part of js next cover game.pushScene() and game.popScene() I don’t think many js users know what it does

3

Is there a diference between (a: number) => {return a} and function(a:number){return a}? From what you said it seems like its the same thing just written diferently

1 Like
4

The arrow notation is a shorthand. The longer version is the original syntax, and also why these are called anonymous functions, since you don’t have to give them names.

4 Likes
5

is the original syntax just a normal, standard function?

6

They’re both functions, but they’re a special kind of function that is called as part of a larger construct. Take, for example, game.onUpdateInterval(), which takes a function as a parameter:

export function onUpdateInterval(period: number, a: () => void): void {

To pass a function to another function, you can do it three different, but equivalent, ways in TypeScript (and, actually, in JavaScript in general) :

Method One: Named Function

The first way to pass a function as a parameter is to create the function and then use its name.

function moveSprite(): void {
   mySprite.x -= 10
   mySprite.y += 5
}

game.onUpdateInterval(750, moveSprite)

Method 2: Use an anonymous function with function syntax

The second way is to use an anonymous function (sometimes called an unnamed function or an inline function). It uses the standard function syntax, but omits the name because the function is never called elsewhere.

game.onUpdateInterval(750, function (): void {
    mySprite.x -= 15
    mySprite.y += 5
})

Method Three: Anonymous function with lambda syntax

Another, common way to construct an anonymous function is to use lambda syntax. It’s a shorthand for the anonymous function used in Method Two.

game.onUpdateInterval(750, (): void => {
    mySprite.x -= 15
    mySprite.y += 5
})

Methods Two and Three are identical, just different syntax. Method One is slightly different in that you can call the moveSprite() function elsewhere in your code. You cannot call anonymous functions elsewhere, since they do not have names.

3 Likes