Is there a way to convert a function with multiple if statements to an arrow function?

Question

I want to use arrow function syntax with a few code snippets I've been working with. I was successful until I reached one in particular with multiple if statements. I know this might come up as a duplicate question, but after looking through some of the previous answers, I still can't find a working syntax.

I looked at a few of the duplicate answers on stack overflow and tried the formats suggested but nothing works. I also get no errors.

function keydownHandler(event) {
    "use strict"
    // handle user keyboard input

    if (event.keyCode == UP) {
        rocket.y -= velocity;
    }
    if (event.keyCode == LEFT) {
        rocket.x -= velocity;
    }
    if (event.keyCode === DOWN) {
        rocket.y += velocity;
    }
    if (event.keyCode == RIGHT) {
        rocket.x += velocity;
    }

    render( );
}

 //===========One of many formats i've tried=============================

var keydownHandler = event => {

    if (event.keyCode == UP) {
        rocket.y -= velocity;
    }
    if (event.keyCode == LEFT) {
        rocket.x -= velocity;
    }
    if (event.keyCode === DOWN) {
        rocket.y += velocity;
    }
    if (event.keyCode == RIGHT) {
        rocket.x += velocity;
    }

    render( );
}

Your attempt with `var keydownHandler = event => { … };` is totally fine. How does it not work? — Bergi, Feb 12 '19 at 20:38
I don't know, there are no errors, in the compiler or on jsFiddle however, once I try to execute the code the object no longer moves. — haberjin, Feb 12 '19 at 20:48
The problem is that you are trying to use (`addEventListener`) the variable before having assigned the function to it. [This only works with function declarations](https://stackoverflow.com/q/336859/1048572). — Bergi, Feb 13 '19 at 09:29
The function actually worked until I changed it to an arrow function. Once I changed to arrow function, the game would not move past the title screen when engage is clicked. — haberjin, Feb 13 '19 at 20:22
That's what I said. `function keydownHandler(event) { … }` works, `var keydownHandler = …` (regardless whether arrow function or normal function expression) doesn't. — Bergi, Feb 13 '19 at 20:38
Ok, I'll go to the original code and try adding it after the function and see how it works out. Thank You. — haberjin, Feb 13 '19 at 21:44

score 3 · Accepted Answer · answered Feb 12 '19 at 20:09

3

You could take an object with a default function for unknown keyCode.

const
    directions = {
        UP:      () => rocket.y -= velocity,
        LEFT:    () => rocket.x -= velocity,
        DOWN:    () => rocket.y += velocity,
        RIGHT:   () => rocket.x += velocity,
        default: () => {}
    };

Call with

(directions[event.keyCode] || directions.default)();

answered Feb 12 '19 at 20:09

Nina Scholz

376,160
25
347
392

Ok, this works. My biggest problem was finding a way to eliminate the curly braces. This really helped and I hope it will help others. Also, I'm getting the notion that eliminating if statements is the way to go. – haberjin Feb 12 '19 at 20:58

score 1 · Answer 2 · answered Feb 12 '19 at 20:25

You could use the Conditional (ternary) operator if you want to turn it into a 1 liner. This will only allow 1 key press at a time though

const keydownHandler = (event) => {event.keyCode === UP ? rocket.y -= velocity : event.keyCode === LEFT ? rocket.x -= velocity : event.keyCode === DOWN ? rocket.y += velocity : event.keyCode === RIGHT ? rocket.x += velocity : 0; render();}

This code is untested.

But for readablity I'd recommend using a switch statement or partial ternary operation

const keydownHandler = (event) => {
    // this prevents the rocket from going up and down at the same time
    rocket.y += event.keyCode === UP ? velocity : event.keyCode === DOWN ? -velocity : 0;

    // this prevents the rocket from going left and right at the same time. if both keys are pressed the rocket will turn right
    rocket.x += event.keyCode === RIGHT ? velocity : event.keyCode === LEFT ? -velocity : 0;

    render();
};

This section of code will prevent the rocket from going up and down at the same time. If both keys are pressed it will go up. The same goes for the left and right.

This is good. I am working on trying to make another object move with the WASD keys. I'm going to see if I can make this logic apply there. — haberjin, Feb 13 '19 at 22:46

Is there a way to convert a function with multiple if statements to an arrow function?

2 Answers2