JavaScript Const

const was added to JavaScript in ES6 (2015), alongside let. It declares a variable that cannot be reassigned. Use it whenever a variable should keep pointing at the same value, which turns out to be most of the time. When someone reads const in your code, they instantly know that name will not be pointed at anything else.

The rules for const:

▶ Open Playground

1. Click Open Playground and run it. Read the TypeError
2. Replace everything with const empty; on its own and run it. How is this error different from the one in step 1?
3. Declare const settings = {theme: "dark"}. Change settings.theme = "light" and log it. Then try settings = {}
4. Declare const team = ["Ana"]. Add two names with push, change the first name, and log it. Then explain in your notes why none of that was an error

Rules 3 and 4 work just as you learned in the JS Let lesson. This lesson focuses on what is new: rules 1 and 2, and what "cannot be reassigned" really means for arrays and objects.

// Cannot Be Reassigned

Once a const has a value, any attempt to put a new value in it throws an error. That includes updates based on its own value:

const PI = 3.141592653589793;
PI = 3.14;         // error
PI = PI + 10;      // also an error

This is the point of const: it protects values that should never change from being overwritten by accident, whether by a typo, a copy-paste, or someone else's code.

// Must Be Assigned When Declared

With let you can declare now and assign later. With const you cannot, because there would be no way to ever give it a value:

// Correct
const PI = 3.14159265359;

// Incorrect
const PI;
PI = 3.14159265359;

// Constant Reference, Not Constant Value

The name const is a little misleading. It does not make the value constant. It makes the reference constant: the name is permanently attached to one particular value.

Think of a label glued to a box. const glues the label on, so you can never peel it off and stick it on a different box. But nothing stops you opening the box and changing what is inside.

For simple values like numbers, strings, and booleans, there is nothing "inside" to change, so the value really is fixed. Arrays and objects are different: they are containers. So with a const array or object:

Constant arrays

const cars = ["Saab", "Volvo", "BMW"];

cars[0] = "Toyota";     // change an element: fine
cars.push("Audi");       // add an element: fine
console.log(cars);

cars = ["Kia", "Ford"];   // replace the whole array: error

Constant objects

const car = {type: "Fiat", model: "500", color: "white"};

car.color = "red";        // change a property: fine
car.owner = "Johnson";    // add a property: fine
console.log(car);

car = {type: "Volvo"};     // replace the whole object: error

// When to Use const

Always declare a variable with const when you know it should not be reassigned. In practice that means using const when you create:

• A new array
• A new object
• A new function (later lesson)
• A new regular expression (later lesson)
• Any fixed setting: a tax rate, a maximum, a site name

Switch to let only when you know the value must be replaced, such as a counter, a running total, or something that updates as the user interacts with the page.

// const: the name always points at the same thing
const TAX_RATE    = 0.08;
const MAX_RETRIES = 3;
const cart        = [];                 // contents change, the cart does not
const player      = {name: "Ana"};

// let: the value gets replaced
let retryCount  = 0;
let currentUser = null;
let isLoading   = true;

// Block Scope

const has block scope, just like let. A const declared inside a block is a separate variable from one with the same name outside it:

const x = 10;

{
  const x = 2;
  console.log(x);    // the inner x
}

console.log(x);      // the outer x, unchanged

And like let, a const declared in a block does not exist outside it:

{
  const limit = 100;
}
console.log(limit);

// Redeclaring and Reassigning Rules

You cannot turn an existing var or let into a const, or declare the same const twice, in the same scope:

var x = 2;       // Allowed
const x = 2;     // Not allowed

{
  let x = 2;     // Allowed
  const x = 2;   // Not allowed
}

{
  const x = 2;   // Allowed
  const x = 2;   // Not allowed
}

Once a const exists, nothing in that same scope can reassign or redeclare it, with any keyword:

const x = 2;     // Allowed
x = 2;           // Not allowed (reassign, even to the same value)
var x = 2;       // Not allowed
let x = 2;       // Not allowed
const x = 2;     // Not allowed

Declaring a const with the same name in a different block is allowed, because each block has its own scope:

const x = 2;     // Allowed
{
  const x = 3;   // Allowed
}
{
  const x = 4;   // Allowed
}

// Hoisting

Like let, a const is hoisted to the top of its block but not initialized. Using it before its declaration line puts it in the temporal dead zone and throws an error, where a var would quietly give undefined:

console.log(carName);
const carName = "Volvo";

The fix is the same habit as with let: declare first, then use. Hoisting gets its own lesson later (JS Hoisting).

// var vs let vs const

// Quick Check

const scores = [80, 90];
scores.push(100);
console.log(scores);

const lives = 3;
lives--;

const level = 1;
{
  const level = 5;
}
console.log(level);

// Try It

1. In the console, declare const SITE_NAME = "JS Lab", then try to reassign it. Read the TypeError
2. Type const empty; on its own and read the error. How is it different from the one in step 1?
3. Declare const settings = {theme: "dark"}. Change settings.theme = "light" and log it. Then try settings = {}
4. Declare const team = ["Ana"]. Add two names with push, change the first name, and log it. Then explain in your notes why none of that was an error