JavaScript Katas

Learn JavaScript (the language and more) by doing it. Fix failing tests. Keep all learnings.

I learned ES6 by writing it and failing. Out of this the es6katas evolved. And since, this allowed me to always again go back and (re-)learn ES6 I wrote katas for ES8, later ES1 (I always got the sort() function wrong). At some point I started to learn a very expressive assertion library hamjest by writing katas for it, and so this page came about.
Enjoy and I hope you have fun learning with it.
Wolfram Kriesing

ECMAScript 1

Array API

`[].sort()` basics easy

`[].sort()` basics (#1)

The `sort()` function sorts an array as if each element was a string.

Difficulty: beginner

Links for futher reading

`[].sort()` can take a compare function

`[].sort()` can take a compare function (#2)

Passing a callback to the `sort()` function, allows for any custom sorting.

Difficulty: intermediate

Links for futher reading

ECMAScript 1 - Learn by rewriting

Array

`indexOf()` new

`indexOf()` (#1)

The `indexOf()` method returns the first index at which a given element can be found in the array

Difficulty: beginner

Links for futher reading

ECMAScript 6

Array API

`Array.from()`

`Array.from()` (#29)

Convert a not-array into an array.

Difficulty: tbd
`Array.of()`

`Array.of()` (#30)

`Array.of` creates an array with the given arguments as elements.

Difficulty: tbd
`[].fill()`

`[].fill()` (#31)

`[].fill` can fill up an array with one value.

Difficulty: tbd

Links for futher reading

`[].find()`

`[].find()` (#32)

`[].find` makes finding items in arrays easier.

Difficulty: tbd
`[].findIndex()`

`[].findIndex()` (#33)

`[].findIndex` makes finding items in arrays easier.

Difficulty: tbd
`[].entries()`

`[].entries()` (#41)

`[].entries()` returns an iterator object with all entries.

Difficulty: intermediate
`[].keys()`

`[].keys()` (#42)

`[].keys()` returns an iterator for all keys in the array.

Difficulty: intermediate
`[].values()`

`[].values()` (#43)

`[].values()` returns an iterator for all values in the array

Difficulty: intermediate

Class

creation easy

creation (#22)

Create a class.

Difficulty: beginner
accessors

accessors (#23)

Getter+setters as class properties.

Difficulty: intermediate
static easy

static (#24)

Use of the static keyword inside a class.

Difficulty: beginner
extends easy

extends (#25)

How to do inheritance, using `extends`.

Difficulty: beginner
more extends

more extends (#26)

More in depth `extends` stuff

Difficulty: advanced
super in method

super in method (#27)

Use of `super` inside a method.

Difficulty: intermediate
super in constructor

super in constructor (#28)

Use of `super` inside the constructor.

Difficulty: intermediate

Destructuring

array easy

array (#10)

Destructuring arrays allows for more concise.

Difficulty: beginner
string easy

string (#11)

Destructuring can also be done on strings.

Difficulty: beginner
object easy

object (#12)

Destructuring objects is a core concepts for modules and more.

Difficulty: beginner
defaults easy

defaults (#13)

When destructuring you can also use default values.

Difficulty: beginner
parameters

parameters (#14)

Destructuring function parameters.

Difficulty: intermediate
assign

assign (#15)

Assign variables while destructuring.

Difficulty: intermediate

Generator

creation

creation (#49)

There are many ways to create a generator

Difficulty: tbd

Links for futher reading

iterator

iterator (#50)

Generators return iterable objects

Difficulty: tbd
yield expressions

yield expressions (#51)

The yield keyword is used to pause and resume a generator function

Difficulty: tbd

Links for futher reading

send value to a generator

send value to a generator (#52)

By calling next() with a parameter, you can pass a value to a generator.

Difficulty: advanced

Links for futher reading

send function to a generator

send function to a generator (#56)

By calling next() with a function, you can pass it to the generator.

Difficulty: expert
`return` inside a generator function

`return` inside a generator function (#73)

Return statement in a generator function is special.

Difficulty: advanced

Links for futher reading

Map

Basics easy

Basics (#44)

Difficulty: beginner
`map.get()`

`map.get()` (#45)

Difficulty: intermediate
`map.set()`

`map.set()` (#46)

Difficulty: expert
initialize

initialize (#53)

Initializing a map with values.

Difficulty: advanced
`map.has()` easy

`map.has()` (#62)

Indicates whether an element with a key exists.

Difficulty: beginner

Links for futher reading

Promise

basics easy

basics (#75)

A promise represents an operation that hasn`t completed yet, but is expected in the future.

Difficulty: beginner

Links for futher reading

the API

the API (#78)

`Promise` API overview.

Difficulty: intermediate
`promise.catch()`

`promise.catch()` (#79)

Returns a Promise and deals with rejected cases only.

Difficulty: intermediate

Links for futher reading

Reflect

Basics easy

Basics (#58)

Difficulty: beginner
`Reflect.apply()`

`Reflect.apply()` (#59)

Calls a target function with given scope and arguments.

Difficulty: intermediate

Links for futher reading

`Reflect.getPrototypeOf()`

`Reflect.getPrototypeOf()` (#60)

It returns the prototype of the given object.

Difficulty: intermediate
`Reflect.defineProperty()`

`Reflect.defineProperty()` (#69)

Defines a property on a given object.

Difficulty: intermediate

Links for futher reading

Set

basics

basics (#47)

Difficulty: tbd
`set.add()`

`set.add()` (#48)

Appends a new element to the end of a Set object.

Difficulty: tbd
`set.delete()` easy

`set.delete()` (#64)

Removes an element from a set.

Difficulty: beginner

Links for futher reading

the API easy

the API (#65)

`Set` API overview.

Difficulty: beginner

Links for futher reading

`set.clear()` easy

`set.clear()` (#70)

Removes all elements from a Set object.

Difficulty: beginner

Links for futher reading

Iterator

array

array (#37)

Difficulty: tbd
string

string (#38)

Difficulty: tbd
protocol

protocol (#39)

Difficulty: expert
usage

usage (#40)

Difficulty: expert

Object literal

basics

basics (#9)

ES6 has new shorthands for objects.

Difficulty: intermediate
computed properties

computed properties (#16)

Object literal properties may be computed values.

Difficulty: advanced
getter easy

getter (#66)

A getter binds an object property to a function that will be called when that property is looked up.

Difficulty: beginner

Links for futher reading

setter easy

setter (#67)

A setter binds an object property to a function to be called when there is an attempt to set that property.

Difficulty: beginner

Links for futher reading

String API

`string.includes()` easy

`string.includes()` (#63)

Finds string within another string.

Difficulty: beginner

Links for futher reading

`string.startsWith()` easy

`string.startsWith()` (#72)

Determines whether a string begins with the characters of another string.

Difficulty: beginner

Links for futher reading

`string.endsWith()` easy

`string.endsWith()` (#74)

Determines whether a string begins with the characters of another string.

Difficulty: beginner

Links for futher reading

Template strings

basics easy

basics (#1)

A template string, is wrapped in backticks.

Difficulty: beginner

Links for futher reading

multiline easy

multiline (#2)

Template strings, can be multiline.

Difficulty: beginner

Links for futher reading

tagged template strings

tagged template strings (#3)

Advanced form of template strings.

Difficulty: intermediate

Links for futher reading

`raw` property

`raw` property (#4)

The `raw` property accesses the string as it was entered.

Difficulty: intermediate

Links for futher reading

Symbol

basics

basics (#34)

Symbol basics.

Difficulty: intermediate
`Symbol.for()`

`Symbol.for()` (#35)

`Symbol.for()` for registering Symbols globally.

Difficulty: intermediate
`Symbol.keyFor()`

`Symbol.keyFor()` (#36)

`Symbol.keyFor()` gets the symbol key for a given symbol.

Difficulty: intermediate

Arrow functions

basics easy

basics (#5)

Arrow functions are a more convinient and shorter way to write a function.

Difficulty: beginner
function binding easy

function binding (#6)

Arrow functions have lexical `this`, no dynamic `this`.

Difficulty: beginner

Block scope

`let` declaration easy

`let` declaration (#7)

`let` restricts the scope of the variable to the current block.

Difficulty: beginner
`const` declaration easy

`const` declaration (#8)

`const` is like `let` plus read-only.

Difficulty: beginner

Rest operator

as parameter

as parameter (#18)

Use the rest operator as parameter.

Difficulty: intermediate
with destructuring

with destructuring (#19)

Use the rest operator with destructuring.

Difficulty: intermediate

Spread operator

with arrays

with arrays (#20)

Spread syntax in use with arrays.

Difficulty: intermediate

Links for futher reading

with strings

with strings (#21)

Spread syntax in use with strings.

Difficulty: intermediate

Links for futher reading

Default parameters

Basics easy

Basics (#57)

Default parameters make function parameters more flexible.

Difficulty: beginner

Modules

`import` statement easy

`import` statement (#61)

Use `import` to import functions that have been exported somewhere else.

Difficulty: beginner

Object API

`Object.is()` easy

`Object.is()` (#54)

`Object.is()` compares if two values are the same.

Difficulty: beginner

Unicode

in strings

in strings (#17)

How to use unicode in strings.

Difficulty: intermediate

ECMAScript 7

Object API

`Object.entries()` planned

`Object.entries()` (#2)

Difficulty: beginner
`Object.values()` planned

`Object.values()` (#3)

Difficulty: beginner

Array API

`[].includes()` planned

`[].includes()` (#1)

Difficulty: beginner

Links for futher reading

ECMAScript 8

Async Function

ECMAScript 10

Object API

`Object.fromEntries()`

`Object.fromEntries()` (#1)

`Object.fromEntries()` converts key-value pairs into an object

Difficulty: intermediate

Links for futher reading

Assertion Library Hamjest

matchers

`equalTo()` easy

`equalTo()` (#2)

The most common matcher `equalTo()`.

Difficulty: beginner
`strictlyEqualTo()` easy

`strictlyEqualTo()` (#3)

The strict version of `equalTo()`, just like the `===`.

Difficulty: beginner
`anything()` easy

`anything()` (#4)

The matcher `anything()`, matches any value and never fails.

Difficulty: beginner
`defined()` new

`defined()` (#5)

The matcher `defined()`, matches everything but `undefined`.

Difficulty: beginner

core

`assertThat()` easy

`assertThat()` (#1)

The core function needed for most assertions.

Difficulty: beginner