I dunno that much about web dev, but from my understanding:

Why the hell is semicolon sometimes needed, sometimes optional?

I think that’s called ASI if you haven’t come across the term already. Semi-colons are less like “optional”, and more like the JS parser takes its best guess as to where semi-colons should go in addition to explicit ones.
Personally, I prefer to leave code formatting decisions like that to an opinionated formatter like Prettier and just never think about it again.

What the fuck is anonymous/arrow function? Why do I have to make a function only to be used once?

These are trappings of functional programming. If you’re learning this stuff mostly for fun, I can recommend taking a detour to dabble in a purely(-ish) functional language for at least a little bit. It’ll probably be even more of a head-scratcher than JS, but it should quickly become obvious as to why anonymous functions are a handy convenience. More importantly it forces you to conceptualize a problem from a functional approach, which you might otherwise avoid in more popular multi-paradigm languages since it’s unfamiliar.

As for why functional programming is handy, there’s doubtless more thorough and knowledgeable primers on the web, but as for me the two big ones that immediately come to mind are:

• New avenues for separation of concerns. I think a typical example to point out is sorting: FP makes it trivial to separate the sorting algorithm from how you want the data sorted, you just pass a comparison function alongside the data, which the sorting algorithm then repeatedly calls.
• Concurrency safety. Purely functional solutions are basically impossible to shoot yourself in the foot with as far as parallelism. More realistically, with unpure solutions the more you can borrow from a functional approach, the fewer avenues you have to shoot yourself in the foot with respect to parallelism.

For JS, lifetimes and scope seem like they’d be kind of unwieldy, without knowing a bit about FP and more specifically closures.