Earlier I was following a tutorial about building a custom HTML video player. It's pretty basic but that tutorial indroduced some kind of shorthand in javascript to access the video element. Just curious about it.

So let's say, this is my video element:

<video class="viewer" src="652333414.mp4"></video>

Here is how I get the element and have a function to change state of the element

const video = document.querySelector(".viewer");

function togglePlay(){
    const method = video.paused ? 'play' : 'pause';
    video[method]();

    console.log(video[method]());
}

I understand video.paused is used to determine the video playing state. And the method variable gets the method name (string) which we want to execute. Now check this line video[method]();, I am curious about this syntax/shorthand/method.

By the way, it returns a promise.