Why do we need getter in LWC?

 LWC template/component does not allow expression or any manipulation or array expression. To solve this problem "Getter" is solution. It atomically bind data from Java scripts to template.

Error = Invalid expression {employee[0]} - LWC1038: Template expression doesn't allow computed property accesslwc

 <div class="slds-m-around_medium">
           {employee[0]}
<p> The sum of {num1} and {num2} is {num1+num2}
 </div>

Component code

<template>

    <lightning-card title="Getters in LWC">

        <div class="slds-m-around_medium">

            {firstEmployee}

            <p> The sum of {num1} and {num2} is {sumResults}</p>

        </div>

    </lightning-card>

</template>

Java script code

When employee gets updated then automatically firstemployee getter called and updated value will be reflected in component.

import { LightningElement } from 'lwc';

export default class HelloWorld1 extends LightningElement {

   

    num1 = 10;

    num2 = 20;

    employee = ["Asish","behera","Ipsheeta"]

    get firstEmployee(){

        return this.employee[0].toUpperCase();

    }

    get sumResults(){

        return this.num1+this.num2;

    }

   

}