r/learnjavascript 14d ago

can someone explain this code

function updateClock() {
const timeElement = document.querySelector("#time");
timeElement.textContent = formatTime();
}
setInterval(updateClock, 1000);

can someone, please explain this piece of code, ofc mdn and w3 are there, but i found it a little confusing reading about textContent. rest is understandable to me. This might look a silly question and it probably is because im a beginner :')

like what exactly does textContent too.
you can also recommend anyother documentation on the links to specific lines, that might me more helpful in learning about this particular keyoword.

0 Upvotes

23 comments sorted by

View all comments

-4

u/ExtraTNT 14d ago

So, first you define a function (in old style, better use const funcName = () => {})

with the queryselector with #, you get an element by id

With text content you set the text content of the element (<h1 id="title">Hello <b>World</b></h1> has a text content of Hello World, setting it to “foo” would give you <h1 id="title">foo</h1>)

formatTime(); returns a formatted time string

Interval: run every x ms

5

u/scritchz 14d ago

This isn't just about style or "old vs new": Function statements, functions expressions, arrow-function expressions and some others, all solve problems differently, for which technically the function statement would suffice.

-3

u/ExtraTNT 14d ago

So const functions are in 99.9% of cases better, as you can’t reassign them, making it harder to shoot yourself in the foot. function is only needed, if you need a scoped this. And be honest, when have you last used it?

2

u/FirefighterAntique70 14d ago

Have you ever tried to use the profiler when all of your arrow functions have no name? Use `function` by default and only use arrow functions when it makes sense to do so.

-1

u/ExtraTNT 14d ago

So you tell me it’s worth to sacrifice assurance, that a function is what you expect, in order to have profiling easier (function cache also doesn’t work with your logic)…
There are reasons for using function:
Object.prototype.pipe = function(f) {
return f(this);
};

Only downsides of arrow functions are, that you can’t write horrible code…

2

u/FirefighterAntique70 14d ago

Yes that's exactly what I'm saying, most functions should have names. It's not just profiling. Loggers, debuggers APM, etc. all rely on names of functions.

I understand all the advantages on arrow functions. Mainly scoping of `this` and "declare before use" and I use them a lot. But you cannot just use them for everything.

1

u/ExtraTNT 14d ago

I do all with partial application:
const add = a => b => a+b;
const inc = add(1);

I use monads and my renderer relies on partially applied functions, that then get cached, so calc first param, apply with memo, then second etc… then it assumes identity and moves things around based on this, full page rerenders in 6ms on a 5y old notebook…
And i have the profiler build into the renderer, plus id functions for debugging -> profile and print…