How to use Getters to compute a value in Lightning Web Component?

In this blog post we will see "How to use Getters to compute a value in Lightning Web Component".

If we want to dynamically compute value for property used in template we can make use of Javascript getter explained in the below example.

myComponent.html

<template>

    <div>

        Student details are: {studentDetails}

     </div>   

</template>

myComponent.js

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {

    studentName = 'Farukh';

    studentBranch='CS';

    get studentDetails(){

        const studDetail = `Name is: ${this.studentName} and Branch is: ${this.studentBranch}`;

       return studDetail;

    }

}

testApp.app

<aura:application>

<c:myComponent></c:myComponent>

</aura:application>

OUTPUT: