Calling and initializing JS components

Calling and initializing JS components might seem a bit challenging at first. There are two types of syntax notations used with Magento JS components:

• Declarative:
  • Using the data-mage-init attribute
  • Using the <script type="text/x-magento-init" /> tag
• Imperative:
  • Using the <script> tag, without the type="text/x-magento-init" attribute

To better understand the data-mage-init notation, let's take a look at a partial <PROJECT_DIR>/lib/web/mage/redirect-url.js file extract:

define([
    'jquery',
    'jquery/ui'
], function ($) {
    'use strict';
    $.widget('mage.redirectUrl', {
        options: {
            event: 'click',
            url: undefined
        },
        _bind: function () { /* ... */ },
        _create: function () { /* ... */ },
     ...