Getter property in Lightning web components

1. Use getter property if you want to modify the property before you use in template

2. Use getter property when you don't  want to create a variable

html

<template>

    <lightning-card title="Getter Property"  icon-name="custom:custom14">

     <p> Passing variable without declaring variable : {passProperty}</p>

     <p> changemessage :  {changemessage}</p>

    </lightning-card>

</template>

Js

import { LightningElement } from 'lwc';

export default class GetProperty extends LightningElement {

    msg='Test';

    get passProperty(){

        return 'Without Declaring Variable';

    }

    get changemessage(){

        return this.msg+'-->'+'add value';

    }

}

xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

   <isExposed>true</isExposed> 

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>