JavaScript Properties in LWC (Lightning Web Components)

There are following types of JavaScript Properties in Lightning Web Components:

1. Private and Reactive Properties
2. Public Properties
3. Getter

1. Private and Reactive Properties

Private properties are only accessible in the component it is declared. It is declared using only an identifier name. We don’t have to provide any keyword for the datatype. We can also assign a default value to Private property.

Syntax for declaring Private Properties:

import { LightningElement } from 'lwc';
export default class JSProperties extends LightningElement {
    // This is Private property.
    strName = 'Nikhil';
}

In the above example, we have declared strName as Private Property. We can access any property in the component as {strName}.

My name is {strName}

Previously, Private properties were not Reactive by nature. In the Spring ’20 release, all Primitive Private properties are made Reactive. but what are Reactive properties?

Reactive Properties

When the value of the property is updated in JS Controller, it should be reflected on UI as well. Only values of the Reactive properties are reflected on UI once it is updated in JS Controller. Primitive Private properties are Reactive by nature but in order to make Non-primitive properties Reactive, we have to use a track decorator. So it creates a one-way binding from JS Controller to Component.

First import the track decorator in our JS Controller and use @track while declaring property to make it Reactive just like below:

import { LightningElement, track } from 'lwc';
export default class JSProperties extends LightningElement {
    // Non-primitive property.
    @track lstOfNames = ['Nikhil', 'LWC'];
}

So whenever the lstOfName property is updated in JS Controller, it will be reflected on UI.

2. Public Properties

The value for the Public properties is passed from the parent component. Hence we can only initialize the Public property in component with a default value where it is declared. After that, it is Read-only. Its values should be passed from the Parent component only. We can’t change its value in the component where it is declared.

To declare the Public property, we need to import the api decorator and then use @api while declaring the property to make it Public. Public properties are Reactive by default.

In below example, we have created Public property and assigned default value Friend to it.

import { LightningElement, api } from 'lwc';
export default class ChildCmp extends LightningElement {
    // Public proerty with default value.
    @api strPublicName = 'Friend';
    
}

But in the below example, we are passing the value Nikhil from the Parent component, and it will be considered as the value for strPublicName.

<template>
    <lightning-card>
        <c-child-cmp str-public-name='Nikhil'></c-child-cmp>
    </lightning-card>
</template>

If you notice the name of attribute str-public-name for the Child component, it is in the Kebab case. It is recommended to have the property name in JS Controller as Camel case because the attribute name must be in Kebab case when used as an attribute on the Child component. Even the Component names should be in the Kebab case when using in another component just like c-child-cmp.

Public Boolean Properties

Boolean Public properties work as normal HTML 5 Boolean attributes. When passing value to the Boolean property of the Child component, we just need to mention the name of a Boolean property in the Child component tag as an attribute like below:

<c-child-cmp str-public-name='Nikhil' bool-show-name></c-child-cmp>

Here, the bool-show-name is Public Boolean property. There is no need to assign a value to it. If the Boolean property is mentioned, its value will be True even though we assign its value as False explicitly. Hence if you want to pass True, just mention the property name as attribute name in the Kebab case. If you want to pass False, don’t mention the property name at all. Hence it is also important to assign the default value as false in JS Controller like below:

@api boolShowName = false;

3. Getter

A Getter is used to compute the static values. Getter is defined in JS Controller just like methods but prefixed with get keyword like below:

get accountName(){
    return 'My name is ' +this.strPublicName;
}

To access this Getter on UI, we just need to use {accountName} and it will display My name is Nikhil on UI considering the value of strPublicName is Nikhil.

If you want to check more posts about Lightning Web Components, you can check it here.

This is all for the JavaScript Properties in Lightning Web Components. In case you don’t want to miss a new post, please Subscribe here.

You can follow me on below social media. Thanks !

• LinkedIn
• Twitter
• Facebook