⚡ Javascript Mapping and Arrow Functions

[bvdbasch]

I come from a JScript.Net background. JScript.NET is an old technology from Microsoft that added (data) types to vanilla javascript in a fashion similar to TypeScript. It is influenced by JScript (Microsoft's dialect of the ECMAScript standard used in Microsoft's Internet Explorer).

Basically I have always worked with ECMA script version 1 before switching to my current employer. Knowing how hard some things are to do with the first iteration of a programming language you really come to appreciate the advancements in modern (iterations of) programming languages. Arrow functions in JavaScript are a great example of this, so I figured I would illustrate how much easier they make life.

Without mapping and arrow functions

Let's say that you want to create a greeter that greets all names in an array. Performing this without mapping and arrow functions takes a few lines of codes and requires us to use a loop structure. Note that I use var and alert() on purpose here, because let and console.log() were not around at the time of ECMAScript 1 😢

var transformed = [];
var names = ['Peter', 'Florian', 'Dion', 'Michiel', 'Joachim'];
for (var i = 0; i < names.length; i++) {
​    transformed.push('Howdy ' + names[i] + '!');
}

alert(transformed);

With mapping and arrow functions

Thanks to the new capabilities in ECMAScript we can do the above in a single line of code and no longer have to concern ourselves with writing a loop. NICE!

let names = ['Peter', 'Florian', 'Dion', 'Michiel', 'Joachim'];
let transformed = names.map((name) => { return `howdy ${name}!` });
console.log(transformed);

Much easier and pretty straightforward. I hope that after reading this you appreciate the tools you have at your disposal today. And although there are still plenty of things with room for improvement I would hate to have go back and lose all those improvements we have access to today 🙃