JS: ES6 Const keyword

Published on: August 2, 2015

Tags: js, ECMAScript 6, and const

A little bit of background

ES6

ECMAScript 6 (ES6) introduced a lot of new JS keywords to play with. Generally these changes make JS a bit more approachable for new JS developers by making JS more similar to other programming languages.

Constants

Some languages (particularly compiled ones like Java) have a concept of constants. This are like variables, but the opposite.

Wow, that was really clear...

Constants are like variables in that a value can be assigned to them. They are unlike variables in that their value cannot be changed after the a value has been assigned to them. (There’s a lot more that could be said about this, but I’ll leave it there since it’s enough to get through this post.)

In sudo code it would look kinda like this:

1
2
3
4
5

variable = 1
constant = 2

variable = 3 // All good since variables can change
constant = 4 // Error since constants can't change

Let’s talk about JS

So that’s how other languages do it - but what about JS?

Honestly ES6’s implementation seems pretty similar to other languages.

Note: Since ES6 isn’t fully implemented in browsers most people are using a compiler to get from ES6 syntax to normal JS. These compilers might throw errors for some of the examples below.

Basic usage

ES6 introduced a new const keyword to behave like a constant. Something that is defined const can only be assigned once.

1
2
3

const cat = 'meow';
cat = 'woof';
console.log(cat); // logs 'meow'

But what if I try something tricky?

There’re are a couple of ways you could try to beat the system, but ES6 has covered them.

Reuse the const keyword:

1
2
3

const cat = 'meow';
const cat = 'woof';
console.log(cat); // logs 'meow'

Change a constant to a variable:

1
2
3

const cat = 'meow';
var cat = 'woof';
console.log(cat); // logs 'meow'

Declare a constant without defining it:

1

const cat; // SyntaxError

Use block scope:

1
2
3
4
5

const cat = 'meow';
if (true) {
  const cat = 'woof';
}
console.log(cat); // logs meow

Use function scope:

1
2
3
4
5
6
7

const cat = 'meow';
function testConsts () {
  const cat = 'woof';
  console.log(cat)
}
testConsts(); // logs woof
console.log(cat); // logs meow

(Hopefully those last couple weren’t a surprise because JS uses function scoping.)

Ideally you should use constants in their intended way without getting too tricky!

Gotcha

Here’s the big catch: a constant can only be defined once, but it can be changed in other ways. In “programming terms” something that cannot be changed in anyway is immutable. ES6 constants are mutable (i.e. not immutable, i.e. changeable).

How can I change a constant?

Some object types can be changed without assigning again. Let’s look at a couple.

Arrays:

1
2
3

const animals = [];
animals.push('cat', 'dog');
console.log(animals); // ['cat', 'dog']

Objects:

1
2
3

const cat = {'sound': 'meow'};
cat.sound = 'woof'
console.log(cat.sound); // 'meow'

Any mutable object type will have this problem. The immutable types are: Boolean, Null, Undefined, Number, String, Symbol (the primitive types).

Resources

comments powered by Disqus