Modern features of JavaScript

In JavaScript, we often need to store intermediate results by name so that we can refer to them again in a convenient way. This is known as binding a value to a name.

There are two ways to bind a value to a name:

1. by passing and argument to a function
2. by assigning a variable or a constant

Argument passing is a process by which arguments sent during a function during a call and get bound to the function’s formal parameters. For example, given the function func1

func1 = ( a, b, c ) => a + b + c;

If we called this function

func1( 1, 2, 3 ); 

Then the effect within the function would be to bind the values 1, 2, 3 to the formal parameters a, b, c. We can see this by substitution:

func1( 1, 2, 3 );

// substituting func1 for its implementation and it becomes

((a, b, c) => a + b + c)( 1, 2, 3 );

// applying the arguments to the function and it becomes

(a = 1, b = 2, c = 3) => a + b + c;

// substituting the parameters for the argument values it becomes 

1 + 2 + 3;

// which finally becomes the function's returned value 

6

This process of binding is analogous to the binding of values to variables and constants through assignment.

Variables and constants work the same way but with a small difference. A constant is like a variable that may only be assigned once. Any attempt to assign a value to the same constant will fail. Using constants is a very common practice in JavaScript and is far more common than variable reassignment. Therefore there are good reasons for preferring the use of constants over variables wherever possible and therefore to preferring using the const keyword over the let keyword and only using the latter in places where you are intending to reassign the variable. By following this convention, you are explicitly documenting the places in your code where bound names are changing their values. This kind of state modification is something to needs to be managed with care and the use of let should therefore be seen as a way to draw attention to this.

Note: this point remains controversial within the JavaScript community. This is because many object types are mutable and can have their internals changed. For example an object might have one of its properties assigned to. An array might have an element appended to it. In these cases the const keyword won’t stop this and the only way to do so is to call the freeze() method on the object (recursively in the case of nested objects).

While this objection certainly is true, I still consider the convention of preferring const over let to be a valuable one. Uncontrolled mutation of the state of mutable data types such as with unfrozen objects and arrays is generally a bad thing and should be avoided when possible. All state modification needs to be carefully managed by your program, no matter where it happens.

and avoiding variable reassignment wherever possible. In the code examples, I am going to prefer to use constants over variables and use the const keyword. I will use the let keyword only for those rare cases of needing variables and reassignment.

Constant declarations and variable assignments take the forms:

const <LHSExpression> = <value>;

let <LHSExpression> = <value>;

respectively. Both are scoped to the block of code that they were declared within. <LHSExpression> represents an expression which may be used on the left hand side of the assignment operator =. This is a restricted set of JavaScript expressions:

Destructuring works by pattern matching a subset of valid JavaScript expressions on left-hand side of an assignment. It works in a manner similar to array index assignment and object property assignment which both use expressions on the left-hand-side (LHS) of the assignment.

For example

arr[1] = 27;

obj.x = 100;

Destructuring Arrays

Given the array

arr1 = [ 1, 2, 3, 4, 5 ]

you can get first item:

[ a ] = arr1;

Result

> a = 1

you can also get the second item by:

[ , a] = arr1;

Result

> a = 2

And the third item:

[ , , a] = arr1;

Result

> a = 3

Getting all the elements except the first (the tail) by using the rest operator

[ , ...a] = arr1;

Result

> a = [ 2, 3, 4, 5 ]

NOTE: as mentioned earlier the Rest operator must come last on the LHS

[ ...a, _ ] = arr1; // this doesn’t work
[ ...a, ...b ] = arr1; // this doesn’t work either

To get the last item of an array you still need slice

[ a ] = array.slice(-1)

Result

> a = 5

To get the leading items of a array you still need slice

a = array.slice(0, -1);

Result

> a = [ 1, 2, 3, 4 ]

Swapping two variables:

a = 1;
b = 2;

[ b, a ] = [ a, b ];

Result

> a = 2, b = 1