JS transpiling & polyfills vs browser support

Question

I'm still in progress of learning JS, and in many books/tutorials I was watching - people were pointing the importance of using features which are supported in all browsers, a bit later I've learned about tools like Babel and the advantages of it. I like new "the syntactical sugar" and would like to use it instead of old functionalities that are widely accepted. For example appendChild(); insertAdjacentElement; replaceChild(); removeChild(); appendChild(); insertAdjacentElement; replaceChild(); removeChild(); could be replaced with something like append(); prepend(); before(); after(); replaceWith(); remove(); append(); prepend(); before(); after(); replaceWith(); remove(); . Now, my question is would it be fine if I use latter ones and depend on tools for older browsers or should I use features that are widely supported?

Answer 1

I'd suggest learning and training your skills with modern JS and current browsers - if you need to support older browsers at some point, deal with that then. Avoid premature optimization and abstraction.