How to add custom js file in custom module in drupal 8 ?

It is very simple way to add custom JQuery file in custom module, but we have few methods for this.

Method 1: Our custom libraries(js/css) will be apply on all pages of project.
If we want to add custom js file in whole pages of project then we have to use this method.

1. First we have to create js file like 'gallery.js' file in js folder in our custom module.
2. Then we have to create a 'hook.libraries.yml' file means there hook will be module name.
     
Example: Suppose our Module name will be 'gallery' So we will create file with name of     'gallery.libraries.yml' in custom module folder means this file should be placed with '.routing.yml' file.
3. The code for '.libraries.yml' file is..

image_gallery:
  version: 8.4.5
  js:
    js/gallery.js: {}   
  dependencies:
    - core/jquery
  css:
    theme:
      css/gallery.css: {}

Note: There is a library called image_gallery that when included in a page will deliver the 'js/gallery.js' and 'css/gallery.css' file.

4. Then we have to create '.module' file.

Example: Suppose our Module name is gallery so file name will be 'gallery.module'. There our code for attachment of this library to our module is..

<?php
function gallery_page_attachments(array &$attachments) {
   $attachments['#attached']['library'][] = 'gallery/image_gallery';
}
?>

5. Here 'gallery/image_gallery' means 'module name/libraries name' and in the time of controller function return of page will be written like..
return array('#markup' => t($html)); // here $html is return the result for page.   

Method 2: Our custom libraries(js/css) will be apply only on custom module pages of project.  
1. Whole process and file creation will be same but we will not use attachments code in '.module' file.
2. In this case we just have to create '.libraries.yml' file and apply code..

image_gallery:
  version: 8.4.5
  js:
    js/gallery.js: {}   
  dependencies:
    - core/jquery
  css:
    theme:
      css/gallery.css: {}
     
3. Then in the time of controller function return of page will be written like..
   
return [
    '#markup' => t($html),
    '#attached' => array(
        'library' => array(
            'gallery/image_gallery',
        ),
    ),
];       

here 'gallery/image_gallery' means 'module name/libraries name' and '$html' is the written result for page.

Note: If have any suggestions or issue regarding 'How to add custom js file in custom module in drupal 8 ?' then you can ask by comments.   

How to add JS file using theme file in Drupal 8 ?

Sometimes we add Jquery file by libraries.yml but if we want to add JS file by `.theme` file in drupal 8 so we will add <script> code in `hook_page_attachments_alter`.
There we will create a variable and put the script code and then add in $page['#attached']['html_head'][].
We will add #tag is script and pass the script code variable using this code of line..

\Drupal\Core\Render\Markup::create($javascript_header)
 
here $javascript_header is our script code variable.

Example:
<?php
function hook_page_attachments_alter(array &$page) {   
   
$javascript_header = 'var hmt = hmt || [];
(function()
{
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?1236547890";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);
}
 )();';
        $page['#attached']['html_head'][] = [       
            [       
              '#tag' => 'script',         
              '#value' => \Drupal\Core\Render\Markup::create($javascript_header),       
              '#weight' => -1,
            ],       
            'key'
        ];
   
}
?>
So this is simple way to add JS file in header of project of Drupal 8.

Note: If have any suggestions or issue regarding 'How to add JS file using theme file in Drupal 8 ?' then you can ask by comments.