How to work with JS in Magento?

Question

JavaScript

I figured out how to include scripts in phtml template files with require js, this is understandable. But in magento there is a way to connect via x-magento-init, I didn’t understand from the documentation in which cases to use this method and where should the included file be located?
I connect like this

<script type="text/x-magento-init">
{
    "*": { 
        "Magento_Catalog/js/product/counter.js": {}
    }
}
</script>

Where to place the counter file?
And in what cases should I use require in the js file, and in which define?