Fear of Missing Out: 5 things you need to know in Old Javascript that’s improved in Modern Javascript (ES6)

1. Var — function scope, instead of block scope

In the declaration of variables, var keyword is the only way to do so before ES6. It’s important for beginners to note that var is not block scoped, but only function scoped.

In the code snippet above, notice that variable i is not restricted to the for loop block. The console.log is able to capture the value of “5”, which is the terminating i value that caused the for loop to break.

So remember var declared variable are not block scoped, but function scoped.

Var is at least function scoped

In the function above, container is declared with var. From the output, you can see referring to container outside the function afunc throws a ReferenceError. So at least var declared variables are function scoped.

For modern general programming languages, such as C++, Python and Ruby, we expect that variables are both function and block scoped. So the idiosyncrasy of var in old Javascript, not being block scoped, does throw many beginner developer off.

2. Const — Superficial immutability

In modern javascript since ES6, let and const syntaxes are available. Block scope is included with these two modifiers, variables declared with both are now in line with other programming languages. For the former let, the variable will declared will be mutable. If you use const, immutability will be conferred. However, the immutability is only conferred to the reference. What is a reference, you ask? When you assign a variable, the variable refers to a primitive such as an integer number, or it refers to a object. The reference is actually the memory address.

For the primitive variable, the reference or memory address pointed by the variable actually is the memory address that contains the number value. Using Const, the memory address and the value are both frozen from change, hence variable is immutable. However, when referencing an object, the memory address that is the reference actually points to another memory addresses whose space are what made up the object.

Only the reference memory address is immutable, but not the memory addresses that is occupied by the “object”. If you have ever worked with C pointers, this is exactly the mental model you need to have to understand Const. Since the Object can contain value(s), and these are not at the memory address referenced by the Const variable, the object value(s) can still be changed i.e. mutable, but the memory address reference is immutable.

In the code below, a Type Error will be thrown since we are attempting to change the variable number declared with Const from value 10 to 11. This is not allowed, hence the Javascript run-time is preventing that with a type error.

However, attempt to change the value of objectRef will be successful, as seen in action in the code below.

3. Using Object Freeze function for Shallow Immutability

So what if we want to make the value of the object immutable? Why would we want that? Well, imagine if your code base is huge and an object is being passed around. Some code may actually change the value of the object when it shouldn’t. I am sure you will be spending a long time to debug why your program is not working as intended. The most classic example of an immutable object is the String object. It cannot be changed, as demonstrated in the code below.

The “use strict” string at the top of the code tells the run-time not to have the code to fail silently, but loudly by throwing errors.

In the code below, the object is made immutable with the Object.freeze method. Any attempt to change the value within the object will fail.

However, do know that the immutability is only skin deep. If the object contains other nested objects, these could have their value changed, unless these nested objects are also created with use of Object.freeze.

4. Rest operator to catch arguments into an Array

Old Javascript has always supported more arguments being given to a function then specified, and not throwing errors. You can see in below code’s output that the extra arguments 2, 3, 4 are not assigned to variable a. These are extra arguments. You could also use the “arguments” keywords to get an array-like object of the all the parameters, which allow you to even pin-point specific arguments in your code.

Why “array-like”? Well, arguments variable is not really of type Array. See for yourself above.

In ES6, the rest operator (…<variableName>) is created to basically allow the arguments to be collected into an Array of your choice and name.

5. Spread operator to put arguments in placed

Like the good cousin to the rest operator, the spread operator is of the same syntax form (…arrayToSpread) BUT on the calling end of the function. It allows an array to be “spread” out as arguments in the called function, avoiding the need to do individual assignment to the parameters. See code below to understand better.

Let’s take a break. I do hope you find the code snippets useful for your reference and understanding. Modern Javascript since ES6 has been trying to make our lives as developers easier. It’s important we understand how the improvements behave and not to take things for granted.

Please clap and follow if you find the article useful. Happy coding!