Using array destructuring and recursion to make your JavaScript algorithms shine

JavaScript if far from being the best-designed language in the world. I personally often feel myself like in the mine field when coding in it. But it evolves and gets better and better. I can increasingly better express the ideas in JavaScript and I feel it becomes truly powerful and pretty pleasant language to use. Here, I want to share how today one can calculate the sum of the array of numbers. The example is contrived but this example is always used in the schools to teach programming and usually, students are taught to create an accumulator variable and then iterate and accumulate the sum in that variable. How procedural is this! Now, look at what you can do with JavaScript today:

No variables, no loops, pure simplicity. It might be not very efficient code, but very simple and functional one.

Another example. I have found a quicksort implementation in JavaScript on the web (you can skip it, it is just for illustration):

It is totally procedural and very difficult to understand. Now, here is my alternative implementation, using recursion and latest JavaScript features:

So clear, so simple and again no loops or variables. Love it. Again, performance is not great here, but I am biased towards code simplicity and optimizing only when absolutely necessary.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

TypeScript is actually JavaScript and one still has to be careful

TypeScript, although very promising language, does not solve fundamental JavaScript’s issue (feature?) with “this” property binding. TypeScript can lead to unfortunate errors since it is heavily used by people coming from C#/Java communities, who bring coding patterns with them. Let’s have a look at code example from TypeScript playground:

Now, lets make slight change to the last two code lines:

This happens because greet() method references this and when you make a call of greet() not on the object, this gets bound to the global scope. It’s really unfortunate that one can so easily destroy TypeScript object’s integrity. In C# this example would work just fine and therefore C# developers should be extra careful to avoid this pitfall:

Now, even knowing all rules of this binding (take a look at this article if you are not aware of these rules), I was caught when I was coding in TypeScript class for Angular 2 framework:

See how updateClock local function starts accessing Timer properties via this? Seriously, I was debugging this code full of surprise trying to understand why am I getting an error. And the reason was that updateClock() is invoked without binding to any object which meant binding to the global scope again.

Conclusion: TypeScript is great, but guys, don’t relax, remember you are still coding in JavaScript, not C# or Java. And probably avoid using classes and this altogether.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Exporting a variable from JavaScript module

From time to time I do the same error when trying to export some variable from whatever kind of JavaScript module:

Having 13 years of coding experience does not save me from the moment of confusion here :-). If you are also confused, then continue reading.

So, why the result is “Alexander” again? The reason is that s.name and local variable name are totally different variables. The first one is created here as a property of the object, which is being returned from createStudent:

Its value is copied from name variable and this value is reference to the “Alexander” string. So at this point both point at the same object. But then s.setName("Ivan") gives to the name variable (which is closed inside setName and getName) a new value, the reference to the “Ivan” string. The value of s.name does not change, therefore we get “Alexander” again from the console.log(s.name) expression. However, console.log(s.getName()) returnes “Ivan” because it closes name variable inside itself.

So the lesson here is to avoid exporting local variables as module’s properties. One should export functions which close local variables instead. Another interesting option is to use JavaScript’s property feature like this:

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail