Referential Transparency in JavaScript and TypeScript: Or why to prefer const over let

Kyrylo Reznykov
Jan 4 · 4 min read
our code through the eyes of the compiler

When I look back at my programming experience I understand that at the start of my career it was much harder to read someone’s code than to write it. And even though now I think that I am good at both tasks the style of the code I am reading makes a difference.


What is referential transparency?

An expression called referentially transparent if we can replace it with its corresponding value without changing program behavior. That two examples below will help you to understand the last sentence:

1. Not a referentially transparent expression:

There is no guarantee that x still has a value of 10 at the moment when we define z (since let allows reassignment). So now we need to make an effort to search through 100 lines of code to answer that question “what is the value of z?”.

2. Referentially transparent expression:

Here you only need to check the line with the assignment of x to understand the value of z because it is guaranteed by const keyword that the value of x in runtime will be 10 forever. So expression can be replaced with its corresponding value without changing the program’s behavior:

Note: The topic of referential transparency is much broader and can touch concepts of immutable data structures and pure functions. I deliberately want to focus only on the const vs let part here.


What are the benefits of referentially transparent expressions?

I think you could guess from the previous example that the main benefit is better clarity of your code. People don’t need to suspect any changes in the value of the variable from the moment of assignment, as they usually do with let. That is especially helpful during a code review with partial git diff.

Also, const provides a potential for optimizations at the compiler level.

That is why until you don’t have an intention to mutate your variable use const. If you get used to writing code where you think about variables as not reassignable you will find out that your codebase has less than 1% of real cases for let variables. And don’t be afraid to enable “prefer-const” lint rule in your project.


Some typical cases when people misuse let keyword.

1. Conditional variable assignments

You can easily use a ternary operator here to declare x as const

2. Pointless reassignment of a variable

Don’t be lazy, just create a new const variable with a better name :

3. Poor knowledge of the built-in Array.prototype functions

No need to have an explicit loop counter here:

4. Lack of abstract thinking [an advanced example]

There are however cases when you might need to use let, but you can hide it in an abstract utility function or have it in some library like lodash. Here is a simple example of that:

Let’s rewrite it with lodash once function. It does what we need:

Check the next code snippet if you are curious how to implement own function similar to one from lodash. Finally, a valid case for a let declaration:


Bonus: A couple of words about TypeScript

When TypeScript compiler does type inference it tends to be more precise and efficient if your code has more referentially transparent expressions. Check the next example:

Now let’s see what happens if we declare x as let

But it gets even worse if let is declared without assignment:


Conclusion

So avoiding let in your code ensures that you don’t have involuntary reassignments of variables. It helps people to reason about your code faster. It might give your app performance benefits in the future. TypeScript provides better type inferences. It helps you to write code that is closer to a functional programming style. The only one drawback here is that it requires some effort to change your mind model. But believe me, it’s worth it.

JavaScript in Plain English

Learn the web's most important programming language.

Kyrylo Reznykov

Written by

I am a skillful developer who has experience in mobile development, enterprise java applications, and ultra-modern UI interfaces with offline-first design.

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

32 funny Code Comments that people actually wrote

More from JavaScript in Plain English

More from JavaScript in Plain English

How Single Page Applications Broke Web Design

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade