How to enqueue a custom JavaScript file properly in WordPress without breaking dependencies?

I am learning WordPress theme development and trying to add a custom JavaScript file to my theme.

I initially added the script using a <script> tag in header.php, but I read that this is not the recommended approach in WordPress.

I want to understand:

How to correctly enqueue a custom JavaScript file using functions.php

How to make sure it loads after jQuery

Where the file should be placed in the theme structure

The script loads, but I want to confirm:

Is this the correct and recommended way?

Are there any best practices I should follow for performance and maintainability?

Any guidance would be appreciated.

This is what I tried in functions.php:

function add_custom_scripts() { wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true ); } add_action('wp_enqueue_scripts', 'add_custom_scripts');