Why Declare Variables Outside of LWC Class

Question

In the salesforce trailhead "Lightning Web Components and Salesforce Data: Use Apex to Work with Data" we have the following code:

import { LightningElement, wire } from "lwc";
import NAME_FIELD from "@salesforce/schema/Account.Name";
import REVENUE_FIELD from "@salesforce/schema/Account.AnnualRevenue";
import INDUSTRY_FIELD from "@salesforce/schema/Account.Industry";
import getAccounts from "@salesforce/apex/AccountController.getAccounts";
const COLUMNS = [
  { label: "Account Name", fieldName: NAME_FIELD.fieldApiName, type: "text" },
  {
    label: "Annual Revenue",
    fieldName: REVENUE_FIELD.fieldApiName,
    type: "currency"
  },
  { label: "Industry", fieldName: INDUSTRY_FIELD.fieldApiName, type: "text" }
];
export default class AccountList extends LightningElement {
  columns = COLUMNS;
  @wire(getAccounts)
  accounts;
}

In this example, and in many others, variables such as COLUMNS are established outside of the central class, rather than inside of it. This is then followed up by something line the line columns = COLUMNS.

Why is this? Is there a technical reason for it? Is it just a syntax standard? Why isn't the code written more like this:

import { LightningElement, wire } from "lwc";
import NAME_FIELD from "@salesforce/schema/Account.Name";
import REVENUE_FIELD from "@salesforce/schema/Account.AnnualRevenue";
import INDUSTRY_FIELD from "@salesforce/schema/Account.Industry";
import getAccounts from "@salesforce/apex/AccountController.getAccounts";

export default class AccountList extends LightningElement {
  columns = [
     { label: "Account Name", fieldName: NAME_FIELD.fieldApiName, type: "text" },
     { label: "Annual Revenue",fieldName: REVENUE_FIELD.fieldApiName,type: "currency" },
     { label: "Industry", fieldName: INDUSTRY_FIELD.fieldApiName, type: "text" }
  ];
  @wire(getAccounts)
  accounts;
}

Answer 1

The general "rule" is that you put global constants (const) outside the class, which is reminiscent of how constants were used in the old days (e.g. the C language). You cannot place a const inside a class and outside of any function. The following is illegal:

export default class MyClass extends LightningComponent {
  const name = value;
}

However, defining a constant outside the class is beneficial, as it reduces the size of your class and makes it easier to read.

In general, your class should look like this:

import things from 'places';

const thatAreGlobal;

export default class MyClass extends LightningElement {
  // public properties
  @api variables;
  // public methods
  @api methods;

  // private properties, also @track'ed variables
  classVariables;

  // Wire methods
  @wire(method, params) result;
  
  // First code to run
  constructor() { // if any
  }
  
  handlers() { // if any
    const somevariable = this.someothermethod(); // we can do this, though.
  }

  utilityAndHelpers() { // if any
  }
}

This is meant to keep your code organized, similar to how you should structure a Java class, Apex class, C++ file, etc. Keeping things grouped together makes it easier to maintain in the long run, rather than just randomly putting variables, etc, everywhere.