This post might sound silly to read if you are already an expert with lwc. However it is still worth to spend a minute to read as we often confuse with terminology that people use when working with lwc components.
Some people say it does not matter what we call as long as we write and the component works properly but it really matters when you are working with different teams across different locations.
What is a field ? How it is different from property ?
Field and property are almost interchangeable terms. A component author declares fields in a class. An instance of the class has properties. To component consumers, fields are properties. In a Lightning web component, only fields that a component author decorates with @api are publicly available to consumers as object properties.
child.html
<template>
{status}
</template>import { LightningElement, api } from 'lwc';
export default class Child extends LightningElement {
//this is called field
status;
//this is also called field for its author - child component
//but it is a property to container component
@api
fullName;
}
In this example, we have two fields called status and fullName, where fullName is public field and it is available to access outside this component as a property.
So when you are talking in the context of parent component, we need to refer them as fields and when you talk them in the context of consumer components, we need to call them as properties.
Lets see this example to understand in detail.
parent.html
<template>
<div title="Brahma">
<!-- In this example, we have an attribute called full-name,
full-name attribute is mapped to fullName property in child
component
-->
<c-child full-name="Brahma"> </c-child>
<lightning-button label="Click" onclick={handleClick}></lightning-button>
</div>
</template>import { LightningElement, track } from 'lwc';
export default class Parent extends LightningElement {
handleClick(event) {
//Here userName is a local variable and
//accessible only within this method(function)
let userName = this.template.querySelector('c-child').fullName;
console.log(userName.toUpperCase());
}
}
In the previous example, we have child component inside parent component, the attribute full-name is mapped to fullName property in child component.
What is an attribute here ? How it is different from property ?
Property and attribute are almost interchangeable terms and can be confusing. Generally speaking, in HTML we talk about attributes, and in JavaScript we talk about properties.
Ok, fine, what about title in div element. It is also called as an attribute, which is used to display more information about the element. It is part of Global attributes (standard).
So in HTML context, we will not call word properties instead we say attributes.
What the heck is a variable then ?
handleClick(event) {
//Here userName is a local variable and
//accessible only within this method(function)
let userName = this.template.querySelector('c-child').fullName;
console.log(userName.toUpperCase());
}Variables are used to temporary data and act as containers in our logic. If you look at the handleClick method in js file, it has a variable called userName which is used to hold some data which helps to achieve our functionality. We cannot access these variables outside this method unless you declare them as const above class. (this is a seperate topic to explain).
It is so common that sometimes people (and sometimes even in docs) refer field as property, attribute as property & etc. so it is important to understand the context of that terminology to avoid confusion.
In summary, a component will have fields, which can be exposed as properties to other component and can be accessed as attributes and variables act as containers to hold values to achieve our business logic.
Lets start the debate now ?
References
Developer Guide
