Learn Intermediate OOP by Building a Platformer Game - Step 59

Tell us what’s happening:

I dont understand what Im missing here even after reading similar posts on this question, I think there are 3 , tried all possible permutations. I think I fully understand destructuring but , my code wont complete.
window.addEventListener(‘keydown’, (event) => {const {key} = event;}) /// think is syntatically correct but doesnt complete
window.addEventListener(‘keydown’, (${key} = event) => {}) //this is has synatctical errors

Should the destructuring be done in parameter list , how?

Your code so far

<!-- file: index.html -->

/* file: styles.css */

/* file: script.js */
// User Editable Region

window.addEventListener('keydown',(event) =>  {const  key  = {event}})

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge Information:

Learn Intermediate OOP by Building a Platformer Game - Step 59

an arrow function that uses the destructuring assignment to get the key property from the event object in the event listener parameter.

this is your function, but your parameter doesn’t use destructuring. You are not using destructuring at all.

See the other text in question I have tried :
(event) => {const {key} = event}
Is this not correct destructuring ?? I came here for some help … not to be told off thanks

this looks like destructuring, good

now the thing is using destructuring in place in the parameter of the function

Ok so I thought this was like this :
window.addEventListener(‘keydown’, ({key} = event) => {})
if I put const in this is an error

without the assignment, as the value to a parameter is passed when the function is called

do you ever use const in the parameter of a function? the error is right, it’s not correct

Well I know const isnt used in the parameter list , another post was indicating that some how it should be ? So what should be in the arrow function parameter list ? {key} = event ? I assume this is wrong , can you explain why its wrong ?

where does event come if this was in the function parameter?
a function parameter is given a value when the function is called
if you use destructuring it means you are extracting the properties from the object passed in, and the value passed in when the function is called does the part of = object, so you should not put the assignment in the function parameter

1 Like

So if event is assigned when function is called all information should be available if you use (event) or ({event}) in paramter list , but I have tried both of these to no avail ? I am now assuming function body is empty ?

event is a good parameter as parameters can be named whatever you want

{event} is not because the object doesn’t have such a property

1 Like

I’m sorry Im still mystified on this singular challenge and have spent over 2 hours on it now , I’m guessing your not allowed to give the specific answer , as I would gladly like to move on with the project but this seems to be total puzzle , with few clues

Makes little sense but eventually I guessed it
window.addEventListener(‘keydown’,({key}) => {})

Thanks for your “help”

If you don’t understand destructuring it’s hard to pass this challenge.

There is also specifically an example about destructuring in the function parameter Destructuring assignment - JavaScript | MDN

It is enlightening because now I see answer it is obvious whats being done … an object " {} " is passed in , and it has property ‘key’ (these 2 together select this property) , and this is passed to function. I would say maybe this is slightly more advanced destructuring and Im not sure it abundantly clear from previous challenges either, maybe it could be expanded on , I understand this is in Beta so maybe I could suggest you reinforce this topic more

1 Like

thank you for your feedback, would you be willing to open a github issue for it?

Have done so , thanks again