Detected the use of variables before they are defined JS-0357
Anti-pattern
Major
a month ago
—
3 months old
'renderLicenceTransactions' was used before it was defined
1111 }) => {
1112 if (responseJSON.success) {
1113 licenceTransactions = responseJSON.licenceTransactions
1114 renderLicenceTransactions()1115 }
1116 }
1117 )'renderLicenceTransactions' was used before it was defined
948
949 addAdditionalFeeCloseModalFunction()
950
951 renderLicenceTransactions() 952 }
953 )
954 }'renderLicenceTransactions' was used before it was defined
874 ) as HTMLInputElement
875 ).value = responseJSON.licenceFee.toFixed(2)
876
877 renderLicenceTransactions() 878 }
879 }
880 )'additionalFeeTableElement' was used before it was defined
786 '</div>'
787 )
788
789 additionalFeeTableElement 790 .closest('.panel')
791 .querySelector('.panel-heading .level-right')
792 .classList.add('is-hidden')'additionalFeeTableElement' was used before it was defined
779 !additionalFeeTableElement.classList.contains('is-hidden')
780 ) {
781 additionalFeeTableElement.classList.add('is-hidden')
782 additionalFeeTableElement.insertAdjacentHTML( 783 'beforebegin',
784 '<div class="message is-warning">' +
785 '<p class="message-body">Fees will be recalculated after saving.</p>' +
Description
Variables, functions and types should always be used after they've been defined. This issue will flag any code snippets that use variables or types before definition.
Sometimes, the code will run just fine even when the variable is declared after use. Consider the following example:
const ram: Resource = { type: "memory", limit: 1024 ** 3 }
type Resource = {
type: string;
limit: number;
}
Here, Resource is used in the annotation before it has been defined.
Similarly, it is possible to hoist function declarations and variables declared with the var keyword:
const four = twice(2);
function twice(n: number) {
return n * 2;
}
However, it makes the code harder to follow when variables or types are declared after being used.
Bad Practice
const knight: Radiant = {
order: "SurgeBinder"
strength: 30
}
interface Radiant {
order: string;
strength: number;
}
Recommended
interface Radiant {
order: string;
strength: number;
}
const knight: Radiant = {
order: "SurgeBinder"
strength: 30
}