In the video `Introduction to Browser Events`

In the video Introduction to Browser Events is explained how an addEventListener works using this basic code:

document.body.addEventListener (click, () => { });

to change the background color this explaination is used

Now let's try changing content inside the body. This time I'll store a reference to the body element in a constant named body, with const body = document.body. Now I can reference the body element in my event listener using the variable body.

using this code:

const body =document.body;

body.addEventListener (click, () => { body.style.backgroundColor=red
});

but this code gives the same result.

document.body.addEventListener (click, () => { document.body.style.backgroundColor=red
});

i have noticed in more video's that , in general, there is made first a variable and then using that variable in an function.

my question is, what is the reason for wirting a variable instead of using document.XXX. etc.? this is shorter i my humble opinion. :) love to hear form you guys!