Modules in ES5 and ES6 (JavaScript)

A module is  piece of code that is executed once it is loaded. Modules first introduce in ES5 and event adopted by ES6. A module can be declared as variable or function. By default module declaration is local to file. You can make some of them as public by export keyword and import them in other file by import keyword.

The basics of ES6 modules

There are two kinds of exports: named exports (several per module) and default exports (one per module).

1. Named exports (several per module):-

A module can export multiple things(Variable and Function) by using export keyword declaration.

XYZUtils.js

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

test.js

import { square, diag } from 'utils';
console.log(square(5)); // 25
console.log(diag(4, 3)); // 5

You can also import all modules using *.

import * as lib from 'utils';
console.log(lib.square(5)); // 25
console.log(lib.diag(4, 3)); // 5

2. Default exports (one per module):-

If we want to export a single value or to have a fallback value for your module, you could use a default export:
// module “utils.js”

export default function cube(x) {
  return x * x * x;
}

default export module very easy to import like

import cube from './my-module.js';
console.log(cube(3)); // 27

There are two styles of default exports:
1. Labeling declarations
You can prefix any function declaration or class declaration with the keywords export default to make it the default export:

export default function myFunct() {} // no semicolon!
export default class MyClass{} // no semicolon!

Or you can omit function name. That makes default exports the only place where JavaScript has anonymous function declarations and anonymous class declarations:

export default function () {} // no semicolon!
export default class {} // no semicolon!

2. Default export style 2: default-exporting values directly
The values are produced via expressions:

export default 'SalesforceXYZ';
export default XYZ();
export default /^xyz$/;
export default 5 * 7;
export default {yes: true,no: false};

Learn ECMAScript 2016 Before Creating Lightning Web Components

Lightning Web Components is very simple for Node JS and React Developers. However, it become complex for Salesforce developer who know only basic of JavaScript. Lightning Web Component creating by extending LightningElement class of lwc module. I will suggest you to learn ECMAScript 2015. By reading this blog and i sure after reading this blog you will became a LWC developer. To learn new technology learn fundamental of technology.

Here I will explain about ES5 and ES6 basic usage in Lightning Web Components

  1. Named import
  2. Default import
  3. Default export
  4. Named export
  5. Web Component
  6. Module?
  7. Class
  8. promise

 

How to get selected option value using jquery?

To get selected option value of select HTML tag use option:selected property.
<select id=”selectid”>

<option value=’1′>One</option>

<option value=’2′>Two</option>

<option value=’3′>Three</option>

<option value=’4′>Four</option>

</select>

<script>

$(‘#selectid option:selected’).attr(‘value’);

</script>

How to find radio button selection using jquery?

/*****************************************STYLE SHEET****************************************/

<style>
.border-right{border-right:1px solid #EEE; background-color:FFF; cursor:pointer;}
.border-right:hover{background-color:#e7f1fa !important}
.hide-radio{ display:none;}
.selected-radio{background-color:#e7f1fa; font-weight:bold; }
.unselected-radio{background-color:#FFF;font-weight:normal;}
</style>

/*****************************************HTML****************************************/

<table style=”font-size:12px;”>
<tr>
<td class=”border-right”><input type=”radio” name=”time” value=”8hours” checked=”checked”/>8 hours</td>
<td class=”border-right”><input type=”radio” name=”time” value=”24hours”  class=”hide-radio”/>24 hours</td>
<td class=”border-right”><input type=”radio” name=”time” value=”48hours” class=”hide-radio”/>48 hours</td>
<td class=”border-right”><input type=”radio” name=”time” value=”3days” class=”hide-radio”/> 3 days</td>
<td class=”border-right”><input type=”radio” name=”time” value=”5days” class=”hide-radio”/> 5 days<br /></td>
<td class=”border-right”><input type=”radio” name=”time” value=”7days” class=”hide-radio”/>7 days</td>
<td class=”border-right”><input type=”radio” name=”time” value=”14days” class=”hide-radio”/>14 days<br /></td>
<td class=”border-right”><input type=”radio” name=”time” value=”1month” class=”hide-radio”/>1 Month<br /></td>
</tr>
</table>

/*****************************************JAVASCRIPT****************************************/

$(function(){

$(“.border-right”).click(function(){

$(“input[name=’time’]”).addClass(“hide-radio”);
$(“.border-right“).removeClass(“selected-radio”);
$(this).addClass(“selected-radio”);
$(this).find(“input[type=’radio’]”).removeClass(“hide-radio”);
$(this).find(“input[type=’radio’]”).attr(“checked”,true);
});

});

How find which radio button is selected using jquery

<form>

<input type=”radio” id=”ratingPoint4″ name=”ratingPoint” value=”1″ />

<input type=”radio” id=”ratingPoint4″ name=”ratingPoint” value=”2″ />

<input type=”radio” id=”ratingPoint4″ name=”ratingPoint” value=”3″ />

<input type=”radio” id=”ratingPoint4″ name=”ratingPoint” value=”4″ />

<input id=”survey-submit” type=”submit” class=”survey-button aui-button” value=”Post”/>

</form>

<script>
jQuery(function(){
jQuery(“#survey-submit”).click(function(){
jQuery(“input[name=ratingPoint]”).each(function(){
if(jQuery(this).is(‘:checked’))
{
alert(jQuery(this).val());
}
});
});
});
</script>

Compare two array in javascript

var cubes = [ [1, 2, 3], [4, 5, 6], [7, 8, 9],];

var cubes2 = [ [10, 2, 3], [4, 5, 6], [7, 8, 9],];

var isIdentical=true;
for(var i = 0; i < cubes.length; i++) {
    var cube1 = cubes[i];
    var cube2 = cubes2[i];
    for(var j = 0; j < cube1.length; j++) {
        if(cube1[j]!=cube2[j])
        {
          isIdentical=false;
          alert('Both matrices are not equal'+"cube1[" + i + "][" + j + "] = " + cube1[j]+'!=='+"cube2[" + i + "][" + j + "] = " + cube2[j]);
          return;
        } else{
         //console.log("cube1i + "][" + j + "] = " + cube1[j]);
        }       
    }
}

if(isIdentical){
 alert('Both matrices are equal');
}