How to use javascript in magento2

Here we learn how to use javascript in magento2

1# First we will create requirejs-config.js file in folder app/code/NameSpace/Module/view/frontend

/**
 * @author      Webkul Software Private Limited
 */


var config = {
    map: {
        '*': {
            customjs: 'NameSpace_ModuleName/js/customjsfile'
            // 'js/customjsfile' is path of javascript file in your module in web folder
            /* Here you can add multiple mapping 
             * of javascript file separated by comma ( , )*/
        }
    }
};

In case of add js file in admin section  you need to create this above file in app/code/NameSpace/Module/view/adminhtml folder

2# Now i’ll create javascript file which i want to use

create ‘customjsfile.js’ file in app/code/NameSpace/Module/view/frontend/web/js

/**
 * @author Webkul Software Private Limited
 */

define([
    "jquery",
    "jquery/ui"
], function($) {
    "use strict";
    $.widget('modulename.customname', {
        _create: function() {
            var yourData = this.options;
            /*this.options contaion all variables which you pass in it for
             use in your javascript code */
            console.log(this.options); 
            // here you can write your javascript code as your requirement
        }
    });
    return $.modulename.customname;
});

3# Now we’ll call this javascript file on phtml file.

add following code in our phtml file where we want to use javascript

<script type="text/x-magento-init">
    {
        "body" : {
             "customjs": // customjs name as we map in our requirejs-config.js file
                    {
                        /* variables which we want to use in our javascript code*/
                        "yourvar1": "<?php echo $yourvar1 ?>", 
                        "yourvar2" : "<?php echo $yourvar2 ?>"
                    }
        }
    }
</script>

after these steps flush cache and check your page where you add this javascript .

Thanks …