Well it works the same in the case where you tested it.
The answer could actually be somewhat complex, but mainly having it inside an action callback only registers them when needed, just putting it inside the functions.php it happens always when the theme is active.
First of all this can be a waste of performance, registering stuff that is never used. You might think that it should be there in any case, but actually in WP there are plenty of situations where frontend JS/CSS is totally irrelevant. The most obvious situation is the backend. But also some plugin might create an endpoint that doesn’t need JS/CSS. And there are plenty more of that.
Last but not least by having this on an action third party code (plugins, child themes) can unhook the callback to e.g. replace it with something else.
I hope this gives you a basic understanding why it is good practice to only do stuff on the appropriate hook.
To close things this could also be relevant/interesting for you: https://wordpress.stackexchange.com/a/21579/47733