Sometimes I do a code kata at codewars.com. That is a fun way to solve computer science related problems, learn on the way to solve them and especially learn from the solutions of others.

Today I completed the kata “Make a spanning tree” using Javascript. I occasionally use Javascript to write an event handler or so but I don’t have much experience in “modern” Javascript. Here is what I learnt from looking at the solutions of others.

Destructuring

I know this from my Scala class and Clojure.

You can assign array elements to variables:

var a, b, rest; 
[a, b] = [10, 20];
console.log(a); // expected output: 10 
console.log(b); // expected output: 20 
[a, b, ...rest] = [10, 20, 30, 40, 50]; 
console.log(rest); 
// expected output: [30,40,50]

so “…rest” is assign the rest of the array.

This is nice syntactic sugar also when working with nested arrays. Eg when “edges” is an array of pairs:

// sort edges by weight
edges.sort(([edge_a, a], [edge_b, b]) => a - b);

There is object destructuring:

var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true

and even assigning properties to new variables

var o = {p: 42, q: true};
var {p: foo, q: bar} = o; 
console.log(foo); // 42 
console.log(bar); // true

See MDN web docs for more.

Spread operator to create an array using an array literal

Using an array literal to create an array from two other arrays:

const sets = {}; 
//... 
// new array with sets[a] elements and sets[b] elements 
const set = [...sets[a], ...sets[b]];

Objects are associative arrays (aka maps)

Although I already knew this, kind of, this refreshes my JS knowledge.

First, you can add properties to Objects without declaring them in the first place:

let obj = {}; // anonymous object 
obj.height=2; // create new property "height" and assign value 
console.log(obj.height); // 2

Second, instead of the dot-notation you can use array index notation using the property name as the index:

let obj = {}; 
obj['height'] = 2; 
console.log(obj['height']); // 2

One solution uses this in order to save the weighted edges in an object just like i did in the proper Map object:

let set = {}; 
edges.filter(e => e[0][1] !== e[0][0]).forEach(e => { if (!set[e[0]] || minOrMaxFunc(set[e[0]], e[1])>00) { set[e[0]] = e[1]; } });

Third, methods are kind of properties, too. In the same solution, “minOrMaxFunc” is cleverly choosen (“minOrMax” argument is either “min” or “max”):

function makeSpanningTree(edges, minOrMax) { 
  let minOrMaxFunc = { min: (a, b) => a - b, max: (a, b) => b - a }[minOrMax]; 
  // ... 
}

it creates an objects with two methods: “min” and “max” and then references the one that is given in the argument. If “minOrMax=min”, a reference of the “min” method is returned.

Strings are arrays

Destructuring works with strings:

let [a,b] = 'ABC'; 
console.log(a); // "A" 
console.log(b); // "B"

and you can index strings:

const s = "ABC"; 
s[1]; // "B"

“var” vs. “let”

Of course, the solutions written in “modern” JS use “let” and “const” all over the place. I just reassured myself about the difference between let and var:

First, variables declared in a block using “var” are visible outside that block and are “known” before being declared:

function f() { 
  console.log(v); // undefined 
  { var v = 3; } 
  console.log(v); // 3 
}

a block might be a for-loop.

Variables declared using let are not visible outside the block and are not “known” before they are declared:

function f() { 
  console.log(v); // Reference error 
  { let v = 3; } 
  console.log(v); // Reference error }

Third, you might not redeclare a variable using let:

var a = 0; 
var a = 1; // OK 
let b = 0; 
let b = 1; // not OK

So basically, “let” is a sane way to declare variables.