Javascript Constants — Fortresses Against Confusion

Constants are variables whose values can’t be changed. These are useful for creating immutable touchpoints for a program, used to enhance readability and maintainability. Javascript uses the const keyword to denote constants. In this blog entry we’ll cover the basics as well as how constants are used in objects, arrays, and, lastly, some best practices.

The const keyword was introduced to Javascript in the 6th Edition (2015) Specification; older web browsers do not support this — important for long-term software support. The syntax of the const keyword is:

const name = value [, name2 = value2] ;

Variables defined with const cannot be redeclared or reassigned. They have block scope. And there are implications when used with arrays and objects.

The Basics of Const

Constants must be assigned a value when declared, as in:

const EGGS_PER_CARTON = 12 ;

The following is incorrect:

const EGGS_PER_CARTON ;
EGGS_PER_CARTON = 12 ; // WRONG! Must be assigned when declared

Constants can’t be reassigned because, well, they’re constant. The following is incorrect:

const EGGS_PER_CARTON = 12 ;
EGGS_PER_CARTON = 13 ; // WRONG! Can’t be reassigned a new value

Constants are a natural progression of variables (which may be changed at will). Constants promote forward-thinking encapsulation of values. This improves code readability. For example, consider a value that isn’t expected to change, pi – ​​the ratio of a circle’s circumference to its diameter. The following snippet shows a development and maintenance headache in the making:

// planning a garden around a central flagpole
// distance to each of the concentric circle garden dividers
let inner_radius = 2 / 3.14159 / 2 ;
let middle_radius = 4 / 3.14159 / 2 ;
let outer_radius = 6 / 3.14159 / 2 ;

The multiple instances of 3.14159 are rife for typos, and, for values which aren’t instantly obvious, doesn’t add code clarity that bodes well for success of this code and future updates. Constants vastly improve this situation:

const PI = 3.14159 ;
const DIAMETER_TO_RADIUS = 2 ;
let inner_radius = 2 / PI / DIAMETER_TO_RADIUS ;
let middle_radius = 4 / PI / DIAMETER_TO_RADIUS ;
let outer_radius = 6 / PI / DIAMETER_TO_RADIUS ;

This contrived example is now much easier to read and update. Note that best practices include making constants all uppercase; your local conventions may differ. (Of course, creating aplanting_radius() function would be a much better solution.)

The Scope Context of Const

The const keyword has block scope; each block has its own namespace so what looks like a reassignment is actually an unrelated constant in another space. This has the potential for creating programmer confusion, and should be used only after serious deliberation.

const crodsquinkle = 1;
console.log("before, crodsquinkle = " + crodsquinkle );
{
  const crodsquinkle = 999;
  console.log("during, crodsquinkle = " + crodsquinkle );
}
console.log("after, crodsquinkle = " + crodsquinkle );

The output of the above appears as:

before, crodsquinkle = 1
during, crodsquinkle = 999
after, crodsquinkle = 1

When Const Isn’t Constant — Arrays & Objects

This is where the meaning of the word “constant” becomes a bit confusing to newcomers. The const keyword does not, in fact, define a constant value; it defines a constant reference to a value. This distinction is obscured when using simple variables but becomes apparent when using constant arrays and objects. Speaking pedantically, one cannot reassign a constant variable, array, or object, but one can change a constant array or object. Examples follow.

Const Arrays

The following example shows the creation of a constant array, the addition of a new element, and the replacement of an existing element. Because the musketeers reference isn’t itself changed, all this is valid Javascript code.

const musketeers = [ "Athos", "Aramis", "Porthos" ] ; // create
musketeers.push( "d'Artagnan" ) ; // add an array element
musketeers[0] = "Dumas"; // replace an array element

The following, however, is invalid:

const musketeers = [ "Athos", "Aramis", "Porthos" ] ; // create
musketeers = [ "Athos", "Aramis", "Porthos", "d'Artagnan" ] ; // WRONG

Const Objects

Similarly, one can create and manipulate constant Javascript objects:

const cat = { breed:"Bombay", age:"2", color:"black" } ; // create
cat.age = "10" ; // change an existing property
cat.vaccinated = TRUE ; // add a new property]

Reassigning the const object is invalid:

const cat = { breed:"Bombay", age:"2", color:"black" } ; // create
cat = { breed:"DSH", age:"1", color:"white" } ; // WRONG

Simulating Enumerated Choices With Const

The above object example is one way of simulating enumerated choices, as Javascript doesn’t support an enum type (as do other languages). For example:

const trafficFlow = { // colors can change by country
  GO: 'green',
  SLOW: 'amber',
  STOP: 'red'
 }
let stopLight = trafficFlow.STOP ;

Conclusion

In this blog entry we’ve covered:

• Javascript Constants, implemented by the const keyword
• Common use cases
• Common errors of redeclaration and reassignment
• Using constants to improve development and maintenance outcomes
• The block scope nature of const
• How the meaning of “constant” changes with arrays and objects
• Simulating enumerated choices with constants

Source Code

Complete source code, when needed to expand upon the snippets above, will be included below, ready for use in an online Javascript tester like PlayCode.