If you have worked on Aura component, you may know how important helper JS file in Lightning Aura Component is. Helper class helps you to reuse a method in any main class. It also helps you to keep main JS file clean.
Salesforce always recommends making best use of helper class. All logic should be written in helper class with proper naming conventions. And main JS file should just call the helper methods.
In this post we will see how we can make use of helper class in Lightning Web Component. I am completely new to this topic I may not give all the information in this post. However, I will give you some basic information.
Let us see basic example of adding 2 numbers using helper class.
HTML File
<template>
<div class="slds-box slds-theme_default">
<lightning-input type="number" variant="standard" name="Value1" label="value 1" value={value1} onchange={handle_Value1_change} ></lightning-input>
<lightning-input type="number" variant="standard" name="Value2" label="value 2" value={value2} onchange={handle_Value2_change}></lightning-input>
<lightning-button variant="brand" label="SUM" title="SUM" onclick={handleClick}></lightning-button>
{result}
</div>
</template>
Main JS File.
import { LightningElement } from 'lwc';
import {sayHello, add} from './SampleDemoHelper';
export default class SampleDemo extends LightningElement {
value1;
vault2;
result;
connectedCallback(){
console.log('Hello from main SampleDemo');
sayHello('Akhil Kulkarni');
}
handle_Value1_change(event){
this.value1 = event.target.value;
}
handle_Value2_change(event){
this.value2 = event.target.value;
}
handleClick(event){
var sum = add(this.value1, this.value2);
this.result = "SUM of " + this.value1 + " and " + this.value2 +" is: "+ sum;
}
}
Helper JS File.
export function sayHello(a_Name){
console.log('Hello from SampleDemoHelper to: '+a_Name);
}
export function add(val1,val2){
return parseFloat(val1) + parseFloat(val2);
}
You can create a helper JS file in any name, there are no specifications for that. It is good practice to use helper class with a simple naming just to follow LAC naming convention that is helper.js
For instance, I have created a LWC as SampleDemo then my helper class name will be SampleDemoHelper.js
Please note you can create multiple helper classes and give different names. I have tried above example with just one helper class.
All helper class methods are like individual separate methods. They do not have access to any of the variables which are in main JS or any other JS file.
For instance, as a developer as use this.variable name in main JS file. We do not have access to those variables. Treat this helper as a separate method which has no access to variables outside world. You can pass various parameters write business logic and return the value.
You need to append the key word export to all the functions. This means that you are exposing the
helper method. Exposing is not the only step. You also need to mention which methods you will be using in main JS file.
import {sayHello, add} from './SampleDemoHelper';
This means, we are going to use 2 methods sayHello and add which are defined in SampleDemoHelper file. You can define multiple methods which can be used in other components as well. and you have to import those methods which will be used in current component.
OUTPUT:
Akhil Kulkarni 