5 things I learnt during my latest Javascript Code Kata
Tags: coding, javascript, learning
Published: 2018-08-30 19:31:06

---
title: 5 things I learnt during my latest Javascript Code Kata
published: true
tags: Coding,javascript,learning
canonical_url: https://on-sw-integration.epischel.de/2018/08/30/things-i-learnt-during-my-latest-javascript-code-kata/
---
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](https://www.codewars.com/kata/5ae8e14c1839f14b2c00007a)” 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:

```javascript
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:

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

There is object destructuring:

```javascript
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

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

See [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) for more.

# Spread operator to create an array using an array literal

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

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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”):

```javascript
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:

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

and you can index strings:

```javascript
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:

```javascript
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:

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

Third, you might not redeclare a variable using let:

```javascript
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.

 ![](https://www.epischel.de/analytics/piwik.php?idsite=3&rec=1&url=https%3A%2F%2Fon-sw-integration.epischel.de%2F2018%2F08%2F30%2Fthings-i-learnt-during-my-latest-javascript-code-kata%2F%3Fpk_campaign%3Dfeed%26pk_kwd%3Dthings-i-learnt-during-my-latest-javascript-code-kata&action_name=Things+I+learnt+during+my+latest+Javascript+Code+Kata&urlref=https%3A%2F%2Fon-sw-integration.epischel.de%2Ffeed%2F)