Import and Export in LWC.

Import and Export is very powerful feature which we will use in LWC. We know the word re-usability and generally we always try to use re-usable component for smart coding.
Here we will use ES6 module which is nothing but JS file that export variables or functions that other modules can use.
Basically to share our common code base between different components, we will create ES6 module and then export the variables or functions that we want to share or want to make as re-usable.

Scenario:
Say for our case we want to create a temperature calculator which will convert temperature from Celsius to Fahrenheit or vice versa. And we want to use this calculator from different components.

Solutions:
So, here we will create below 3 steps,

• Create a JS file say temperatureCalculator.js and under this JS file, build our business logic like conversion of temperature from Celsius to Fahrenheit or vice versa.
• Then export the function (where we implement our logic.).
• Finally import the above re-usable component (temperatureDemo) from another component.

***************** Export Functionality *****************

temperatureCalculator.js

const convertCelsiusToFahrenheit = (c) => {
    return (9/5)*c + 32 ;
};

const convertFahrenheitToCelsius = (f) => {
    return 5/9 * (f-32);
};

export {
    convertCelsiusToFahrenheit,
    convertFahrenheitToCelsius
}

temperatureCalculator.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="temperatureCalculator">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>

***************** Import Functionality *****************

temperatureDemo.html

<template>
        <lightning-card title="Calculate Temperature">
            <lightning-layout>
                <lightning-layout-item>
                        <lightning-input type="number" label="Temperature" value={temp} onchange={fetchTemperature}></lightning-input>
                        <lightning-combobox label="Conversion Type" value={type} options={conversionType} onchange={fetchConversionType}></lightning-combobox>
                        <br/>
                        <lightning-button variant="brand" label="Calculate" onclick={calculateTemperature}></lightning-button>
                        {result}
                </lightning-layout-item>
            </lightning-layout>
        </lightning-card>
    </template>

temperatureDemo.js

import { LightningElement, track } from 'lwc';
import { convertCelsiusToFahrenheit } from 'c/temperatureCalculator';
import { convertFahrenheitToCelsius } from 'c/temperatureCalculator';

export default class TemperatureDemo extends LightningElement {
    @track type;
    @track temp;
    @track result;

    conversionType = [
        { label: "Celsius To Fahrenheit", value: "c2f" },
        { label: "Fahrenheit To Celsius", value: "f2c" }
    ];

    fetchTemperature(event){
        this.temp = event.target.value;
    }

    fetchConversionType(event){
        this.type = event.target.value;
    }

    calculateTemperature(){
        if(this.type === "c2f"){
            this.result = convertCelsiusToFahrenheit(this.temp);
        } else{
            this.result = convertFahrenheitToCelsius(this.temp);
        }                
    }
}

temperatureDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="temperatureCalculator">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>

Now put this temperatureDemo LWC component in your Lightning Page and check the result.

Output:

Initial load:

After button click: