JavaScript Syntax Confuses Me

Consider using more variables and less nesting for beginner tutorials

I was able to squeeze some time at work to start on the JavaScript 30 course today.

The way this code is structured, I feel lost at how I would go about writing it without actually looking at his video

- Mike

Zach: Aha, I knew you would bring this up soon enough. This is something I also struggled with when I was a new developer.

I found myself learning how to do things, by reference, copy and paste, and not understanding why something worked.

What you’re having trouble with is the syntax and semantics of the language.

You should spend a lot of time looking up different language features on MDN to understand them in depth, but for this post, I’ll break down the photo you sent me and hopefully help you understand a bit more.

The first block of code

window.addEventListener('keydown', function(e) {

// inner code

})

One way to explain this code is by looking at its possible function signature. Here’s an example:

const window = {
  addEventListener: function(method, callback) {
    if(method === 'keydown') callback()
  }
}

What did I just do? I am showing how someone might actually define this function.

When you’re new to JS, you are calling things like window.addEventListener which are functions provided by the browser. Sometimes it helps to understand how you would define a function like this yourself to understand how JS works.

Window is an object, and it has functions inside that can be called.

Take a while to look at this code. In JS, everything is an object. window is just a special one created by the browser with built in code to do certain things.

window.addEventListener

to access something on an object, we use a `.`

In this example we make an object called window, and we add a function to it called addEventListener.

The reason this is so confusing in the beginning, is due to JS and most every programming language offering many ways to create objects and functions. Here’s another example of the same code above

let window = {}

window.addEventListener = (method, callback) => {
 if(method === 'keydown') callback()
}

I expect you to be confused. But the point is, there are many ways to do the same thing in every language. Learning how to reference MDN and research different syntax is crucial later on as you pick up the language. For now, try sticking to one way of doing things, and don’t get too caught up when you see another approach.

What the screenshot is doing

window.addEventListener('keydown', function(e) {
  const audio = document.addEventListener(
    `audio[data-key=${e.keyCode}]`
  )

  audio.play()
})

This might look really confusing in the beginning. Most tutorials go along like this because they assume you know JS at least a little bit before doing them. We can split this code out to help your brain understand what is happening in the beginning:

const onKeyDown = function(e) {
  const audio = document.addEventListener(
    `audio[data-key=${e.keyCode}]`
  )

  audio.play()
}

window.addEventListener('keydown', onKeyDown)

This is much easier for your brain to comprehend! Why and how does this work?

addEventListener takes two parameters. The first one is the name of the listener that you want to subscribe to. In this case, we are saying we want to do something any time a user presses a key down on their keyboard when on our webpage.

The second parameter is a callback function. It’s some of our own code that we want to run anytime keydown is triggered.

In this specific code you sent me, it is calling the play method on audio elements that have a data value of whatever key you pressed. Ex:

There is an element with data-key=”13” so when you press enter, it plays that audio.

Currently, the code doesn’t account for a button being pressed without a matching audio element. You will get and error like: “cannot read .play() of undefined” if you press a key without a matching element in the current code sample.

Also, `e.keyCode` is deprecated and it is recommended to use e.key from now on. It returns names like “Enter” instead of a number “13” when pressing a key.

How Do Callbacks work?

Anytime a function takes another function as an argument, that’s a callback. Since it is just a function after all, it works the same way as any other function. That means we define it like any other function, and we can assign it to a variable if we want to.

We could go into much more detail about callbacks, but we will save that for a later time. It’s normal if you don’t fully understand this yet.

In the example above I assigned this function to a variable called onKeyDown, so that the code doesn’t get indented further.

As programmers, we should strive to make sure our code isn’t nested very far. The further indented it gets, the harder it is to understand.

Making variables like this in the beginning can help newcomers hold the information in their brain better, because there is less thinking required to understand each line.