paint-brush
Once Upon a Time in Javascript: The const Keywordby@the_rock
1,331 reads
1,331 reads

Once Upon a Time in Javascript: The const Keyword

by SashaJanuary 2nd, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Const was introduced in 2015 as part of ECMAScript 6 standard back in 2015. It is block-scoped but is used to define a constant value (obv) The fact that it is constant doesn't mean it is immutable, but a value its self remains mutable. If you want to create a completely immutable value you should use Object.freeze() before ES6. You can also use functions that always return the same value:.iateiate().iate() or create a "repository" using "immediately-invoked function expressions" (IIFE)

Coin Mentioned

Mention Thumbnail
featured image - Once Upon a Time in Javascript: The const Keyword
Sasha HackerNoon profile picture

const
keyword was first introduced in javascript as part of ECMAScript 6 standard back in 2015. It probably the most popular way of declaring a variable in javascript, but how was javascript before them?

Hi rocks, Sasha here. Today we gonna see some alternatives to

const
keyword in javascript before ES6.

const

As mentioned above,

const
was introduced in 2015 as part of the ES6 standard. const value is block-scoped like
let
but is used to define a constant value (obv).

Mutability

The fact that it is constant doesn't mean it is immutable. It's a common misconception, but

any const object can change its properties
, such as
any const array can change its data
. Let me show you some examples:

//const object example
//declare a const object with id and msg
const a = {
    id: 5,
    msg: "Hello!"
}

//change property of constant object
a.msg = "Hi!";//c changes it's value
//reasign constant object
a = { msg: "new object!" };//TypeError: Assignment to constant variable.
//const array example
//declare const array
const arr = [ "Hello", "Constant" ];
//push new element to array
arr.push("works");          //push new element - ok
//change first element in array
arr[0] = "Hi!";             //change first element - ok
//reasign to new array
arr = [ "New", "Array" ];   //change reference - TypeError: Assignment to constant variable.
//primitive const value
//declare consatnt string
const message = "Constant string";
message = "New constant string";//change value - TypeError: Assignment to constant variable.

To sum up:

const
creates an immutable pointer to a value, but a value its self remains mutable. If you want to create a completely immutable value you should use Object.freeze().

const before ES6

So, how do you declare a constant value using standards previous to ES6?

You don't
. Yeah. It was a good practice to declare a variable using an
ALL_CAPS
 writing so that everyone knows it shouldn't be changed. Another way was to create a "repository" using "immediately-invoked function expressions" (IIFE). All the data declared inside IIFE are not visible neither changeable outside its scope. So you had to do something like this:

//declare constant values names
var ONE = "ONE";
var TWO = "TWO";
//create a repositpory for them
var ConstValues = (function() {
    //(function(){})() creates a scoped function.
    //only get method is visible from outside, so no one can
    //change data
    var data = {};
    
    //create two constant values
    data[ONE] = "uno";
    data[TWO] = "due";

    //everything inside return will be visible outside
    return {
       get: function(name) { return data[name]; }
   };
})();

//get constant value
var two = ConstValues.get(TWO);//due
//change constant value
ConstValues.data[TWO] = "dos";//TypeError: Cannot set property 'TWO' of undefined
//ConstValue.data is not visible here! (so you cannot change its properties)

Charming, yeah.

You can also use functions that always return the same value:

//declare constant values as function
function CONST_VALUE(){
    return "constant_value";
}

CONST_VALUE();//"constant_value"

//function to create a function that returns a constant value
function constant(value){
    return function(){
        return value;
    }
}

var a = constant(5);
a();//5

Conclusion

There were hard times for javascript developers.

In this article, we've learned the basics of

const
and some curious ways of creating "constant" values once upon a time in javascript.

P.S.

You should always use

const
each time the value won’t be reassigned, it makes easier to read the code and prevents some bugs and side effects.